Allows you to change the case of text letters.

The default value is none , which has no effect on the text. The case of the text remains the same. The values ​​uppercase and lowercase convert characters to uppercase and lowercase, respectively. If you specify capitalize , then only the first characters of each word will be capitalized. Inherit inherits the parent's value.

Example

This is the title. It has a text-transform property applied with a value of uppercase. All characters will be uppercase.

This paragraph has the Text-transform Property set to Lowercase, which means all letters will be in lowercase.

And this last paragraph has a text-transform property applied with the CAPITALIZE property. The first letters of each word will be capitalized, and only they.

Result

However, not all so simple. There are some nuances. If you pay attention to the second paragraph of the above example, you will notice that the word capitalize , despite the text-transform property applied to the paragraph with the value capitalize , is displayed entirely in uppercase letters, which corresponds to the source text. This is explained by the fact that with the specified value of capitalize, only the first letters of words are checked, and the rest remain unchanged, regardless of their initial state.
Despite its apparent simplicity, the text-transform property can be very useful. For example, in order to make the text of all H1 headings of your site capitalized, you just need to add one property to the style sheet

H1 (text-transform: uppercase;)

and the problem will be solved. And you do not need to manually change all the headers, which can be very, very many.

Good day, site building geeks. Today's post will cover the topic of design. text content. That is why you will learn how css capital letters are set - by means, get acquainted with several options for creating a capital letter and, of course, you can try everything out in practice. Well, now let's move on to the most interesting!

Let's Transform Text

Thanks to cascading style sheets, you can change both the first character of a block and the entire text. I will tell you how you can do both options. Moreover, all the tools mentioned in this article are supported in three language levels: css1, css2, css2.1 and css3.

I'll start with an interesting property that modifies all text content in the selected . it text-transform.

The named element can convert characters to uppercase, lowercase, and also set every first character of a word as a capital letter. I wrote more about the values ​​​​in the table.

Now, to consolidate the theoretical material, consider an example.

Attention!

!Tomorrow all beauty products are discounted!

The promotion is valid in all branches located in your city.

Creating a drop cap

If you don’t know what the term “letter letter” means, then it’s time to find out, as this is directly related to the current topic.

The initial letter (or sometimes they say the initial) is the first letter of the chapter, which differs from the rest in its large size, color, and in some cases even font design. In life, an example of such a letter can be found in old manuscripts and books.

There are several ways to create an initial. Often a character is highlighted with a markup language tag and after in styles prescribe certain properties that modify it. This is a good way, but this publication talks about css mechanisms (which, in my opinion, are much more logical and convenient to use in this case).

To solve this problem, you can use a tool such as.

So, in this case: first-letter is used. Like all pseudo-elements, it is appended to the selector with a colon. After all the rules of style sheets, properties are specified. However, you can apply only those properties that are related to editing fonts, indents, colors, background, margins and borders.

I propose to consider specific example. Implementing the presented small program, I decided to make not just a colored drop cap, but fill it with flowers. To do this, you need to use a few tricky tricks with setting the font color to transparent and filling the letter with the selected image.

This paragraph contains a very interesting sentence.

Let's continue the interesting story in the next paragraph.

The result obtained looks very attractive and unusual, which is ideal solution for .

As you can see, this topic is very simple. brought by me programming code you can easily use for your web resources, modifying and adjusting to your style.

If the material presented was useful to you, then subscribe to my blog updates and do not forget to share your knowledge (and, of course, a link to my blog) with your friends. Good luck!

Bye Bye!

Sincerely, Roman Chueshov

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 located on the same level as bottom the text that follows them. Dropped letters are placed flush with the top of the 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 more fine 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 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 Please note that in source code In HTML, 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