Microsoft® Office SharePoint® Designer 2007 Bible

12.1. Introducing Cascading Style Sheets

CSS styles define the formatting for the elements they apply to. In HTML, for example, every tag is an element, and you can use styles to modify the way the tag looks and behaves. As previously mentioned, styles provide a centralized framework for implementing formatting on a large number of pages.

For example, if you want to have all tables in your Web site formatted in a similar manner, you can create a style for the table, and whenever you create a table for your Web site, you can associate that style with the table. That way, all tables inside your Web site use the same style. Now, whenever you want to change the formatting applied to the tables, you just need to modify the style. By virtue of the style association with the tables, the formatting is automatically picked up by all tables. In this manner, styles help you maintain uniformity in your Web sites and thus reduce design hours.

12.1.1. Understanding CSS classes and rules

Before detailing CSS implementation by using SharePoint Designer, I want to quickly touch upon some of the CSS basics and familiarize you with a couple of important concepts in CSS terminology.

12.1.1.1. CSS rules

To understand how CSS applies to Web pages, follow these steps to create a simple style and then associate it with an element on a HTML page:

1. Using SharePoint Designer, create a new HTML Web page inside your Web site and then open it in the Design view.

2. Choose Insert HTML Span to insert a <span> ...