Free HTML Tutorials   •   CSS   •   Popups tutorial   •   Frames Tutorials   •   Forms Tutorials   •   Beginners HTML Tutorials   • Advanced HTML Tutorials   • JavaScripts   • Free Web Page Tutorials   •   Free Downloads
OzWebLogo Advanced Section

CASCADING STYLE SHEETS 		 
 

External Style Sheets

As I said before, the great advantage of CSS is that allows you to set the style of your web site in one place. By using a style sheet you can change various elements on all your pages, without having to go painstakingly over each page separately. Another advantage is that the CSS is loaded with the first document, cached by the browser and referred to subsequently, making pages load faster.

First you use a META tag to tell the browser you are using CSS in the document:

  <META http-equiv="Content-Style-Type" content="text/css">.

When you create your style sheet, it will be just a text file saved with a .css extension.You will also need to refer or link to this style sheet with this line also in the HEAD section:

  <LINK rel="stylesheet" type="text/css" href="extras/style.css">

It doesn't matter what you call it or which folder it is in, as long as the link points to it and it is saved with the .css extension.

OK, now we've got that out of the way, let's look at an actual style sheet.


body {background-color:#FFFFFF;font:9pt arial,helvetica,sans-serif; color:#000000;margin-left:0px;margin-top:0px;margin-right:0px}
A:link, A:visited, A:active {text-decoration:underline;font:10pt arial,helvetica,sans-serif; color:#000000}
A:hover {text-decoration:none;font:10pt arial,helvetica,sans-serif;color:#FF0000}

td, th {font: 9pt arial,helvetica,sans-serif; color:#000000}

h1 {font:bold 18pt arial,verdana,helvetica,sans-serif;color:#FF0000}
h2 {font:bold 16pt verdana,arial,helvetica,sans-serif;color: #000000}
h3 {font:bold 14pt arial,helvetica,sans-serif;color: #000000;background-color:#000000}

ul {list-style:square}

.heading1 {font:12pt arial,verdana,helvetica,sans-serif;color:#006200}
.heading2 {font:bold 10pt arial,verdana,helvetica,sans-serif;color:#8B146D}
.menuon {text-decoration:none;font:bold 10pt arial,helvetica,sans-serif; color:#FF0000}
.small1 { font:8pt arial,helvetica,sans-serif;color: #000000}
.small2 { font:7pt arial,helvetica,sans-serif;color: #000000}



Looks a bit daunting at first glance, but let's take a closer look. First, note the BODY code. What does this mean? It means that when you start your page all you need for the <BODY> tag is <BODY>! Your background colour is pre-set as are font sizes and colours.

Next, all your links are taken care of. No need to add fonts, sizes or anything. If you use tables the same applies - the font, etc are matched to the body font. You are not limited to the standard headings (Hx) either; they can be customised to suit.

Now take a look at the last five items. Note the dot in front of each. These are Classes. To call them in your page you just add the "class" to an HTML tag like this:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<LINK REL="stylesheet" TYPE="text/css" HREF="extras/style.css">
</HEAD>
<BODY>

<SPAN CLASS="heading1">A bold heading using a SPAN tag </SPAN>
A big, bold heading
<BR>

<DIV CLASS="heading2">This is heading 2 with a DIV tag </DIV>
This is heading 2 with a DIV tag
<BR>
<SPAN CLASS="small1">This is small print within SPAN tags </SPAN>
This is small print within SPAN tags
<BR>

<BR>

<H1>Changing the size of the <H1> tag </H1>

Changing the size of the <H1> tag


</BODY>
</HTML>



In the example above I have used SPAN and DIV tags which are called "class selectors". You can also use <B> and <I> or <P>. SPAN and DIV don't actually do anything except act as carriers so are useful in this context.

One point to note, with <DIV>, which is a block tag, line breaks are automatically inserted (like <P> or <BR> tags), but with <SPAN>, no line breaks are inserted before or after.

Note the use of the <H1> tag. Usually this would be much larger but I have given it a rule in the External Style Sheet which says it must be this size and red. In fact it is now much smaller than the H2 & H3 tags. In the example External CSS above, you will also see ul {list-style:square} so all your lists will have a square instead of a black disc.

The Cascade

For those of you who have been wondering why they are called "Cascading Style Sheets", here is a brief explanation. The cascade refers to the order in which the browser handles the style code.

If you have an External Style Sheet specifying that all the <TH> tags will be in blue text, and an Internal Style Sheet saying it should be black, which takes precedence? Style sheets are designed to cascade, which means that they have inbuilt priorities for the rules they follow. In a nutshell, the cascade rules state that the specific will always override the general. So we have this:
  1. User Defined Style Settings (Browser settings)
  2. External Style Sheet
  3. Internal Style Sheets
  4. Inline Styles
  5. HTML tags - which override the preceding
This tutorial page is using an Internal Style Sheet, which sets the overall look - the list shown above overrides the style sheet it by using HTML tags to change the colour of the text. Of course, I could have set up a rule that says <OL> tags will be this colour. In that case all <OL> tags would be the colour I specified for them.

These examples have barely scratched the surface of what can be done with style sheets. I am currently working on a separate CSS tutorial, but in the meantime if you have any questions or would like more information, just email me using the HELP link.

Also check the Links on the Tips page for tutorial references if you would like to learn more.

On the next two pages is some important information you need to know to "future proof" your web pages



Next:  Deprecated Code

Advanced Index

Help
Copyright ©1998-2008 OzWebWeaver.