CSS Tutorial

CSS tutorial

Page 2 of 3: External stylesheets

Linking stylesheets on your pages is regarded as the best way to apply formatting to all your pages, with just a single line in the head tag. To create an external file just open notepad or a text editor, type in the declarations and save it as styles.css (or a filename of your choice). With an external file you dont need to include the <style>..</style> opening and closing tags, as the link to the stylesheet will instruct the browser that it is a list of stylesheet declarations.

On the right hand side, in red, is an example of how to link your html page with your stylesheet. This particular stylesheet in the same place as the html file, on the root. If your stylesheet was in its own folder, called styles for example, you would need to change the HREF to styles/styles.css. If your stylesheet is up one level from the html file, you need to change the HREF to ../styles.css. This is important to do otherwise the stylesheet will not be found and the page will render without any of your declarations.

Link to external StyleSheet:

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

External stylesheet file content:

HTML TAG {
  attribute: value;
  attribute: value
  }
.classname {
  attribute: value;
  attribute: value
  }
#id {
  attribute: value;
  attribute: value
  }

The illustration above shows how a css file is structured. As you can see, no HTML tags are neededas such - just the element name. The semi-colon indicates the end of a declaration and also that there are more declarations to come. At the end of a given block of code, the last declaration will not have a semi-colon.

The way a stylesheet is laid out is: The html element name then an opening bracket, then the attribute followed by a colon, and the value of that attribute, followed by a semi-colon.

When all attributes and values have been set for that HTML element, it can be closed with the closing bracket }. For further HTML elements, place underneath and include as many as is necessary.

Go to: Next page >>> | Home | Top

Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

Partners

Advertise here!

Ads

Reseller Web Hosting