CSS Basics: What are style sheets? -------------------------------------------------------- If you've created a web site without using cascading style sheets (CSS), most likely you relied on an assortment of and other tags to control how your pages look. This ties the presentation of your site with its content, making it hard to modify your site's design. Suppose you later decide you want to change the color scheme or fonts used in your site - you'll have to edit every page in order to do this. Style sheets provide a solution to this problem. Instead of defining the site's design in each and every page, you can use a style sheet to control the look and feel of your site. Then if you want to change how your site looks, you simply modify the style sheet. What does a style sheet look like? ------------------------------------------------------ A style sheet is made up of rules that look something like this: H3 { font-family: Arial; font-style: italic; color: red } Each rule begins with a selector, which is H3 in the example above. A selector is normally one or more HTML elements (tags), and the declarations inside the rule describe how those elements should appear. So, the example above states that every

element should use an italic Arial font and be colored red. What is a CSS Class? ---------------------------------- In the previous example, we used an HTML element as a selector. You can also use classes as selectors, which aren't tied to specific HTML elements. For example, consider this rule: .warning { font-family: Arial; font-style: italic; color: red } The declaration block is the same as that in the previous example, but instead of using H3 as the selector, we're using the class .warning. Note that .warning doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces are not allowed). To apply a class to an HTML tag, you use the the class attribute. For example, to apply the above style to an

tag, you'd use:

this is warning

Important: When you declare a class in your style sheet, the first character must be a period - that's how the browser knows it's a class selector instead of an element selector. However, when a class is applied to an HTML element using the CLASS attribute, the period does not appear before the classname! ========================================================= We recommend naming a class based on its purpose rather than its appearance. For example, imagine you have a class called .blue which you use to color-code copyright statements in blue. Suppose later on you decide that green would be a more appropriate color - see the problem? If instead you named the class .copyright, you could change its style without having to rename it. ========================================================= How do I use styles on my site? ------------------------------------------------- There are several ways you can use style sheets. The first is simply to create your HTML documents using the style attribute introduced in HTML 4.0. Most HTML tags now support this attribute, and it enables you to define styles on a tag-by-tag basis. For this reason, we recommend against using the style attribute. By applying styles within your tags, you're missing out on the benefits of keeping your content separate from your design. The next method is to embed the style using a style block in the section of your HTML document. A style block is composed of an opening tag. For example: While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular HTML document. We recommend using the remaining method, linking an external style sheet, to achieve the greatest flexibility. Linking a style sheet to an HTML document simply requires using a tag in the section of every document to which you wish to apply the style sheet. For example: Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document it's linked to. This is where the benefits of style sheets are most apparent, since you no longer have to update every single page in order to overhaul your site's design. What are the drawbacks of style sheets? ---------------------------------------------------------------- Style sheets do have a downside. Right now the biggest problem is the imperfect CSS implementations that today's browsers offer. Even though the W3C issued their CSS1 recommendation way back in 1996, not every browser fully supports it. Worse, what they do support is often very buggy. This makes it difficult to create style sheets that work across all browsers, since what looks good in one browser may look awful in another. This is where TopStyle comes in. TopStyle helps you create style sheets that work across browsers by alerting you of problems as you work. TopStyle Pro's style checker validates your code, warning you not only of errors in your style sheet, but also of bugs in popular browsers that may affect its rendering. If you want to learn more about style sheets, just download the trial version of TopStyle Pro and step through the simple tutorial. This will get you up-to-speed on using CSS very quickly, and it's a great way to get started with TopStyle.