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.
- CSS is an acronym for Cascading Style Sheets
- CSS uses rules, called styles to produce the visual appearance of a page. Such as colors, fonts, size, margins, borders etc..
- The use of CSS allows for the separation of the documents structure from its visual look.
- Some benefits of using CSS:
- The reduction of tag replication
- Reducing the number of attributes
- Keeps the HTML code looking neat, clean and compact. Making for faster download time and easier maintenance
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.
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
To produce
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
is the selector.- Place the declaration within the curly brackets { }
color:blue
is the declaration- Declarations come in pairs, property / value.
color
is the property.blue
is the value.- Use a semi-colon ; to terminate the declaration.
Example
To make the font bold write:
Example
Since both descriptions pertain to the same selector (tag), we can combine them:
To get the style to work we place the code in between style
tags and nest this within the head
tag.
Example
See source code for: defliststyle.html