JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 16: Font-Style


In HTML, we use the <strong> tag or <b> tag to create bold text and <i> 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 the 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 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


<p style="font-weight: bold;">CSS works together with HTML elements using a set of rules to control the look of a webpage such as background color, font typeface, font size, line spacing and more. <span style="font-weight: normal;">The rule of CSS comprises two parts, the selector part and the declaration part. The selector is an HTML element and the declaration specifies rules to adhere to the HTML element defined by the selector. </span>The selector can define more than one HTML elements, separated by commas. You can also have more than one declaration, each separated by semicolons. A declaration consists of two parts, the property and its value.</p>
The output

CSS works together with HTML elements using a set of rules to control the look of a webpage such as background color, 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 specifies rules to adhere to 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 declaration, 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 calligraphy 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:

<p style="font-style: italic;">I am italic font</p>
<p style="font-style: oblique;">I am oblique font</p>
The output

I am italic font

I am oblique font


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy