Css all letters are capital. Capital HTML letters and CSS letter spacing. !Tomorrow all beauty products will be discounted

Hello readers of this blog. Today I will talk about how you can do everything through css capital letters. Of course, for this you can turn on Caps Lock and write the desired text, but this is a rather primitive method. But what if you need to highlight a separate paragraph in an already finished article?

Make all letters capitalized in css

There is a text-transform property for this, which, you guessed it, transforms the text. It has these values:

• lowercase - all text is displayed in lowercase
• uppercase - all words are displayed in capitals (what we need)
• capitalize - capitalize the first letter of each word

Here, in fact, is all you need to know. It remains only to understand how to access the desired element. Let's imagine this example: you want the fifth paragraph in an article to be all caps. And how can this be done?

How to reach the required element?

As you know, a paragraph is created using a paired html tag, the entire content of which becomes a paragraph. It remains only to set a new style class for it:

Now we have the opportunity to refer through the css language to this particular paragraph 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 separate article. And what if all pages should have certain text in capital letters. In this case, it is better to place the block in the template file so as not to write it every time.

Or maybe you need to highlight the second paragraph in each article using css in capital letters. Then there is another option for you. Find the block that displays the article and refer to the second paragraph using the nth-child pseudo-class. AT this example Our article block has the article class.

Article p:nth-child(2)(
Text-transform: upper case
}

As you can see, each case has its own solution. The most important thing to remember is the text-transform property, which changes the case of letters.

In general, it is not recommended to use output text in this way, because it greatly impairs its perception, but some particularly important fragments can be distinguished.

Today we've covered the text-transform property. Subscribe to the blog to receive new articles.

CSS capital letters help to break the monotony of the same type of design, the texts of which look the same from beginning to end.

Letters then and now

The chroniclers used capital letters in handwritten manuscripts, some of which date back to the 5th century. Capital letters continued to be used from the 8th to the 15th century, when printing presses made it possible to bring printing to an industrial level. Both handwritten and printed capital letters were placed at the beginning of the text. Often they were decorated with a decorative pattern that was located around the letter.

The raised and lowered letters are still in use today. They can be found in newspapers, magazines and books, as well as in digital printing. Raised letters are sometimes called elongated. They are placed flush with the bottom of the text that follows them. Omitted letters are placed on the same level with top text, sometimes in a layer behind the main body of text content, or the rest of the text wraps around them.

Raised letters are much easier to define as they sit flush with the rest of the text and usually don't need to change the wrapping of the outer margins. Omitted letters require finer tuning. It will be easier for you to deal with this if you first understand how lifted characters are handled.

Using classes

Designers who already have an understanding of CSS know to create a separate CSS class for the first capital letter.

The CSS code for the paragraph element and the class that creates the letter would look like this:

p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)

And the HTML code will look like this:

What gives us:

Seems too easy? In fact, you will have to make adjustments depending on the specific raised letters, since each capital letter requires special kerning. After choosing a font for the raised letters and for the body text, you need to create separate classes for each raised letter. In the below CSS class.myinitialcapsi the margin on the right is negative to reduce the distance between I and n .

Myinitialcapsi(font-size:48px; font-family: Didot; margin-right:-1px;)

I n this case, there's some extra space between the “I” and “n.”

I ncluding a new class with a negative margin pulls it closer.

Depending on the screen resolution in the example above, I and n might look like they've merged together. This is due to the serifs at the ends of the letters. Therefore, before choosing the final option css styles, test the site on various devices to see how CSS text looks on them.

Quotes and other special cases

You can increase not only the letters at the beginning of the text. You can implement another class to create a larger version of the quotation marks that will appear next to the letter. In our case, neither the letter class with a size of 48 nor the text class of 20 pixels is suitable for quotes. Rather, it will be something in between - 30 pixels. We move the quotation marks down by 4 pixels to optically align them with I :

Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)

“I ncluding” a new class with a negative margin pulls it closer.

You need to be very careful when specifying each of the CSS capital letters along with the quotation marks so that their kerning and alignment matches the surrounding markup. For example, the letter T will need to be moved to the left, slightly beyond the edge of the paragraph, so that its transverse line visually fits into the layout. You will need to do the same with round letters such as C , G , O and Q . This example uses font sizes 20, 30 and 48. But you will need to adjust the sizes based on the specific fonts you have chosen. As well as the sizes and resolutions of the screens on which the site will be viewed.

Pseudo-elements and pseudo-classes

Using the CSS pseudo-element, you can easily create a raised letter by adding ::first-letter to the paragraph element. Use :first-letter ( with one colon) for legacy browsers:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:1.2em;) p::first-letter ( font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;) .initialb (margin-right:-0.1em;) .initialn (margin-right:-0.15 em ;)

An HTML code that contains CSS classes that take into account the kerning of the letters N and B will look like this…

An inital letter, with the first letter being a capital letter.
With a line break, the next line has no initial cap.

n otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?

B ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph? Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?

The first capital letter of a paragraph is converted to a letter.
The first letter after a line break will not be capitalized.

about Note that in the HTML source, the first letter is not capitalized, but it is converted to a 3.6em character.

O However, even after a forced line break, a letter is always created at the beginning of each new paragraph. You may ask yourself: How can I take this into account? Do I need to add letters for all these cases? Well, you can. But is it necessary?

Even with the benefits that pseudo-elements provide, we had to add a lot of code to define separate classes to handle kerning and padding issues. But this method will convert the first letter of each new paragraph to CSS capitalization. For some, it may not be suitable, because you do not need to convert the first letter of each paragraph.

Combining Pseudo-Classes and Pseudo-Elements to Create a Smart Layout

Adding the :first-child pseudo-class helps to solve the problem of unnecessary conversion of the first letters:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:0.5em;) p:first-child::first-letter ( font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;)

Combining this code with HTML :

The first letter that is defined as first-child is the only letter that converts to a raised drop cap in this method.

Since only the letter defined as first-child is converted, note that this example differs from the previous one without first-child. In addition, we do not convert the first letters after the beginning of a paragraph and after a forced line break. This looks more elegant than how the layout looked when we converted all the first letters of the paragraphs.

The advantage of using pseudo-classes is the ability to handle various special cases. What about disadvantages? There are many different pseudo-classes, and they can be combined in so many ways that it can make your head spin. For example, the pseudo-classes :first-child and :first-of-type can produce the same results. You can also apply a pseudo-class not only to a paragraph, but also to elements