Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Part I: The BasicsYou may also wish to see more practical applications of the features presented in this chapter. If that is thecase, I provide some real-world projects at the end of this book that help you to put CSS into a real-worldcontext. As is the case throughout this book, I present all the bits and pieces of the language with proof-ofconceptexamples, and then later in the book you see how to put it all together with some real, skillbuildingprojects. Alternatively, you may also be interested in my book CSS Instant Results (Wrox, 2006),an intermediate-level CSS book that focuses on real-world projects exclusively.I begin the discussion of selectors with the most common and widely supported selectors, class and idselectors.Class and ID SelectorsClass and id selectors are the most widely supported selectors. In fact, they are as widely supported asthe type selector introduced in Chapter 2. There are two types of selectors. The class attribute is moregeneric, meaning it may encompass many elements in a given document, even elements of differenttypes or purposes. On the other hand, you can use the id attribute only once per document. The nameid tells you that the id must be unique. Besides using it in CSS, you can also use an element’s id toaccess it via a scripting language like JavaScript. You can also link to the location of the element with anid name using anchors. Anchors are appended to URLs to force a browser to go to a specific place in adocument. So the id attribute serves more than one purpose. Think of it as an element’s address inside adocument — no two addresses can be the same. The discussion continues with class selectors.Class SelectorsFigure 3-1 is an example of a class name selector.Figure 3-1The class name selector begins with a dot, followed by the class name itself, which you choose. Typically,the class name is comprised of letters, numbers, and hyphens only, since this provides the best compatibilitywith older browsers. Class names also cannot include spaces. In Figure 3-2, you see the elementthat the class name planet applies style to in the HTML document.60