Css capital letters. Creating capital letters using CSS. HTML letters and CSS spacing between them

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

Initial letters then and now

Chroniclers used capital letters in handwritten manuscripts, some of them dating back to the 5th century. Capital letters continued to be used from the 8th to the 15th centuries, when printing presses allowed printing to be brought to an industrial level. Both handwritten and printed initial letters were placed at the beginning of the text. They were often decorated with a decorative pattern that was located around the letter.

Raised and dropped letters are still used today. They can be found in newspapers, magazines and books, as well as in digital printing. Raised type is sometimes called elongated type. They are placed flush with the bottom of the text that follows them. Dropped letters are placed flush with the top of the text, sometimes in a layer behind the body of the text content, or the rest of the text wraps around them.

Raised letters are much easier to define because they are flush with the rest of the text and usually don't need to change the wrap around the outer margins. Omitted letters require more fine-tuning. It will be easier for you to understand this if you first understand how raised characters are handled.

Using classes

Designers who already have an understanding of CSS know that they need 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? You'll actually have to make adjustments depending on the specific letters raised, 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 including a new class with a negative margin pulls it closer.

Depending on the screen resolution in the example above, the I and n may look like they're blurred together. This is due to the serifs at the ends of the letters. So before you decide on your final CSS styles, test your site on different devices to see how CSS caps text looks on them.

Quotes and other special cases

You can enlarge not only the letters at the beginning of the text. You can implement another class to create a larger version of quotation marks that will appear next to the letter. In our case, neither a letter class with a size of 48 nor a text class of 20 pixels is suitable for quotation marks. Rather, it will be something in between - 30 pixels. We'll move the quotes down 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 about setting each of the CSS capitalizations along with the quotes 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 of 20, 30, and 48. But you will need to select sizes based on the specific fonts you choose. 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 a 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;)

HTML code that contains CSS classes that take into account the kerning of the letters N and B would look like this...

An initial 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 the paragraph is converted to a letter.
The first letter after a line break will not be converted to capital.

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

ABOUT However, even after a forced line break, and at the beginning of each new paragraph, a letter is always created. You may ask yourself: How should I take this into account? Do I need to add letters for all these cases? Well, you can. But is this 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 converts the first letter of each new paragraph to a CSS capital letter. For some, it may not be suitable because it does not need to transform the first letter of each paragraph.

Combining pseudo-classes and pseudo-elements to create a smart layout

Adding the :first-child pseudo-class helps solve the problem of unnecessary conversion of 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 is converted to a raised drop cap by this method.

Since only the letter defined as first-child is converted, note that this example is different 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 the downsides? 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

. For example, as shown in the raised lettering example below in the Didot font. Notice how the margin attribute has been added to the right of the A. Otherwise, it would “glue together” with the letter s at the beginning of the section:

section ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;)

And along with HTML:

At the beginning of the section, a raised drop cap is specified for the first letter.

And a new paragraph...

If you're feeling experimental, you can explore different methods in addition to :first-child and :first-of-type . For example, such as :nth-of-type or :nth-of-child to see how these or other types of pseudo-classes can be used for CSS capitalization text. Whether you follow the principles outlined in this article or start digging deeper, once you learn how to work with the CSS pseudo-classes first-child , :first-of-type , and :first-letter , you'll be able to apply them correctly to HTML elements.

Good day, site building geeks. Today's publication will discuss the topic of designing text content. That is why you will learn how to set capital letters using CSS tools, get acquainted with several options for creating a drop cap and, of course, you will be able to try everything out in practice. Well, now let's move on to the fun part!

Let's transform the text

Thanks to cascading style sheets, you can change both the first character of a block and the entire text. I'll tell you how you can do both. 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 . This text-transform.

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

Now, to reinforce the theoretical material, look at an example.

Transform text

Attention!

!Tomorrow there is a discount on all cosmetic products!

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

Creating a drop cap

If you don't know what the term "drop cap" means, then now is the time to find out, as it is directly related to the current topic.

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

There are several ways to create an initial. Often the symbol is highlighted with a markup language tag and then certain properties are prescribed in the styles 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 we use:first-letter. Like all pseudo-elements, it is assigned to a selector using a colon. After all the rules of style sheets, properties are indicated. However, you can only apply properties that relate to editing fonts, padding, color, background, margins, and borders.

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

Raised initial

This paragraph contains a sentence with very interesting content.

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

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

As you can see, this topic is very simple. You can easily use the program code I have provided for your web resources, modifying and customizing it to suit your style.

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

Bye bye!

Best regards, Roman Chueshov

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.

Example

h3 ( text-transform: uppercase; ) .lowercase ( text-transform: lowercase; ) .capitalize ( text-transform: capitalize; ) text-transform

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

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.

Result

However, not all so simple. There are some nuances. If you look at the second paragraph of the above example, you will notice that the word capitalize , despite having the text-transform property set to capitalize applied to the paragraph, is displayed entirely in capital letters, which matches the original text. This is explained by the fact that with the specified value of capitalize, only the first letters of the 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 uppercase, you just need to add one property to the style sheet

H1 (text-transform: uppercase;)

and the problem will be solved. And you won’t need to manually change all the headers, of which there can be very, very many.

Controls whether the element's text is converted to uppercase or uppercase characters. When the value is other than none , the case of the source text will be changed.

brief information

Designations

	Description	Example
<тип>	Indicates the type of the value.	<размер>
A && B	The values must be output in the order specified.	<размер> && <цвет>
A \| B	Indicates that you need to select only one value from the proposed ones (A or B).	normal \| small-caps
A \|\| B	Each value can be used independently or together with others in any order.	width \|\| count
	Groups values.	[ crop \|\| cross ]
*	Repeat zero or more times.	[,<время>]*
+	Repeat one or more times.	<число>+
?	The specified type, word, or group is optional.	inset?
(A, B)	Repeat at least A, but no more than B times.	<радиус>{1,4}
#	Repeat one or more times separated by commas.	<время>#

Values

capitalize The first character of each word in a sentence will be capitalized. The remaining symbols do not change their appearance. lowercase All text characters become lowercase (lowercase). uppercase All text characters become uppercase (uppercase). none Does not change the case of characters.

Sandbox

Winnie the Pooh was always not averse to a little refreshment, especially at eleven in the morning, because at that time breakfast had long ended, and lunch had not yet begun. And, of course, he was terribly happy to see that the Rabbit was taking out cups and plates.

div (text-transform: capitalize; )

Example

text-transform

Cultural monument of the Middle Ages

The Amazonian lowland is immoderate in the small transport of cats and dogs, and Hajos Bahia is famous for its red wines.

The result of this example is shown in Fig. 1.

Rice. 1. Applying the text-transform property

Object model

An object.style.textTransform

Specification

Each specification goes through several stages of approval.

Recommendation - The specification has been approved by the W3C and is recommended as a standard.
Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
Working Draft - A more mature version of a draft that has been discussed and amended for community review.
Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
Draft ( Draft specification) - the first draft version of the standard.

Hello readers of this blog. Today I will talk about how you can make all capital letters using CSS. Of course, to do 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 a finished article?

Making all letters capital in css

There is a text-transform property for this, which, as you may have guessed, transforms text. It has the following values:

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

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?

How to reach the desired element?

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 had to have certain 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 this example, our block with an article 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.