The Basics of CSS

Cascading Style Sheets is a fairly simple language to get into. I have written this article to get you started in writing it. I wrote a previous article introducing cascading style sheets. This article will run through some simple examples, then explain the technical terms. This will hopefully lead onto some more articles that will fill in the details.

Where to Put it...

It is simple to add CSS to your pages. There are several locations that you can store your CSS code, within the HTML page and within external files. The most simple of these is where the CSS code is placed in the head of the document in between the <STYLE> tags.

The <STYLE> element has a 'TYPE' attribute. This is set to "text/css". This is just to let the browser know that the code is in the CSS language. This attribute is not required but it is a good idea to put it in to make sure the browser understands what you are doing. I have marked where the CSS code is inserted using CSS comments: Comments are not read by the browser. CSS comments are enclosed by the /* and */ markers:

/* Comment in here */

It is a good idea to comment your CSS so that you can keep track of the style changes you have made.

Changing Your Styles

CSS applies a set style to an element, for example changing the background colour around an element. There are several ways that you can refer to an element to change. As you may know from your HTML experience there are HTML tags, such as <P> for paragraphs, HTML 4 also says that they can have a 'CLASS' attribute, or an 'ID' for JavaScript interaction:

<P CLASS="theClassName" ID="theID"> the paragraph </P>

You can then refer and apply styles to:

Elements based on what tag they are e.g. All <P>, paragraphs, or <A>, links take a certain style.
Elements based on a class that they take e.g. every element on the page with the CLASS set to "firstclass"
Elements based on an ID that they take. e.g. all elements with the ID set to "theElement"

These ways of refering to the elements are known as selectors. A selector is to identify which elements on the page take the set styles. In the examples below I am just going to use the selectors that will apply styles to elements based on their HTML tags. A selector can have its style properties changed for example you can change the style of all <P>, paragraphs, tags to have a green font-colour and a golden background:

<STYLE>
P {
color:green;
background:gold;
}
</STYLE>

The above code example has the following. The selector is the P, paragraph element in HTML. The properties of the P element, color and background are being changed. All CSS definitions take the form of the above definition. The selector comes first, then contained within braces are the properites and values. Each of the properties takes the following form:

property:value;
proprty2:value2;

Each of the properties if folowed by a colon, then the value it takes, folowed by a semi-colon. I have set out the code in an easy-to-read way that you should try and follow. This makes it easier to see what styles you have applied to your documents.

Further Examples

As requested here are some more examples of applying CSS to HTML elements.

<STYLE TYPE="text/css">
BODY {
font-family: Verdana, Arial;
background:blue;
}
</STYLE>

This simply took the <BODY> element, that contains the page, changed the default font to Verdana, and as in HTML is Verdana is not available then it used Arial. I also set the default background to blue.

<STYLE TYPE="text/css">
A {
color:green;
font-weight:bold;
}
</STYLE>

This changes the style for <A>, link, tags. It sets the font colour to green and the font-weight to bold.

From Here...

In this article so far I have shown you the basic structure that CSS definitions take. I am writing more articles to go into more detail about the selectors, properties, ways of inserting, and other features you can use in CSS.

You can add a small logo/button to your web pages to demonstrate your support for CSS:

In most browsers you can right click on the image with your mouse and save the image to your hard-disk. Read up on the styles and properties that you can use.

CSS Tutorial: Next Article - Inserting CSS into Your Documents; Previous Article - Introduction to CSS

Related Information:

Comprehensive Guide to CSS - External
http://www.htmlhelp.com/reference/css/

Effective Use of Style Sheets - External
http://www.useit.com/alertbox/9707a.html

Irt.org CSS Articles - External
http://www.irt.org/articles/css.htm

Webmonkey CSS Articles - External
http://www.hotwired.com/webmonkey/

W3C CSS Center - External
http://www.w3.org/Style/CSS/

~Wildfire: > Articles > CSS Basics
~Look at: \| Articles \| FAQs \| Resources \| Reference \|	\| Feedback \| Search Wildfire

Top of Page
~Look at: \| Articles \| FAQs \| Resources \| Reference \|	\| Give Feedback \| Search Wildfire