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.
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.
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.
- 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.
CSS settings:
https://www.w3schools.com/css/css_font.asp;
https://www.w3schools.com/cssref/sel_class.asp.
