CSS Tips

Cascading style sheets are a great way to control the look of a web site without using font tags or other text controls within a page of your site. Imagine that you web site grows to a few hundred, or a few thousand, web pages. Could you imagine having to control your text using a global find and replace or, god forbid, a manual edit?

Style sheets eliminate the need to do that. You get very extensive with your implementation of CSS and control the entire look of your site, use a table less layout, or allow your users to dynamically select a look for your site (kind of like a skin).

This is a topic that is pretty deep, so let me just start you out. Remember, this is a site for beginning webmasters.

If you are using Dreamweaver, there are some basic style sheets built into the program. You can control the default font of your site so that it doesn't just default to the rather unattractive 'times new roman'. I am not going to cover how to attach the style sheet to your page, or template, since the Dreamweaver help files cover that topic extensively. I'll just show you where to find them. In Dreamweaver, go to the menu 'file' > choose 'new'. From there make sure you are on the 'general' tab and select 'CSS Style Sheets'

new css in dreamweaver

Select a Style that suits your taste. The preview pane will show you what each element will look like when the style sheet is used. Once you create this file, save it as something like css.css, or stylesheet.css (anything you like as long as it is a .css file). Refer to the Dreamweaver help to attach this to your template or page(s).

CSS Zen Garden
Probably the best example of what you can do with nothing more than style sheets. Every example that you see is using the exact same HTML with a different style sheet. View the HTML code to understand what I mean. If you haven't seen this before, you won't believe it.

Style sheet Validator - At W3C.org
Don't forget to be sure that you style sheet is valid. The World Wide Web Consortium has tools to validate style sheets (and other code) so that you can be sure yours can be read by compliant browsers.