In this lesson we will learn a few settings related to texts. These are mostly the paragraph settings known from text editors, and can be used in every tag containing text. We use the indentation of the first line of text block, we add distance between the lines and align texts. We will use selectors related to links, to format links in different states.
text-indent – we can indent he marked text`s first line with a given value. The measurement to the value can be percentage (%), cm, pixel (px) or points (pt).
line-height – with this CSS property we can set the distance between two rows of the text meant for formatting. The measurement to the value can be percentage (%), cm, pixel (px) or points (pt).
text-align – we can align the text marked for formatting between the two margins of the browser. The possible values are: center, left, right, justify (aligned two both margins, evenly distributed).
text-transform – the text can be transformed to uppercase, lowercase or each word can be capitalized with this property. Possible values: uppercase, lowercase, capitalize.
text-decoration – we can add line below, above or through the text. Possible values: overline, line-through, underline. More of these settings can be used at once, we can set the type of the line too.
:link – this selector can be used to mark the settings to the original state, the links not yet visited.
:visited – using this selector, we can add different formats to the links referring to pages already visited.
:hover – this selector can be applied not only to links. We use it, to format separately the links when we move the cursor over them in the browser window.
:active – this selector can be applied not only to links. The settings take effect when we click on the link / when we are about to activate it.
Example for classical text formattings:
In the example above, the header is aligned to the center of the page and it is underlined.
We use double line height and 1 cm indentations on the first lines for the paragraphs.
Example for links:
In the example above, there is a different color set for every selector we listed. The Learn HTML! link refers to a page that was already visited. The Learn CSS! link is dark red, because the cursor is over it.
On the picture above the text Learn HTML! is an active link (the mouse button is down over it), that is why it has a background. The Learn CSS! link has a light color, the color set for links not yet visited (this is the color given to the :link selector)
<p style="text-transform: capitalize;"> some tEXT</p>
h1 {
text-decoration: underline;
}
h1:hover{
text-decoration: overline;
}
https://www.w3schools.com/css/css_text.asp,
https://www.w3schools.com/css/css_link.asp,
https://www.w3schools.com/cssref/css3_pr_text-decoration-style.asp,
https://www.w3schools.com/cssref/css_units.asp.
