Style Sheet Basics

Main page banner area

Navigation bar area

Main area for information

content

Look at a simple page from the Waitrose supermarket site. It has three main areas

Main page banner area

Navigation bar area

Main area for information

content

These areas have been marked to make them easier to see.

#banner

#navigation

#main

A style sheet at its basic level sets out which areas of the page are used for specific purposes. Each area has a name e.g. #navigation

A special language is used to tell the web browser how to set out the pages. It looks a bit complicated!

#banner{position: absolute;top: 0; left:0;height: 150px;width: 750px;}

#navigation{position: absolute;top: 155px; left:0;Height: 50px;Width: 750px;}

#main{position: absolute;top: 210px; left:0;height: 400px;width: 750px;}

#banner{position: absolute;top: 0; left:0;height: 150px;width: 750px;}

position:absolute

Means all measurements start at the top left of the screen

Top:0;

Means the top of the area is 0 pixels from the top of the screen

Left:0;

Means the box starts on the left hand side of the screen 0 pixels in

Height: 150px

Means the box being positioned is 150 pixels high

width: 750px

Means the box being positioned is 750pixels wide

#banner{position: absolute;top: 0; left:0;height: 150px;width: 750px;}

This is called a style sheet rule. It tells the web browser the shape and position of a piece of the web page. In this case the banner

Rules are applied to selected parts of the page

Rules are made up of 1 or more declarations

height: 150px;PROPERTY SEMI-COLON

COLON VALUE

SELECTOR

A declaration is made up of four parts: a property and a value separated by : and finishes with ;

color: rgb(220,160,190);

background: rgb(0,0,0);

font-size: 12pt;font-family: verdana;

Common DeclarationsChanges the writing colour (note American spelling!)

Changes the page colour

Changes the font size

Changes font style