W3docs

css · CSS Basics

How to make each word of the text start with a capital letter?

Answers

  • text-transform:uppercase
  • text-transform:capitalize
  • text-transform:lowercase
  • Can't do that with CSS
# Using CSS text-transform to Start Each Word with a Capital Letter The correct answer is `text-transform: capitalize;`. This property in CSS is used to change the text case in HTML documents. When it is set to `capitalize`, it converts the first letter of each word in the text to uppercase. Let's understand the applications of this property through a practical example: ```css p { text-transform: capitalize; } ``` In the above CSS code snippet, all paragraphs (`

` tags) on the webpage will start every single word with a capital letter. For instance, if you have a paragraph "the quick brown fox jumps over the lazy dog", it will be displayed as "The Quick Brown Fox Jumps Over The Lazy Dog". It's important to note that the `text-transform` property does not change the actual text content. It only changes its appearance. Hence, these changes are not captured in copy-pasting operations. Apart from `capitalize`, there are other values for `text-transform` property as well: - `uppercase`: Converts all letters of the text to uppercase. - `lowercase`: Converts all letters of the text to lowercase. - `none`: No capitalization is applied. - `full-width`: Changes the text to full-width characters, useful for alignment in some languages. Best practices recommend using CSS transformations for text cases instead of manually editing text. This method provides a consistent user interface experience across the website and ensures the efficiency and maintenance of HTML content. Remember, aesthetically pleasing text contributes to the positive user experience. However, use of all-capital letters should be limited as it gives the impression of shouting. In conclusion, the `text-transform` property in CSS is a versatile tool for transforming text without changing the original content. It makes the text more readable and is especially useful when displaying dynamic content where case-style adherence is uncertain.