All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

CSS Uppercase First Letter

Last Updated : Mar 11, 2024

CSS Uppercase First Letter

In this article we will show you the solution of CSS uppercase first letter and we will learn about uppercase first letter of each word in given string using CSS.

As we know css used to style html elements, here we used to capitalize first letter of each words in sentence through internal style of css method.

Along with that, you can explore feature of uppercase and lowercase the sentence when you want it. Here shown example we applied capitalize on h1 element’s sentence.

Step By Step Guide On CSS Uppercase First Letter :-

In our program we defined h1 element to disclose the capitalization process to users.

You know we can use css in three ways to achieve particular result. Here we handles inter style method, if you wants to try with other two method you can do it.

That give you exact result like here shown example and to reach goal of capitalization you need to use ‘text-transform’ property with necessary option.

<!DOCTYPE html>
        <title>Capitalize Using CSS</title>
        <h1 style="text-transform:Capitalize;">hi this is capitalizing sentence example</h1>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Within body blog we defined h1 pair elements with sample text ‘hi this is capitalizing sentence example’.
  7. Note this sentence only contains small case letters. To implement internal style, you need to define ‘style’ tag inside html element with required css style properties and respected values.
  8. So we defined style tag with ‘text-transform’ property with value ‘Capitalize’. It can only do the capitalization process by css code.
  9. With few changes you can also get uppercase and lowercase results. Later we will discuss about them in detail.
  10. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to capitalize first letter of words in a sentence through css.

When we executes this program on webpage of browser you can see text ‘Hi This Is Capitalizing Sentence Example’ as per your expectation. To modify the example text just change the sentence without touching any other elements.

Your result will vary according to your modification otherwise you can see same result at your webpage.

I hope this article on CSS uppercase first letter helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪