An introduction to CSS

So, what is CSS?

CSS stands for Cascading Style Sheets. They are used to style web pages using special CSS code. Although this code can be inserted directly into the HTML document using the tags "<style>code here</style>" the best thing to do is make a CSS file. To do open your text editor and put in the following.


Code:





Now save this file as "style.css".

Now you need to include this file in your HTML document with a little meta reference.

Code:





Now save your HTML document and view it. Volla! Your background should now be black and your text be white. Simple huh!

Some useful CSS

Syntax: color:#xxxxxx; -- Change foreground colour.
Example: color:#FF0000;

Syntax: background-color:#xxxxxx; -- Changes background color.
Example: background-color:#FAFAFA;

Syntax: background-image:url(URL HERE); -- Changes background image.
Example: background-image:url(http://www.google.com/somefolder/someimage.png);

Syntax: border: -- Defines the style of border around an element.
Example: border: 1px solid #000000;

Syntax: width: -- Defines the width of an element
Example: width:300px;

Syntax: height: -- Defines the height of en element
Example: height:350px;

Syntax: font-weight: -- Changes the type of font, bold, italic or normal.
Example: font-weight:bold;

Syntax: font-family: -- Changes the type of font applied to the text
Example: font-family:verdana;

But how do i apply these commands to specific elements?

You can apply them to elements very easily.

One method of application is ID's. If you have a DIV element defined as...

Code:





You can then apply CSS to it like so...

Code:





Another way to apply to different elements is directly by HTML. If i wanted to make all of the links red in colour i would do this.

Code:





This works for most elements. As the tag for a link is <a> it will be applied to all of these tags.