Lessons menu
CSS - intermediate - Lesson nr. 4
Formatting texts and links
What this lesson is about?

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.


New CSS properties in this lesson:

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.


New CSS selectors in this lesson:

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

1. In the style.css file add settings to the paragraphs: an indentation for the first lines of 50px, the distance between the lines should be 150% and the alignment justified.
View the result
2. Add the following settings to every cell in the tables of the webpage: font size of 17px, alignment to the right, the line height should be 130%. Use the style.css.
View the result
3. Apply a 150% line height to every list (ordered or unordered) on the webpage. Use the style.css.
View the result
4. Apply changes to the links: use different colors for links visited and the ones not yet visited. They should change color when the cursor is over them and when we click on them. The underlining should disappear, when the cursor is over them.
View the result
1. Which value cannot belong to the text-align property?
2. As a result of the following HTML/CSS statements, how does the text appear?
<p style="text-transform: capitalize;"> some tEXT</p>
3. What does happen, if we apply the following settings to the headers of a webpage?
h1 {
          text-decoration: underline;
          text-decoration: overline;
4. Which selector do we need, if we want to show the links referring to sites we already opened with a different color?
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept