2. 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

3. Main page banner area Navigation bar area Main area for information content These areas have been marked to make them easier to see.

4. #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

5. 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; } #banner{ position: absolute; top: 0; left:0; height: 150px; width: 750px; } #navigation{ position: absolute; top: 155px; left:0; Height: 50px; Width: 750px; } #navigation{ position: absolute; top: 155px; left:0; Height: 50px; Width: 750px; } #main{ position: absolute; top: 210px; left:0; height: 400px; width: 750px; } #main{ position: absolute; top: 210px; left:0; height: 400px; width: 750px; }

6. #banner{ position: absolute; top: 0; left:0; height: 150px; 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

7. #banner{ position: absolute; top: 0; left:0; height: 150px; width: 750px; } #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 ;

8. color: rgb(220,160,190); background: rgb(0,0,0); font-size: 12pt; font-family: verdana; Changes the writing colour (note American spelling!) Changes the page colour Changes the font size Changes font style