Stylesheet and colours

Style sheet

There are three places to put styles.  This is the most effective one but you will learn the others soon.  A style sheet is a collection of styles which the browser will use to make the Web page look different.  Styles can include colours, sizes and position.  This style sheet is just a file with text in it.

Open your text editor.  Create and save the blank file as default.css (make sure that in your editor it says All files or CSS in the drop down if you have one).

Put this in the new file:

div {

}

This is the basic structure for all CSS.  The div line tells the browser what part of the HTML you are about to style (all div elements).  The curly brackets (braces is the proper name) are a container.  Inside them will go all the styles (or settings) for all div elements.

Inside the braces put this on the blank line:

background-color:yellow;

Save this file and open your second Web page (music.html) in a browser but don't expect colours yet.  It should still look exactly the same and here is why...

Linking to the style sheet

Open music.html in Notepad.  Just above the title line add a new blank line.  On that line paste this:

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

This links the new style sheet to your Web page.  The browser reads through the HTML page and sees this new line which tells it where to look for the style settings.  You don’t need to understand that line but if you look through it you might (it is explained later but have a go now).

Save music.html and refresh it in your browser.  The background of the div elements which contain the images should all go yellow.  The yellow should be a band across the page.  If not you will need to check the styles and the link line for errors.