Cascading Style Sheets (CSS) Makes Style Changes Easy

SingaporeWebHosting.com

Home | Linux Hosting | Windows Hosting | Email Hosting | Domain Name | Web Design | Web Promotion | Reseller | Servers

Current Special

1 Year Free Web Hosting
included in our
Web Design Service

Home
Unix Hosting
Windows Hosting
Email Hosting
Domain Name
Web Design
Web Promotion
Reseller Plan
Dedicated Server
Support
FAQ
Resources

About Us
Contact Us

Singapore Web Hosting > Support

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.

More Web Hosting, Design, Promotion Articles and Tips

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 at the end of the article:

Web Hosting Articles and Tips

Why Do You Need A Web Site In The First Place?
What To Look For In A Web Host? 2
Why Do You Need Your Very Own Domain Name?
How To Choose A Domain Name?
What Can Server Side Includes (SSI) Do For You?
Super-charge Your Web Site With CGI Scripts 2
How Much Bandwidth Do You Need?
What's In The Mysterious Log File?
How To Use FTP?

Web Design Articles and Tips

Web Site Design Basics - From Internet Marketers Standpoint 2
Top 10 Deadly Web Site Design Mistakes 2
Easy Web Site Maintenance Using Server Side Include (SSI)
Should You Do Web Site Design In-house?
Cascading Style Sheets (CSS) Made Easy
Avoid "Lost" Traffic By Making Full Use Of Error Pages
What The Heck Is That? - All The Jargons Explained 2 3
How To Design An Effective Navigation System?
Are You Mad About Spam?
Ten Steps To Top Ranking Pages In Google 2

Web Promotion, Internet Marketing Articles and Tips

Can You Still Make Money On The Internet?
How To Rank High In Search Engines?
How To Get Listed In Yahoo? 2
The Power Of Opt-in List
How To Reach Millions Of People With Your Product For Free?
How To Get Thousands Of People Actively Promote Your Online Business? 2
The Strategy That Will Pay You Off For Years
Does Banner Ad Still Work?
One Stone, Three Birds - Newsgroup And Forum Participation
The Magic Word
How To Drive Targeted Traffic In 10 Minutes Time?

Singapore Web Hosting, Web Design, Web Marketing