Working with Cascading Style Sheets

Using External Files

CSS can be placed on the element, in each page, or in an external style sheet. Using an External Style Sheet has several benefits:

• It can be cached by the browser so subsequent pages viewed, load faster
• It makes it easier to consistently style a whole site using the same style
• Updates to a site's look and feel can occur easier

link in an external file as such

<link href="styles.css" rel="stylesheet" type="text/css" />

Creating CSS Rules

CSS can specify how a tag will look. So you can redefine any tag which you like, for example an h1 tag.

h1 {
	color: red;
	font-size: 36px;
}

You can also specify a tag within another tag, a descendant selector:

#header h1 { }

Custom Selectors

A class can be applied to multiple tags in a page, and is custom defined, allowing finer selection as to which tags get the style.

Classes start with a "." (period)

How to apply a class...

Div Tags

Div tags are to show a division (section) of a page, to group and style select content. They are very important for layout.

class and id selectors can be applied to the div tags for styling purposes

Floats

Floating an element, like an image, takes it out of the flow layout into its own layout.