Cascading Style Sheets & CSS Codes

If you're not doing so, learn and employ CSS Codes (Cascading Style Sheets) on your websites, they are extremely useful and far more flexible than the presentational aspects of HTML. Even a simple implementation can save you masses of HTML code (read, "download time") and makes updates and modifications to your site both quicker and far simpler.

For example, on a conventional HTML only website, how manythousands of lines of code would need to be changed in order to have the text of every page appear in Verdana instead of Arial? Using a site wide style sheet you would only have to change ONE LINE! Read that again and let it sink in.

Altering one line changes the appearance of the entire site!

It's fairly easy to grasp the basics. Though as usual you have to watch out for differences in implementation between browsers.

Here are four of the most compelling reasons to use CSS:

1. You can change the font face, style, color, size or weight on every page of you site just by changing one variable in your style sheet file. If you have a small site this may not seem important to you now, but just wait until you've got 50-100 pages and you decide you want to make a change!

For example, I changed the body text font on NowSell.com from Arial at size #3, to Verdana at 11 pixels high (forget size #1, #2, #3, etc., with CSS you can use exact values in units like em, ex, pica, point, pixel, mm, cm or inch). If I decide I want to change back to Arial, all I have to do is open my style sheet file in any text editor like Notepad or Simple Text and replace the word "Verdana" with "Arial". Next I upload the modified file to my server and... Voila! Every single page on the site now displays in the Arial font!

2. All those <FONT size="X" face="arial, xxxx, xxxx, xxxx">Text</FONT> tags add an awful lot to the download time of your page. Use of CSS creates slimmer, faster loading pages. Even if you sometimes want to create a special effect on just one or two lines of text, a different font face, style, color, size and weight for example, the only code you need to add to your page is this:

<SPAN class="fancy">?</SPAN> or <DIV class="fancy">?</DIV> (use the latter for entire sections)

Then in your style sheet you will write one line specifying how the class of "fancy" (or whatever you want to call it) should look:

.fancy {font-size: 12px; font-family: arial, xxxx, xxxx, xxxx; color: #CC0000; font-weight: bold}

You've no need to add bold, italic or any other tags directly around your "fancy" text, just specify what you want in that one line of your style sheet, and it will effect any text enclosed in your tag, on every page of the site. But at the same time, IF you do want to use CSS codes on the fly, you can write them inline just like any HTML style declaration like this:

<P style="font-size: 12px; font-family: arial, xxxx, xxxx, xxxx; color: #CC0000; font-weight: bold">some element</P>

3. Since the majority of browsers support the CSS 1 and 2 standards, almost everyone can view the text and page layout as you intended.

4. If you don't learn CSS now, you'll soon be left behind as the majority of surfers are now using browsers that fully support the CSS specifications. Since CSS also allows for complete control over design elements like tables, margins, justify text, etc., you are able to change the entire page layout on multiple pages, just by changing a few lines of code in a single file! You no longer need to use complex tables and empty GIFs as spacers, and pages will load much faster too.