Chapter 12. Exploiting Cascading Style Sheets and Themes
Introducing Cascading Style Sheets
Working with styles
Creating and using CSS layouts
Using CSS reporting features
Cascading Style Sheets (CSS) is a World Wide Web Consortium (W3C) standardized design mechanism for implementing formatting, fonts, and positioning on elements in Web pages. CSS has been available for quite a while now, and the current version, CSS 2.1, along with inheriting most of the features of previous versions, fixes some problems and provides enhanced capabilities for presenting Web pages.
CSS provides a segregated approach to apply formatting and present structured documents, such as HTML Web pages, XML documents, etc., for display in a browser. In simple terms, instead of applying a font directly to an HTML element on a Web page, you create a style by using CSS that can live either on the Web page itself or in a separate file in your Web site. At render time, a browser applies the styles specified in the CSS file to the HTML elements for display to the user.
By segregating the style implementation from the document, designers can enhance their productivity and output. For example, instead of having to apply the same formatting on every Web page inside a Web site, a Web designer can separate the formatting into a separate CSS file and then link this file to the Web pages for reference.
Now, whenever a change needs to be made to the formatting, the designer needs to modify only the CSS file. The change automatically trickles down to all the Web pages linked to the CSS file. The CSS file discussed previously is called a style sheet. The reference to the style sheet on the Web pages is called a style sheet link.
SharePoint Designer provides a rich user interface to create, modify, and apply style sheets to Web pages on SharePoint and non-SharePoint sites. It also offers mechanisms to run reports that allow you to check the CSS implementation and determine usage of CSS elements on the Web pages. This chapter discusses how you can use SharePoint Designer's CSS tools to implement style sheets on your Web sites.
I start by discussing the structure and composition of CSS styles and then explain the use of CSS-related task panes and toolbars in SharePoint Designer for creating style sheets. As you may know, SharePoint sites implement extensive CSS-based formatting. Later in this chapter, I also familiarize you with SharePoint CSS implementation and introduce you to the important SharePoint CSS styles. This should help you build on your understanding of how you can brand SharePoint sites by using CSS.