CSS

Cascading Style Sheets

- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save a lot of work
- External Style Sheets are stored in .CSS files

CSS Syntax

selector { property:value; property:value; }

- The selector is normally the HTML element you want to style.
- Each declaration consists of a property and a value.
- The property is the style attribute you want to change. Each property has a value.

How to Use CSS

- An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the link tag. The link tag goes inside the head section of a HTML file

hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

- An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown above

CSS Examples

p {font-size:16px; color:red; font-family:helvetica;}

I'm red!

div {height:50px; width:100px; background-color:blue;}

h1 {font-size:36px; border:3px blue dashed;}

A Header

a {text-decoration:none; color:#666;} A Plain Link!