Xentrik | CSS | Introduction to CSS

Introduction to CSS

CSS stands for Cascading Style Sheets, which is a relatively new way to control the way your webpages look. It is used as an extension to HTML. CSS works in Internet Explorer 3+ Netscape Navigator 4+ and Opera 3.5+ as well as a few other, less popular, browsers. But enough about that, here's how you use it.

This is what a CSS tag looks like:

selector {property:value; property:value; property:value}

Selector is the element you wish to define, usually an HTML tag. Property is the attribute that will be changed, and value is how the attribute will be changed. The property and value are surrounded by {}, and if there is more than one property, they are seperated by semicolons. Here is an example:

body {font-family:Arial; font-size:10pt; font-style:italic}

The above code is like saying <font face="Arial" size="2"><i> in HTML, except it applies to all text within the body tags.

There are a few ways to use CSS. The way it's used most often is to embed the CSS code into the head of a HTML page. It looks like this:

<head>
<style type="text/css"><!--

CSS tags and information go here

--></style>
</head>

Note the comment tags  surrounding the stylesheet attributes. These ensure that the attributes remain hidden from browsers not supporting style sheets.

Another way to use CSS is to create a seperate style sheet and link all your pages to it. To link to the style sheet, you would put this code between the <head></head> tags.

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

All you need to change here is href="style.css" by changing "style.css" to whatever your stylesheet is named. Be sure it ends with .css, or it won't work. The style sheet itself consists only of CSS tags, with no HTML or <style> tags.

It is best to use a linked style sheet when you want the same CSS to apply to more than one page. That way, when you wanted to change the look of your website all you would need to do is change the CSS file, and all the pages would change to suit.

The third way to use CSS is to inline it with certain tags, so that it doesn't affect the whole HTML page, just the tag you apply it to. Here is an example:

<font style="letter-spacing:5px; text-decoration:underline">

Now that you know how to use CSS, you'll want to know what you can do with it. A list of common CSS tags and properties can be found here.