Style Sheets (CSS)

Style Sheets (CSS)

As we have learned, HTML markup can be used to indicate both thesemantics of a document (e.g., which parts are elements of lists) and itspresentation (e.g., which words should be italicized). However, as noted in the previous chapter, it is advisable to use markup predominantly for indicating the semantics of a document and to use a separate mechanism to determine exactly how information contained in the document should be presented.Style

sheetsprovide such a mechanism. This chapter presents basic information about Cascading Style Sheets(CSS), a style sheet technology designed to work with HTML and XML documents. CSS provides a great deal of control over the presentation of a document, but to exercise this control intelligently requires an understanding of a number of features. And, while you as a software developer may not be particularly interested in getting your web page to look “just so,” many web software developers are members of teams that include professional web page designers, some of whom may have precise presentation require- ments. Thus, while I have tried to focus on what I consider key features of CSS, I’ve also included a number of finer points that I believe may be more useful to you in the future than you might expect on first reading.

While CSS is used extensively to style HTML documents, it is not the only style- related web technology. In particular, we will study the Extensible Stylesheet Language (XSL)—which is used for transforming and possibly styling general XML documents— in Chapter 7

Introduction to Cascading Style Sheets

Before getting into details, let’s take a quick look at an XHTML document that uses simple style sheets to define its presentation. Specifically, let’s consider once again the “Hello World!” document of Figure 2.1, but with the addition of twolinkelements in the head of the document (CSSHelloWorld.html, shown in Fig. 3.1). Notice that the body of this document is identical to that of Figure 2.1. However, viewing this document in Mozilla 1.4 produces the result shown in Figure 3.2, which is quite different from the way Mozilla displayed the original “Hello World!” document (Fig. 2.2).

The difference between the two browser renderings, of course, has to do with the linkelement, which imports astyle sheet located at the URL specified as the value of itshrefattribute. In this example, the style sheet is written in the CSS language, as indicated by the MIME type value of thetypeattribute. The style1.cssfile contains the lines

using a style sheet. Furthermore, if at a later time we wish to change the size of the headers, we need only make the change in that one style sheet. More generally, if we use a single style sheet for all of the pages at a site, then all of the site pages will have a consistent style, and one that can be changed with little work.

In addition to these properties, which apply to any style sheet language—including older print-oriented style sheet languages—the cascading quality of CSS makes it particu- larly appealing for use with web documents. As we will learn, both the document author and the person viewing the document can specify aspects of the document style as it is dis- played by the browser (or other user agent displaying the document). For example, a user may instruct their browser to display all HTML documents using only a white background, regardless of the setting of thebackground-colorproperty in style rules supplied by the page author. This can be an important feature to, for example, a user who because of an eyesight limitation needs high contrast between text and its background.

It should also be noted that, though I am going to cover CSS in the context of providing style for HTML documents, it can also be used with non-HTML XML documents (Section 7.10 contains an example).

So, there are many reasons to learn about style sheet technology in general, and CSS in particular. We’ll start by covering some of the core CSS syntactic elements. After that, we’ll study the cascading aspects of CSS in more detail. Finally, we’ll consider details of a number of specific style properties and apply CSS to the blogging case study
to download this course click here