brugbart.com - Edition/Last Updated: 13. October 2008

// References / An Introduction to CSS

Posted The: 17/03/2008 - AT: 19:41

Edited The: 29/06/2008 - AT: 20:44

Most attributes in older version's of HTML has been deprecated and replaced by CSS equlivants. Whether you are new to HTML, or you got old-time experiance, CSS is easy to learn, and even easier to use then all the old atributes.

Inline Styles

You can write the properties as inline using the "style" attribute.

For instance, common usage of an old attribute like "border", would be to remove the border on image-links, like below:

<p><a href="about.html"><img src="MyImage.jpg" alt="" style="border:0;"></a></p>

Noticed how i added the "border:0;" specification? Thats usually not the best way to do it, nor the easiest way in the long run!

Embedded Styles.

If you got many images, you would need to apply these styles to each of them. A much easier way, would be to include the styles in the head section of our document, and simply apply them to all img elements inside a elements, in one declaration, see below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>My first Website</title>
    <style type="text/css">
    a img {
     border: 0;
    }
    </style>
  </head>

  <body>
    <p>My first Website.</p>
    <p><a href="about.html"><img src="MyImage.jpg" alt="" ></a></p>
  </body>

</html>

Noticed how i declared the styles for "img" elements? The result is that, all images on the page will have the given style applied to them. Unless we specificly declare a diffrent style, either through classes or ids.

This method also has the advantage, that load times for your documents are Decreased. Not only from the less styling otherwhise required by using deprecated attributes, or inline CSS. But also by lowering the http-requests needed to load external StyleSheets.

External StyleSheets

There are several ways to include External StyleSheets, off hand i'm going to mention the 2 i know of. The first:

<style type="text/css">
  @import url("StyleSheet.css");
</style>

Include the above in the head section of your document, then create a file called "StyleSheet.css", and place it in the same directory. The Content of your stylesheet would be:

img {
  border: 0;
}

The next way dosn't require the style tag, but instad add the following to your head section:

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

Ofcause there are many more specifications then "border", you can use. So i suggest beginners follow the HTML/CSS tutorials; allready experianced html coders should use the referance, and follow the related tutorials if in doupt.