CSS Tutorial Lesson 16: Font-Weight and Font-Style

In HTML, we use the tag or tag to create bold text and tag to create italicised text. In CSS, we use the font-weight property and font-style property to create bold text and italic text respectively.

16.1 Font-Weight

We use font-weight property to specify whether the text is normal or bold. The syntaxes are illustrated by the following examples

p{font-weight:normal;}

h3{font-weight: bold;}

By default,  text appears as normal without having to specify with the normal weight property’s value. However, in certain cases, you may want to specify a paragraph as bold but you want a section of the paragraph appears as normal text, as shown in the following example:

Example 16.1

CSS works together with HTML elements using a set of rules to control the look of a webpage such as background colour, font typeface, font-size, line spacing and more . The rule of CSS comprises two parts, the selector part and the declaration part. The selector is an HTML element and the declaration  specify rules to be adhered by the HTML element defined by the selector. The selector can define more than one HTML elements, separated by commas. You can also have more than one declarations, each separated by semicolons. A declaration consists of two parts, the property and its value.

The output

CSS works together with HTML elements using a set of rules to control the look of a webpage such as background colour, font typeface, font-size, line spacing and more . The rule of CSS comprises two parts, the selector part and the declaration part. The selector is an HTML element and the declaration specify rules to be adhered by the HTML element defined by the selector. The selector can define more than one HTML elements, separated by commas. You can also have more than one declarations, each separated by semicolons. A declaration consists of two parts, the property and its value.

 16.2 Font-Style

We use font-style property to specify whether the text is normal or italic.  The values are normal, italic and oblique. Though both italic and oblique produce slanted text, there is a slight difference between the two. Italic fonts are special fonts based on caligraphy whereas the oblique fonts are normal fonts slanted at an angle. The syntaxes are illustrated by the following examples:

p{font-style:normal;}

h1{font-style: italic;}

em{font-style: oblique}

It is difficult to see the difference between an italic text and an oblique text, as shown in the example below:

I am italic font

I am oblique font

The output

I am italic font

I am oblique font