Slide 7.13: CSS fonts (cont.)

CSS Font (Cont.)

Font Style
The font-style property is mostly used to specify italic text. This property has three values:

normal—The text is shown normally,
italic—The text is shown in italics, and
oblique—The text is “leaning” (oblique is very similar to italic).

For example,

   p.normal  { font-style:normal; }
   p.italic  { font-style:italic; }
   p.oblique { font-style:oblique; }

Font Size
The font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> – <h6> for headings and <p> for paragraphs. The font-size value can be

An absolute size:
- Sets the text to a specified size,
- Does not allow a user to change the text size in all browsers, and
- Absolute size is useful when the physical size of the output is known.
For example, “h1 {font-size:40px;}”.

A relative size:
- Sets the size relative to surrounding elements and
- Allows a user to change the text size in browsers.
For example, “h1 {font-size:100%;}”.

If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> body { font-size:100%; } h1 { font-size:2.5em; } h2 { font-size:1.875em; } p { font-size:0.875em; } </style> </head> <body bgcolor="#EDF3FE"> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>Specifying the font-size in percent and em displays the same size in all browsers, and allows all browsers to resize the text!</p> </body> </html>