What’s Your CSS Style? - dummies

By Janine Warner

One of the most confusing aspects of working with CSS (Cascading Style Sheets) is that you can write styles in so many ways. Similar to writing prose, just because you understand the basic rules of grammar and spelling doesn’t mean you have mastered writing concise prose.

Experienced CSS designers spend considerable time crafting brief, clear CSS that is easy to edit and update. But those who are new to CSS are prone to writing more styles than necessary and to creating redundant styles.

Not only does redundant code take longer to download to a web browser, it’s much harder to edit or revise later. And, the more redundant your code, the more likely you are to run into style conflicts.

Here are five tips for writing clean, efficient styles:

  • Never create two styles when one is enough. For example, you can create a style using the tag selector for all <h1> tags that changes the font family of your headlines, and then create a second style using a class selector that you can apply to your headlines to change the color.

    But it would be more efficient to define both the color and the font family in the same style. Remember that you can always go back and edit a style to add another rule if you want to change the style’s formatting.

  • Abbreviate hexadecimal color codes. You can define colors in CSS by including the entire hexadecimal color code. However, when you use color codes that are repetitive, you need to include only the first three characters. For example #ffffff is the same as #fff; both will create the color white.

  • Use external style sheets. You can define styles in an internal style sheet at the top of each web page, or you can save your styles in an external file with the .css extension and attach that style sheet to all your web pages. External style sheets are inherently more efficient because they enable you to use the same style on any or all pages in your site.

    For example, if you define a style that makes all main headlines bold, blue, and big, saving that style in an external style sheet lets you use the same style for every headline. Then, if you decide later that you want to change your headlines to green, you can change the style in one external style sheet and change all headlines at once.

    If you’d saved the styles in an internal style sheet, you would have to edit the headline style in each file.

  • Develop a naming convention for your styles. Although you can name styles created with the class or ID selectors anything you like, it’s best to choose styles that have meaning apart from the formatting. For example, if you create a style called .redHeadlines and then later decide you want all your .redHeadlines to be blue, you either will end up with a blue headline style called .redHeadlines or will have to rename the style.

    And renaming the style includes going back and reapplying that style everywhere you have a red headline that you want to turn blue, which kind of negates the power of styles to make global updates. To avoid this problem, create style names that refer to the position or importance of elements, such as .mainHeadlines or .sidebarHeadlines.

  • *Test and validate your code. Even experienced CSS designers make mistakes, which is why Dreamweaver includes so many great tools for testing and validating the code in your web pages. Make sure you test your CSS for common mistakes.

    Following are two online testing services that you can use to check for errors in your CSS code. Simply enter the URL of any web page on the Internet in the address field on either of these sites and click the Submit button to receive a report showing any errors in your code: