Prepared by: Anthony Larrain


Introduction

HTML was intended to be used as a structural language. That is, which elements are headings, paragraphs, links, lists etc.. As browsers competed with each other, presentational tags and attributes were added to the language so web designers could change the look and layout of a page. This added some complexity to the design and maintenance of websites. CSS tries to reduce these complexities.

Consider deflistcolor.html, to change the color of the term being defined the font tag is nested within a dt tag. Furthermore, to get the term bold the strong tag is nested within the font tag. Then we had to do this for each of the terms.

<dt><font color="blue"><strong>Grok</strong></font></dt>

We see even in this simple example we have quite a few tags. With CSS we can define a rule for the dt tag, such that whenever we use the dt tag the text will appear blue and bold.

Example

We would like this code

<dt>Grok</dt>

To produce

Grok

Defining Styles

Each rule is made up of a selector, an HTML element such as dt, body, p, h1, li etc.., and declarations, that determine how the selected element will be displayed.

Example

to make the <dt> tag appear blue write:

dt { color:blue; }

Example

To make the font bold write:

dt { font-weight:bold; }

Example

Since both descriptions pertain to the same selector (tag), we can combine them:

dt { color:blue; font-weight:bold; }

To get the style to work we place the code in between style tags and nest this within the head tag.

Example

<head> <title>Word of the Day</title> <style> dt{ font-weight:bold; color:blue; } </style> </head>

See source code for: defliststyle.html

@Anthony Larrain 2005 - 2006

Send Questions or Comments to hci201@yahoo.com