What is CSS (Cascade Style Sheet)?

Using CSS in a HTML document allows you to easily determine the style for the whole document. To give you some idea of what I mean and how it works, I will give you some examples.

<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//–>
</STYLE>
</HEAD>

With this little bit of code I have set that any text placed within a <TD>-tag has to be displayed in the font typeArial (font-family: arial;), in a size of 9 points (font-size: 9pt;), bold (font-weight:bold;) and black (color: #000000;).

You can extend it with:
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: #FF0000; text-decoration: none; }
//–>
</STYLE>
</HEAD>

I have now added that all Anker Tags (links) should be displared in a shade of red (color: #ff0000;) and I disallowed the standard underlining of links (text-decoration: none;)

In Internet Explorer you can even add a mouse-over effect (a change of color when the the link is touched by the mouse pointer):

<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: #FF0000; text-decoration: none; }
a: hover { color: #000000; }
//–>
</STYLE>
</HEAD>

You can also create your own names to indicate a style:
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
#mystyle { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//–>
</STYLE>
</HEAD>

I have changed the “td” to #mystyle. When you place a DIV-tag elsewhere in the document, you can use this to refer to the styling settings:
<DIV ID=”mystyle”>
my text
</DIV>

Any text placed within the DIV-tag will be shown in Arial, 9 points, bold and black.

The same result can be created in this manor:

<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
.mystyle { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//–>
</STYLE>
</HEAD>

With elsewhere:
<P>
my text
</P>

Using CSS in a correct way saves you a lot of usage of the FONT tags. But a great way to reduce coding is to place CSS in a seperate file.

Just place the CSS code in an empty notepad file.
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: FF0000; text-decoration: none; }
#mystyle { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }

Save the file as style.css and save it in the same loctaion as your HTML documents. You can link to the stylesheet within each HTML document. You do this within the HEAD-tag:

<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<LINK rel=”stylesheet” href=”style.css” type=”text/css”>
</HEAD>

The great advantage of working with CSS is that you can change things like the color of your links in a matter of minutes. You just have to change that one .css file. The change will take a effect throughout the whole website!

You can also use CSS within HTML tags:

<H2 STYLE=”background-color: #000000; color: #ffffff;”>TEXT</H2>

With the above STYLE attribute we’ve just set the background color of the word TEXT to black and the text to white.

You can do the same with tables:

<TABLE>
<TR><TD STYLE=”background-color: #000000; color: #ffffff;”>text</TD></TR>
<TR><TD>more text</TD></TR>
</TABLE>

You have now set the background color of row 1 to black and the text to white.

Bookmark the permalink.

Comments are closed