External CSS Stylesheets

External Styles How does it work-html How does it work-css Closing comment

External style sheets

External Style sheets are used in the same way and are similar to embedded styles, with the exception that the styles are located externally, ie; in another file altogether. This website uses an external style sheet to create all of the images and different styles you can see.
External style sheets are saved with the ".css" extension and should be located within your website folder somewhere in order for you to link it to any relevant pages. The html page which you create links to this external style sheet with a line of code that tells the html document to "look here", for relevant styles etc.

Style sheets are great for many reasons, the main reason being that the creation of a style sheet means you can essentially seperate content from design. The design and styling obviously going into your external style sheet, and the main content stays in your HTML document.

How does it work :: The HTML

External styles work much like embedded styles. I have kept things simple in the html example below, to explain the point:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External CSS Stylesheets</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

So as you can see above, we have the common HTML mark-up to begin with. We have the document type declaration starting at the top. Followed by the head start tag. We then have our meta description thereafter, followed by the title start/end tags.
Now below our title tags is the LINK for our external style sheet. The document name in the above example would have been saved as "stylesheet.css". You place this link in every html page you would like your external styles to be applied to.

How does it work :: The CSS

So you have your html above up and running, ready to have some styles applied to it. CSS is not a complex machine code, however it takes some getting used to. Below i have included a simple example to demonstrate the point:

/*This is my style-sheet*/

body{font-family:arial;font-size:1em;color:black;background-color:grey;}
h2{font-size:2em;color:grey}

The external style-sheet does not need any type of fancy declaration like HTML documents. Instead it is advisable to simply state what the document is as i have done using css comment tags.
Looking at the css code written above, you can see that anything within the <body> tag will have properties as suggested within the two curly braces, ie: black text the background colour will be grey and so on.
The same can be said for the <h2> tag, where once you place this tag in your html document for example <h2>This is my heading</h2>, this text will display with a font size of 2em, with a grey colour.

Closing Comment

CSS external style-sheets are the way forward for web developers and should be used by any one that is seriously looking at desgining/developing websites. It allows the user to specifically seperate design from content, leaving a more clutter-free html document and a better formed approach to designing your website.
The obvious advantages of using an external style-sheet are that you no longer have to edit every single page in your website because for example you would like all of the <h2> text to look different to what they are at present. You simply edit the style-sheet's h2 element and its properties, and because all of you HTML documents are linked to the style-sheet, ALL of the h2 tags will have changed accordingly.