Lessons menu
CSS - intermediate - Lesson nr. 3
Formatting fonts and using classes
What this lesson is about?

In this lesson we will do some basic font formatting. We will learn to set font type, size, bold, italic and small caps styles. We learn about CSS classes, somewhat similar to identifiers.


New HTML attribute in this lesson:

class – in a CSS file more settings can be grouped with a name. The name must be preceded by a point. This setting can be used for more than one HTML tag. We only need to add the class property to the tag and the name of the formatting group from the CSS file.


New CSS properties in this lesson:

font-family – we use this property to add font type to a text. We can list more than one, if one of them is not recognized by the browser, it will try using the next one, and so on.
font-size – this property is for setting a the size of a text.
font-style – we can set the style of font with this property. Values can be: normal or italic.
font-weight – we can add bold fonts with this property. Values can be: normal or bold or even a number, expressing how bold the font should be.
font – with this property we can set all the properties above at once, which is called shorthand
font-variant – we can set small caps fonts with this property. Small caps settings means, setting all fonts to uppercase, but the ones originally in uppercase are shown in bigger size. Possible value: small-caps.

Example for font formatting:

In the example above the basic settings are: Book Antiqua fonts, with 12pt size, italic. The headers font remains Book Antiqua (we don’t need to set it again, as the header is between the body tags), the size is 20, bold, small caps (the B get bigger and every other letter is converted to uppercase). The italic fonts must be changed, if we do not want to use it in the header, that is why we set the normal value to the font-style property.

From the h1 header settings the size and weight can be contracted to one font setting:
font { 20px, bold; }

How do we use the class property?

In the example above, the settings we want to apply to second level headers (h2 tag) are grouped under the name header. In the CSS file with the point before the header we mark, that we will use these settings as a value for class property for more HTML tags.

Differences between class and id:
  • In one HTML file we do not use the same id more than once, but we can use the same class as many times for as many different HTML tags as we need.
  • To one HTML tag we can add only one id, but more classes. We only need to add one class property and list the classes separated by spaces.
1. Set the basic font for your webpage to Calibri, 18px size. Apply these settings to the body tag.
View the result
2. Create a CSS class with the name ff containing the following settings: Arial font, 14px size and bold and apply this class to the caption of the picture in the index.html.
View the result
3. Set the h1 tags to 24px size, font variant to small caps and the h2 tags to 20px size.
View the result
4. In the toplangs.html file, add classes to each even table rows, called row, then apply settings in the styles.css file for that specific class, giving it a bold font and a background color.
View the result
1. Which setting is wrong?
2. How can we name a CSS class named imp in a CSS file?
3. In the case of the codes above which statement is true?
CSS settings:
.fc {color: red;}
.fi {font-style: italic;}
HTML code:
<p class="fc fi">Some text</p>
4. If we plan to apply the same CSS settings for one HTML file’s header cells and second level headers…
Supplementary information
You can read about links and you can exercise visiting the following links:
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept