Good day, geeks of site building. In today's publication, we will consider a topic related to the design of text content. That is why you will learn how to set capital letters in css - by means, get acquainted with several options for creating a drop cap and, of course, you can try everything out in practice. Now let's get down to the fun part!
Let's transform the text
With cascading style sheets, you can change both the first character of a block and all of the text. I'll show you how you can do both. Moreover, all the tools named in this article are supported in three levels of the language: css1, css2, css2.1 and css3.
I'll start with an interesting property that modifies all of the text content in the selection. it text-transform.
The named element can convert characters to uppercase, lowercase, and also capitalize every first character of a word. I wrote more about the values in the table.
Now, to consolidate the theoretical material, take an example.
Attention!
! Tomorrow there is a discount on all beauty products!
The promotion is valid in all branches located in your city.
Create a drop cap
If you do not know what the term "drop cap" means, then this is the time to find out, as it is directly related to the current topic.
The drop cap (or sometimes 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 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 a character is highlighted with a markup language tag and after that, 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 the problem, you can use a tool such as.
So, in this case: first-letter is used. Like all pseudo-elements, it is assigned to the selector, separated by colons. Then, according to all the rules of style sheets, properties are specified. However, you can only apply properties related to editing fonts, padding, color, background, margins, and borders.
I propose to consider a specific example. While 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 a transparent font color and filling the letter with the selected image.
This paragraph contains a sentence with very interesting content.
Let's continue an interesting story in the next paragraph.
The result looks very attractive and unusual, which is the perfect solution for.
As you can see, this topic is very simple. You can safely use the code given by me for your web resources, modifying and adjusting to your style.
If the presented material was useful to you, then subscribe to updates on my blog and do not forget to share the knowledge gained (and of course a link to my blog) with your friends. Good luck!
Bye Bye!
Best regards, Roman Chueshov
A capital letter, according to the definition, is an element of text that is increased in size relative to In almost all languages, a sentence begins with a capital letter. And the design of the beginning of the paragraph with a prominent capital letter allows you to structure the text and makes it easier to read. When a web page is being drawn up, the text can be written in accordance with the preferences of the author and the rules of the Russian language. Also, its design can be "automated" by entering certain "commands" into the file with the css extension - a style sheet - or supplement your html file with a style section. CSS is usually studied additionally with html in order to quickly change some design elements in the entire text at once.
This is especially true if the site has hundreds of pages, and making changes to each of them is a very time-consuming 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 the text, decorated with the "p" tag, to make the uppercase letter - first letter - larger - 220% of the standard size, yellow - the color value is yellow, and write it in font, different from the rest of the text - Georgia versus batangche.
(<) style(>)
p: first-letter (font-family: Georgia; font-size: 220%; color: yellow;)
(<)/style(>)
You can get beautiful capital letters if you create your own font in the form of pictures - for each letter 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 (<) img src=”ссылка на место, где лежит картинка”(>). Additional attributes will be heigh and width - the width and height of the image, which can be set in pixels to blend harmoniously with the rest of the text. Example: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Parentheses around< и >we remove.
If you do not have the opportunity to draw the alphabet yourself, then the capital letter can be formatted using fonts freely available on Google (section Fonts) or other search engines and resources. To do this, the above code must be formatted as follows:
(<) style(>)
p (font-family: batangche; font-size: 93%;)
p: first-letter (font-family: Kelly + Slab; font-size: 220%; color: blue;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
The Google service allows you to choose one or the other and provides ready-made links for insertion into html or css. We draw your attention to the fact that it is necessary to select a group of fonts - Latin or Cyrillic, because almost all Latin fonts do not work for Russian-language text. At the moment, the search engine provides about 40 types for free.
A capital letter or its uppercase counterpart can be styled using the CSS text transform property. If you set the text transform: none value in the style sheet, then the text will look as you write it. To convert all letters to lowercase, set the text transform: lowercase value separated by a colon, and uppercase for uppercase. Setting the property to text transform: capitalize will make it so that there is a capital letter at the beginning of each word.
Allows you to change the case of the letters of the text.
By default, the 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 upper and lower case, respectively. If you specify a capitalize value, then only the first characters of each word will be capitalized. Inherit inherits the value from the parent.
Example
h3 (text-transform: uppercase;) .lowercase (text-transform: lowercase;) .capitalize (text-transform: capitalize;)This is the title. It has a text-transform property set to uppercase. All characters will be uppercase.
The Text-transform Property has been applied to this paragraph with a Lowercase Value, which means all letters will be in lowercase.
And this last paragraph has a text-transform property with a CAPITALIZE property applied. The first letters of each word will be uppercase, and only that.