- font-family
This determines which font a piece of text is displyed in e.g. Helvetica, Arial, Comic Sans MS, Times New Roman, etc. The following shows how this attribute can be used to effect several different html tags.
test2.css
h2 { font-family: times new roman }
p { font-family: arial }
strong { font-family: comic sans ms }
test2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test2.css" title="test2">
</head>
<body bgcolor=black text=white>
<h2>This is an h2 heading using the style sheet.</h2>
<p>This is a paragraph containing some <strong>bold text</strong>.
</body>
</html>
Even though the <strong></strong> text is part of the paragraph its own font-family overrides that of the paragraph. Any font can be used but because the font has to be installed on the viewers pc it is best to stick to the common ones that most people have.
More than one font can be specified for each tag e.g. p { font-family: symbol, comic sans ms, arial }. This means that if the browser cannot use the first font it tries the second etc. until it finds one that works or runs out of fonts and uses the browsers default.
- font-style
The default value for font-style is normal (except in <em> tags where the font-style is italic, but can be overriden) and the other possible values are italic and oblique. Here is an example of font-style in action:
test3.css
h2 { font-style: italic }
p { font-style: italic }
em { font-style: normal }
test2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test3.css" title="test3">
</head>
<body bgcolor=black text=white>
<h2>This is an h2 heading using the style sheet.</h2>
<p>This is a paragraph containing some <em>overridden italic text</em>.
</body>
</html>
- font-weight
The default value for font-weight is normal and there are several other possible values: bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 and 900.
<html>
<body bgcolor=black text=white>
<p style="font-weight: bold">This is a paragraph using bold.
<p>This is a plain paragraph.
</body>
</html>
- font-size
The default font-size is medium, relative to the browsers current font size. To change the font-size use a value in point size e.g. { font-size: 14pt }.
<html>
<body bgcolor=black text=white>
<p style="font-size: 14pt">This is a paragraph using 14pt.
<p style="font-size: 16pt">This is a paragraph using 16pt.
<p>This is a plain paragraph.
</body>
</html>
