Hello readers of this blog. Today I will talk about how you can make all capital letters using CSS. Of course, you can enable this Caps Lock and write the required text, but this is a rather primitive method. But what if you need to highlight a separate paragraph in an already finished article?
There is a text-transform property for this, which, as you may have guessed, transforms text. It has the following values:
That's basically all you need to know. All that remains is to figure out how to access the desired element. Let's imagine this example: you need to make the fifth paragraph in an article all capital letters. And how can this be implemented?
As you know, a paragraph is created using a paired html tag, the entire content of which becomes a paragraph. All that remains is to define a new style class for it:
Now we have the opportunity to access this specific paragraph through the CSS language without affecting the rest. You can do it like this:
Uppercase-letter(
Text-transform: uppercase;
}
This method is suitable when you need to highlight a fragment in a particular article. What if all pages should have specific text in capital letters. In this case, it is better to place the block in a template file so as not to write it every time.
Or perhaps you need to highlight the second paragraph in each article using CSS in capital letters. Then another option will suit you. Find the block where the article appears and access the second paragraph using the nth-child pseudo-class. IN in this example Our article block has the article class.
Article p:nth-child(2)(
Text-transform: uppercase
}
As you can see, there is a different solution for each specific case. The most important thing is to remember about the text-transform property, which changes the case of letters.
In general, it is not recommended to display text this way, because it greatly impairs its perception, but some particularly important fragments can be highlighted.
Today we looked at the text-transform property. Subscribe to the blog to receive new articles.
Allows you to change the case of text letters.
The default value is set to none , which has no effect on the text. The case of the text remains the same. The uppercase and lowercase values convert characters to uppercase and lowercase, respectively. If you specify capitalize , only the first characters of each word will be capitalized. Inherit inherits the value of its parent.
The Text-transform Property with the Value Lowercase is applied to this paragraph, which means all letters will be in lowercase.
And to this last paragraph the text-transform property with the CAPITALIZE property is applied. The first letters of each word will be capitalized, and only those.