 |
|
Free Website Tools, Free Content, |
How CSS (Cascading Style Sheets) can help you.
CSS can be used as a way to control virtually every element of your webpage layout and appearance.
In other words, if an HTML element or attribute gives cues as to how its contents should be displayed, then some or all of its functionality can be controlled by style sheets. For instance, CSS can control the font attributes of all the text over your entire website, without using a single <font> tag. It can make all your headlines and sub-headers the same, or give your table cells unique properties.
Using CSS to control your website elements will give you several benefits:
An external style sheet will make your webpages load faster.
By using CSS and writing the HTML code to match current standards you can decrease the time it takes for a browser to display your page after it actually finishes downloading it. (Sometimes called "Render Time", it is the delay between downloading and displaying.)
CSS and the proper DTD for the pages means the browser knows what to expect from the code and can render it much faster. When you use the 'traditional' HTML tags for tables, headers and fonts to control your webpage appearance, the browsers have to do a lot more work before they can actually show the page.
By removing most of the HTML formatting tags and moving those functions to an external style sheet, you make the pages leaner... which leads to faster downloading overall.
CSS makes updates faster and easier.
CSS makes it easier to make global updates to your website. For instance, with CSS controlling your heading font and color, changing one or two lines on your external style sheet will change the headings on every page. Contrast that to the labor involved in changing the font tags on every page.
Want to change your website for Valentines Day? Simply change the CSS header style to show a little heart on the left and change the font color to red. Change the background image to something appropriate and upload the edited file. Poof! it's done, and it took longer to decide on the background image than it took to change every page on your website.
After Valentine's Day, just change it back, or go with a St.Pattys Day theme and upload.This kind of easy flexibility gives you the opportunity to do a lot more with your website.
CSS helps users who browse with different devices.
Screen readers, mobile phones and PDAs can show your content accurately and easily - if you are using CSS. This may not be a big consideration now, but the trend is growing, and as more people use them it will be simpler to update your CSS to work with current and future devices.
CSS helps with your Search Engine Optimization
Using CSS removes virtually all of the redundant HTML tags from your code. With all of your text, colors, and even your layout controlled by the CSS file, your actual content is much more 'visible' to the search engine spiders.
Instead of being broken up into small chunks by formatting tags, your content can be indexed in large, easily readable chunks.
Using the correct heading tags around the headings and sub-headings, and using <b> or <strong> tags around content you wish to highlight will tell the spiders which words are the most important... and that helps give your page a boost when someone searches for those words.
CSS even helps to comply with the Disability Discrimination Act
The uncluttered page coding that comes automatically with using CSS means screen readers can more easily navigate through your page and find the content.
Some users may want to change the font size, or have a screen reader actually read your content aloud... using CSS makes it easier for them to change your pages the way they need to.
CSS has been around long enough that it is supported by all the major browsers available, including Internet Explorer for the PC and Mac, Firefox, Safari and Opera. (But cross-browser testing is still a good idea: Opera and Explorer, for instance, render margins and padding differently.)
Multiple styles can be applied to the same webpage, hence the term Cascading. The style that is used for a particular element is determined by it's placement in the 'Cascade'.
To illustrate how the 'Cascade' works...
First level cascade: an external style sheet.
Second level cascade: a style in the page header.
Third level cascade: an in-line style applied to a paragraph.
Say you have an external CSS controlling paragraph fonts:
P {font-family:arial; font-size:10pt;}
...but an individual page has it's own embedded style:
<style>
P {font-family:veranda; font-size:9pt;}
</style>
...and one paragraph on that page has a another inline style:
<span style="font-family:arial; font-size:12pt; color:red;">text</span>
The style that will be applied a particular page element is the style closest to it in the cascade.
That's just to give you an idea of how the 'cascading' bit works. For more information and some in-depth tutorials I recommend that you visit www.w3.org/style/CSS/... and there is a good CSS Cheatsheet on this page.
For a practical demonstration of the incredible flexibility of using CSS, visit The CSS Zen Garden, click the 'select a design' links and see the possibilities.
To use an external style sheet on your pages, you simply create your .css file, then link to it with a META tag on each webpage:
<link href="http://yourwebsite.com/mystyle.css" rel="stylesheet" type="text/css" />
To get the full benefit from using CSS on your website, you do need to know something about reading and writing HTML. If you are still using a WYSIWYG editor to create your webpages, adding CSS will be more difficult -- even if your editor tries to do it for you.
Related Tools & Resources:
If you are willing to learn HTML and want a good free editor, I still think that HTML Kit is your best bet for a fully-functional, free editor. There is an active user community, plug-ins and more to help you if you need it.
CSS Validator Check your CSS code for errors.
To Your Success!
Tim
By Tim Brown © 2006. About the author: Tim is the webmaster at http://BLT-Web.com, where webmasters can find free tools, advice, tips and other useful resources designed to help them build a successful website.
Webmasters & Publishers:
You are welcome to publish this article free of charge on your website, newsletter, or e-zine, provided:
* You don't change the article in any way and all links remain intact.
* You include the entire article, including the "about the author" box.
* In doing so you agree to indemnify the author, blt-web.com and its directors, officers, employees and agents from and against all losses, claims, damages and liabilities which arise out of its use
* I would appreciate it if you send a courtesy copy of your publication to