Making capital letters CSS styles using pseudo elements. Creating Capital Letters Using CSS HTML Letters: Capitals and Caps

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.

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.

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.

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.

A capital letter, according to the definition, is an element of text that is increased in size relatively. In almost all languages, a sentence begins with a capital letter. And designing the beginning of a paragraph with a prominent capital letter allows you to structure the text and makes it easier to perceive. When an Internet page is designed, the text can be written in accordance with the preferences of the author and the rules of the Russian language. You can also “automate” its design by entering certain “commands” into a file with a css extension - a style sheet - or adding a style section to your html file. CSS is usually studied in addition to html in order to quickly change some design elements throughout the text at once.

This is especially true if the site has hundreds of pages, and making changes to each of them is a very labor-intensive process.

If you apply css, the capital letters at the beginning of each paragraph can look special. For example, the code below, entered in html without parentheses, allows for text formatted with the “p” tag to make the capital letter - first letter - larger - 220% of the standard size, yellow - the color value is yellow, and write it in a font different from the rest of the text - Georgia vs. batangche.

()

p: first-letter (font-family: Georgia; font-size:220%; color: yellow;)

()

You can get beautiful capital letters by creating your own font in the form of pictures - for each letter there is a separate picture, for example, in the Old Russian or Gothic style. They can be drawn in Then, in the required places, in place of the capital letter, you can insert the code without parentheses (). Additional attributes will be heigh and width - the width and height of the image, which can be set in pixels for a harmonious combination with the rest of the text. Example: (). Parentheses around< и >we remove.

If you do not have the opportunity to draw the alphabet yourself, then the capital letter can be designed using fonts that are freely available on Google (Fonts section) or other search engines and resources. To do this, the above code needs to be formatted as follows:

()

p (font-family: batangche; font-size:93%;)

p: first-letter (font-family: Kelly+Slab; font-size:220%; color: blue;)

()

().

The Google service allows you to choose one or the other and provides ready-made links for inserting into html or css. We draw your attention to the fact that it is necessary to select a font group - Latin or Cyrillic, because... Almost all Latin fonts do not work when formatting Russian-language text. At the moment, the search engine provides about 40 types free of charge.

A capital letter or its capital antipode can be styled using the CSS text transform property. If you set the value text transform: none in the style sheet, then the text will look the way you write it. To convert all letters to lowercase, you need to set the value text transform: lowercase, separated by a colon, and for uppercase - uppercase. Setting the property to text transform: capitalize will make it so that every word has a capital letter at the beginning.

or in detail about letters and HTML CSS formatting

The chapter contains examples of formatting letters from the Hypertext Markup area.

In the menu on the left you will find modern and very detailed HTML tutorials.

They will allow you to create your website from scratch, but for now, look a little lower.

This might be interesting.

The Age of the Information Society

Humanity has entered a new period of its development, in which information and network technologies play an extremely important role. We live in the era of the information society, which is characterized by the rapid development of information and telecommunication technologies. With the advent of the computer and the Internet, tremendous changes began. The computer and the Internet are pushing society to develop new norms of behavior, rules and ideals. The Internet is for the new generation what television was for the previous one. But the Global Network is much more functional than television, because it provides the opportunity to make purchases, sales, offers communication and various ways of self-expression, such as the creation of personal Internet pages and websites.

HTML letters: capital letters

Letter formatting example:

Formatting result:

Example of free text written in capital letters

Tags - define capital letters(these tags are not supported in HTML 5).

CSS code style="text-transform:uppercase" - defines capital letters.

In other words, capitalization is defined using CSS attributes.

HTML letters and CSS spacing between them

Letter formatting example:

Formatting result:

Custom HTML text and CSS 2 pixel spacing between letters

Description of attributes and values: