External Styles

Embedded styles are useful but if you want to style a whole site it is easier to have an external file with styles in it which apply to all pages.  You did this in the introductory tutorial but here it is in more detail.

The external style sheet file

Create a new file in your editor and save it as myfirststyles.css making sure it saves as a style sheet not a text file. Now put this into it and save:

@charset "UTF-8";
body {
p {

The first line tells the browser what language you are using in the style sheet.  Most of the time it will work without this but just include it in every style sheet to be sure.

The other six lines make up two rule sets as you saw in your embedded style sheet.  Each has just one rule.

The styles in the page

Now open embedded.html and save it as external.html.  Save & view but you may realise nothing should change.

You also need to tell the Web browser where to look for the styles when it loads your Web page.  Put this at the inside your head element in external.html before the existing style element (just under the title line):

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

This creates a link to the style sheet as you learned before.

Save both files (HTML and CSS) and try but again there should still be no change.  Here is why...

Cascading part 3

The styles in the external style sheet are loaded but are then overridden by the embedded styles which appear underneath the link element.

Move the link element below the style element.  Save and view and you should see black and white.  Now the embedded styles are loaded first so the external ones win.  If this sounds confusing there is an easy solution.  Just use one external style sheet and no embedded or inline styles.  However, later you will find it easier to understand if you keep practising.

Why use external styles?

An external style sheet is good because you are separating your HTML and your CSS.  You can edit each one separately without getting confused by the mix of HTML and CSS (which do things very differently).  It also allows you to style many (or all) pages on a site in one go.  If you keep all your styles in the external style sheet you know where they are and can find them easily.  No hunting through the HTML pages.

It might be slightly harder and more complicated to set up external styles (you have to have two things open at once and set up the link element) but in general it is the best way.

Template part 3The first half of the css template contents

You should already have an HTML template with a link element pointing to a style sheet.

Open myfirsstyles.css and save it as _template.css.  Delete the attribute/value pairs but leave the empty rule sets for you to use later (the body {} and p {}).  Add more selectors and braces to make empty rule sets for other common HTML tags you have used so far:

It should look like the screen shot when you are done.

Save _template.css.  You may not use all of those all the time but they will be there to remind you when you need them.  Now you are ready to try a lot more styles.