Web Design: CSS Makes Style Changes Easy

Web Hosting

Web Design

Web Promotion

Domain Name

FAQ

Resources

About Us

Contact Us

1st Singapore Web Hosting > Web Site Design

Cascading Style Sheets (CSS) Made Easy

Cascading Style Sheets (CSS for short) is a hot topic. However some people have been putting it off because of its wired name. Don't be fooled by the name, it's rather easy eventually. In this article, you'll see the simplicity of CSS and realize that making style changes to your web pages is not only quick and easy, but also fun.

Create a file named style.css, or whatever you want to name it with .css as extension. Upload the style.css file to your server.

Now, in the source HTML code of your web pages, put this line in the HEAD area:

< LINK REL="stylesheet" TYPE="text/css" HREF="style.css" >

That's all there is to it. Every page with the above line in the HEAD area will have it's style converted to what you specify in the style.css file. To change the style on all your web pages, simply edit the style.css file.

(You can also add the style sheet directly in the HEAD area of each page the style will be applied to.)

Now lets look at the style sheet code in the style.css file.

First, add in these three lines in style.css file:

BODY, TD, P, LI, {
font-family: arial;
}

Now, every page with the above style.css link in HEAD area will have it's font magically converted to "Arial". Is it fast;-)?

Okay, there may be just a bit more to it than that. If you currently have FONT tags specified in the source code of your web pages, you need to remove those so the CSS style can do its job.

The "font-family: arial;" line is a style element. Styles can have other elements like size and color, and some of those are addressed below. Each style element has two parts. The first part is called the "property" and the second part, the "value." The property is followed by a colon and the value is followed by a semi-colon. The property must be specified before the value, and they must appear together.

Like in standard HTML FONT tags, to control the exact font name to be used, with backups in case the one you specify isn't available on the user's computer, you can list the font names in order of preference, separated with a comma:

font-family: arial,helvetica,sans-serif;

Lets also specify the text size and color:

BODY, TD, P, LI, {
font-family: arial,helvetica,sans-serif;
font-size: 12px;
color: #000000;
}

The above specifies a font size of 12 pixels and text color of black. The color can be specified either as a hexadecimal number proceeded with a "#" character (like the example) or by a color name such as "black".

Once you upload the above style sheet, your pages will have black, 12 pixel sized text, Arial font. Change the color to

color: blue;

and suddenly all your text is blue. Change the size to

font-size: 55px;

and your text is huge.

Just one simple change in style.css changes every page that has the one-line tag in the HEAD area.

By now, you've probably been wondering about the

BODY, TD, P, LI, {

line in file style.css. That is a list of tags that the style will effect. In this case, it effects the BODY tag (which is everything in the page BODY that doesn't otherwise have a style), the TD tag (table data cell), and the P tag (paragraph).

Let's add another style for the H1 tag. Your style.css file should now have these lines:

BODY, TD, P, LI, {
font-family: arial,helvetica,sans-serif;
font-size: 14px;
color: #000000;
}

H1 {
font-size: 36px;
font-weight: bold;
text-align: center;
color: red;
}

The above will cause the H1 text to be 36 pixels in size, bold, centered, and colored red. The font face will be Arial because that's what's specified for BODY, and H1 didn't specify any different.

Once you upload style.css, all your web page's H1 text will be the specified style.

Your style.css file can contain specifications for any HTML tag. Yes, there is a lot more to be learned. Even with just this small amount of knowledge, however, you have the ability to specify the font attributes for any and all HTML tags that contain visible text - throughout your site. Except one.

The one exception is the anchor tag, often referred to as the "A" link tag. The A tag can have three different styles, one for each of it's states: link, active, and visited. To see how it works, change your style.css style sheet file so it has these thirty lines:

BODY, TD, P, LI, {
font-family: arial,helvetica,sans-serif;
font-size: 12px;
color: #000000;
}

H1 {
font-size: 36px;
font-weight: bold;
text-align: center;
color: red;
}

A:link {
color: blue;
font-weight: bold;
}

A:active {
text-decoration: underline;
}

A:visited {
color: purple;
font-style: italic;
text-decoration: line-through;
}

With the above, your linked text will be bold, colored blue. When the link is active (while it's being clicked on), it will be underlined. Once the linked page has been visited, the text will be italic and have a line through it, and the text color will be purple.

Another A tag style you may wish to utilize is "hover" style. This style becomes effective when the mouse cursor hovers above the linked text. The "hover" style works in IE 5+ and in Netscape 6+. The style has no effect for browsers that don't support "hover". Here is an example "hover" style:

A:hover {
text-decoration: none;
color: red;
font-size: 22px;
font-weight: bold;
}

The above causes any underlines or line-throughs to disappear, turns the linked text red, changes the text size to 22 pixels, and makes the text bold.

Some of the styles demonstrated in the examples cause dramatic effects. They serve to demonstrate possibilities. Your actual implementation will probably be more pleasant to the eyes.

Feel free to use this article in your publication or web site.
It's pre-licensed to you. 
The only requirement is to include this resource box:

Web Site Design Service

More Web Site Design Articles