Drop cap (a drop cap embedded in the text) is the first letter of a paragraph, larger than the rest, and placed so that its top is at the level of the first line of the paragraph. In the image you can see an example of a drop cap embedded in the text.

By the way, WordPress has a special plugin (wordpress.org/extend/plugins/drop-caps) that allows you to automatically create text embedded (and shifted down) capital letters. Amazing! However, what if you don't want to use a plugin (I'm sure you don't), and you just need to create a drop cap on multiple posts, and perhaps in a specific location?

The good news is that you don't need a plugin to create capital letters, all you need is a little css and a span tag. Open your css file and add the following code:

Span.dropcaps ( font-family:Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0.09em; position: relative; )

Something like this. Of course, you'll need a style that matches your design and text. For example, the property values: font-size , margins and line-height will need to be selected based on your design and text.

Tag Span

In order for the style to be applied to the capital letter of the text, you need to “wrap” the capital letter in a span tag and specify the appropriate class.

A

Pseudo-element:first-letter

You can also style the first character in the text using the pseudo-element: first-letter . However, a limited number of properties can be applied to the:first-letter pseudo-element: these are properties related to font, color, background, borders, margins, and padding. Another thing to note is that the pseudo-element:first-letter will not work in older browsers.

P:first-letter ( font-family:Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -right: 0.09em; position: relative; )

Here are actually a couple of methods for editing capital letters using CSS.

Often, in a hurry when adding materials to a site or, for example, creating a new topic on a forum, a user may start writing a sentence (title) with a small (lowercase) letter. This is to some extent a mistake.

I will show several options for solving this problem: PHP and CSS are more suitable for already published materials, when jQuery can correct the situation before publication.

First letter of a string in uppercase in PHP

In PHP there is a function called “ucfirst”, which just converts the first character of a line to uppercase, but its disadvantage is that it does not work quite correctly with Cyrillic.

To do this, we will write our own small function. The implementation would look like this:

In this version, we will receive a sentence that begins with a capital letter, which, in fact, is what we need.

Uppercase first letter of a string in CSS

This method visually (that is, the suggestions will appear as they are in the site's source code) also converts the first character to uppercase.

The usage is as follows:

first sentence

second sentence

third sentence

fourth sentence

#content p:first-letter ( text-transform: uppercase; )

Using the “first-letter” pseudo-element and the “text-transform” property, we set the design for each first letter of the paragraph.

First letter of a string in uppercase in jQuery

As I said earlier, this conversion method is best suited for materials that are yet to be published.

For example, we will take a text field (it will act as a field for entering a title) and write a small script for it, which, when entering a sentence with a lowercase letter, makes it capitalize it:

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text); )); ));

The script works both when writing text and when simply inserting it. Don't forget that for scripts to work on your site, you must have the jQuery library enabled.

CSS caps help break up the monotony of a generic design where the text looks 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 CSS class below.myinitialcapsi, the margin on the right is set to a negative value to reduce the distance between I and n.

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

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

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;)

“Including” 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.

notice 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?

But 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.

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

However, even after a forced line break, a letter is always created at the beginning of each new paragraph. You may be asking yourself: How do 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 or 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.

In html, font size plays an important role. It allows you to draw the user's attention to important information posted on the site page. Although not only the size of the letters is important, but also their color, thickness and even family.

Tags and attributes when working with html fonts

Hypertext language has a wide range of tools for working with fonts. After all, text formatting is the main task of html.

The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.

Let's look at the tags that are used to work with fonts in HTML and their attributes. The main one is the tag. Using the values ​​of its attributes, you can set several characteristics of the font:

• color – sets the text color;
• size – font size in conventional units.

Positive attribute values ​​from 1 to 7 are supported.

• face – used to set the text font family that will be used inside the . Several values ​​are supported, separated by commas.

Only the text that is located between the parts of the paired font tag is formatted. The rest of the text is displayed in the standard default font.

Also in html there are a number of paired tags that specify only one formatting rule. These include:

• — sets bold font in html. The action tag is similar to the previous one;
• — the size is larger than the default;
• — smaller font size;
• — italic text (italics). Similar tag ;
• — text with underlining;
• - crossed out;
• — display text only in lower case;
• - in upper case.

Plain text

Thumbnail

Thumbnail

More than usual

Less than usual

Italics

Italics

With underscore

Crossed out

Style attribute capabilities

In addition to the described tags, there are several more ways to change the font in html. One of them is to use the generic style attribute. Using the values ​​of its properties, you can set the display style of fonts:

1) font-family – the property sets the font family. It is possible to list multiple values.
Changing the font in html to the next value will happen if the previous family is not installed on the user's operating system.

Writing syntax:

font-family: font-name [, font-name[, ...]]

2) font-size – the size is set from 1 to 7. This is one of the main ways you can increase the font in HTML.
Writing syntax:

font-size: absolute size | relative size | meaning | interest | inherit

You can also set the font size:

• In pixels;
• In absolute value (xx-small, x-small, small, medium, large);
• In percentages;
• In points (pt).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

3) font-style – sets the font writing style. Syntax:

font-style: normal | italic | oblique | inherit

Values:

• normal – normal spelling;
• italic – italic;
• oblique – font slanted to the right;
• inherit – inherits the spelling of the parent element.

An example of how to change the font in html using this property:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

4) font-variant – converts all capital letters to capital letters. Syntax:

font-variant: normal | small-caps | inherit

An example of how to change the font in html with this property:

font-variant:inherit

font-variant:normal

font-variant:small-caps

5) font-weight – allows you to set the thickness of the text (saturation). Syntax:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Values:

• bold – sets the html font to bold;
• bolder – bolder relative to normal;
• lighter – less saturated relative to normal;
• normal – normal spelling;
• 100-900 – sets the font thickness in numerical equivalent.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

HTML font property and font color

Font is another container property. Inside itself, it combined the values ​​of several properties intended for changing fonts. font syntax:

font: font-size font-family | inherit

The value can also be set to the fonts used by the system in the labels on various controls:

• caption – for buttons;
• icon – for icons;
• menu - menu;
• message-box – for dialog boxes;
• small-caption – for small controls;
• status-bar – status bar font.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

To set the font color in HTML, you can use the color property. It allows you to set the color, either using a keyword or in rgb format. And also in hexadecimal code.

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.