Capital letter in html and css

The capital letter, in accordance with the definition, is an element of text that is increased in size relative to lowercase letters. Almost all languages start with a capital letter. And the design of the beginning of a paragraph with an uppercase letter allows you to structure the text and make it easier to perceive. When a web page is made out, 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" in a file with the extension css - style sheet - or adding your html file to the style section. CSS is usually studied additionally with html to quickly change some design elements at once in the entire text. 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 use css, the capital letters at the beginning of each paragraph can look special. For example, the code below, introduced in html without parentheses, allows for the text formatted with the "p" tag to make the initial letter - first letter - larger - 220% of the standard size, yellow - the color value is yellow, and write it in the font, Different from the rest of the text - Georgia vs batangche.

(<) Style (>)

P {font-family: batangche; Font-size: 93%;}

P: first-letter {font-family: Georgia; Font-size: 220%; Color: yellow;}

(<) / Style (>)

Beautiful capital letters can be obtained 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 a graphics editor. Then in the required places you can insert the code without the parentheses in the required place (<) img src = http: // site / article / 74218 /% E2% 80% 9D% D1% 81% D1% 81% D1% 8B% D0 % BB% D0% BA% D0% B0 to the place where the picture lies "(>). Additional attributes of the Img tag are 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: (<) img src = http: // site / article / 74218 /% E2% 80% 9D% D1% 81% D1% 81% D1% 8B% D0% BB% D0% BA% D0% B0 in place , Where the picture lies "heigh = 12 px width = 6px (>). We remove the parentheses around .

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

(<) Style (>)

P {font-family: batangche; Font-size: 93%;}

P: first-letter {font-family: Kelly + Slab; Font-size: 220%; Color: blue;}

(<) / Style (>)

And in the "head" tag, add a link without the parentheses for the "connection", where after the family the selected font family is specified, substituted, in addition, also in p: first-letter.

(<) Link href = 'http: //fonts.googleapis.com/css? Family = Kelly + Slab & subset = latin, cyrillic' rel = 'stylesheet' type = 'text / css' (>).

Service "Google" allows you to select a particular type of font and provides ready-made links for insertion into html or css. We draw your attention to the fact that you must select the font group - Latin or Cyrillic, since Almost all Latin fonts do not work when creating a Russian text. At the moment, the search engine provides about 40 types of Russian fonts on a free basis.

The capital letter or its capital antipode can be decorated using the CSS text transform property. If you set text transform: none in the style sheet, the text will look like the one you write it. To translate all the letters to the lowercase, you need to set the value text transform: lowercase through the colon, and uppercase for the upper case. Setting the text transform property to property: capitalize will make sure that at the beginning of each word there is an uppercase letter.