Understand CSS Basics

The challenge in writing a chapter on CSS is providing you with enough detail to enable you to use them without flooding you with every single possibility. After all, the current CSS specification weighs in at a whopping 331 pages. Trying to cover even a small portion of the details is challenging enough. Attempting to cover everything in one chapter is impossible. However, it is possible to give you enough information to get you started on the learning process.

Apply Style with Selectors

If you’re going to work with CSS, the place to start is with selectors. At the most basic level, selectors are simply element names without the < and > around them. By beginning a style rule with an element name, you are “selecting” that element and assigning one or more styles to it. However, selectors can be much more specific than just a simple element name. In fact, as you learn to create and use specialized selectors, you can target specific portions of a Web page for style—even if you didn’t create the page! The paragraphs that follow list just a few of the different kinds of selectors you can use to apply style in a Web page.

Understand Type (Element) Selectors

You are already familiar with type selectors, although you may not know them by that name. Type selectors are made up of one or more element names. If you have worked on some of the CSS projects in this chapter, you have primarily used type selectors, although you have used them one at a time. One great time saver with type selectors is that you can group multiple selectors together in a single style rule by merely separating them with commas. For example, suppose you want all the different heading elements on your page to be blue. You could write a separate style rule for each of the h1–h6 elements, or you could write a single rule that looks like this:

h1, h2, h3, h4, h5, h6 {color: blue}

Incidentally, you don’t have to stop there. You can add in any number of other elements to that style rule. The only thing you have to remember is to separate them by commas. Why is this important? If you forget the commas, you are inadvertently creating a different kind of selector: a descendent selector.

Understand Descendent Selectors

Descendent selectors used to be called contextual selectors because they are based on an element’s context. The name was changed to descendent, which more accurately describes the function of this kind of selector. A descendent selector focuses on an element that is a descendent of (in other words, nested inside) another element. For example, suppose you want to modify the <strong> element to display with bold red text, but you want it to display this way only when it is used inside an <h1> element. You would use a descendent selector and write your style rule this way:

h1 strong  {color: red; font-weight: bold;}

When applying style to this selector, a browser would modify only the <strong> element when it is a descendent of <h1>.

Note

In the preceding example, it is not necessary for a <strong> to be an immediate descendent of <h1>. It could be nested inside any number of other elements and the style would still be applied. It is only required that <h1> be strong’s ancestor, not parent.

Create Custom Selectors with Class Selectors

Class selectors enable you to create your own selectors based on classes or unique identification names you assign. Suppose you’re creating a Web site with a list of recipes, and you want all the recipe names to be formatted a certain way. Rather than taking the time to add an inline style for each recipe name, you can simply create a class selector for that particular style information. To create a class, you simply preface the class name you have chosen with a period, as in the following style rule:

.recipeName  {font-family: arial; color: blue; font-size: 1.5em}

Then, to apply that style in your Web page, you simply add the class attribute wherever you want that particular style to appear, as in the following:

<p >Style will be applied here</p>

If you want to, you can also attach a class to a specific element name by connecting the element name and class name with a period, like this:

p.recipeName {font-family: arial; color: blue; font-size: 1.5em}

This class name limits the use of the recipeName class to the <p> element. Whichever way you choose to apply them, class selectors can greatly simplify your work with CSS.

Use the ID Selector for Greater Specificity

Remember the section earlier in this chapter that covered the cascade—the order of preference given to competing style rules? One way in which browsers choose between competing selectors is by determining which selector has a greater specificity. In other words, which selector is more specific or detailed? The greater a selector’s specificity, the higher the priority a browser gives it. The ID selector, a close cousin of the class selector, is a good choice if you want to ensure a higher degree of specificity in your selectors. The reason for this is that the ID must be unique in any one document. In other words, you can only use a particular ID once on a page.

You create an ID selector by placing a crosshatch (tic-tac-toe) symbol before the ID name. As with class selectors, your ID name can be anything you wish, provided you begin it with a crosshatch. Thus, a style rule for a copyright notice might look like this:

#copyrightInfo  {font-size: .80em; font-family: arial}

To apply the style in your Web page, you use the ID attribute, as in the following element:

<p >Style will be applied here.</p> 

Use Pseudo-Classes for Links

Pseudo-class selectors were developed to address conditions that can occur on a Web page without being reflected in the XHTML code itself. The most obvious examples of this are hyperlinks. If you’ve surfed the Web very long, you have probably noticed that a link’s color usually changes after you click on it. Even though the link’s color has changed, you won’t find this reflected anywhere in the page’s XHTML markup. The color change is a function performed by the browser to remind you of the links you have already “visited.” If you want to modify the color of a visited link, you use a pseudo-class selector. Although there are quite a few pseudo-class selectors, most are not well supported by browsers as of this writing, and even the ones that are supported work only with hyperlinks. The pseudo-classes you will find most useful are :link, :visited, :active, and :hover. If you combine these with the anchor (a) selector, you can adjust the colors and appearance of the links on your page, as in the following style rules:

a:link    {color: blue; font-style: italic} a:visited {color: purple; font-style: normal} a:active  {color: green; font-style: italic} a:hover   {color: red; font-style: italic}

If you incorporate these rules into an embedded or linked style sheet, your unvisited links will be blue text with an italic font style, visited links will be purple with a normal font style, active (links that you have just clicked) will be green with italic font, and hover (mouseover) links will be red with italic font. Try it.

Although the list of possible selectors is longer than what has been presented here, many of them are considerably more complex that these. The preceding selectors are the ones you are most likely to use as you begin to learn how to use Cascading Style Sheets. If you want a more complete list of selectors, download the CSS reference section in at www.jamespence.com.

Understand CSS Measurement Units

When you are writing style rules for a Web page, CSS offers a number of different possibilities for specifying length measurements. In fact, so many options are available that you might find it confusing to decide which you should choose. When you can choose between percentages, pixels, points, picas, millimeters, centimeters, inches, ems, and exes, how do you even begin to sort them out? Actually, it’s not all that difficult. First, all of these different measurements can be sorted into two basic groups: absolute and relative measurements.

Absolute Measurements Are Fixed

Absolute measurements are fixed lengths or sizes. Thus, this group of measurements includes points (1/72 in), picas (12 pts), millimeters, centimeters, and inches. If you use any of these measurements, remember that they do not adjust with window size display resolution or display size. They are absolute. Unless you are designing for a network and know exactly what kind of equipment your visitors will use, you will find it advisable to avoid absolute measurement units.

Relative Measurements Are Flexible

Relative measurements are flexible in that they are generally made relative to something else. For example, an ex measurement is made relative to the height of the letter x in an element’s default font. Thus, a measurement of 2ex is equal to two x’s stacked on top of one another. Another measurement, the em, is based generally on the browser’s default font size. A value of 1.5em, then, would be one-and-one-half times the size of a browser’s “body text” font. However, if you are working with an element where the font size has already been specified, then 1.5em would be equivalent to one-and-one-half times the font size for that element.

The third length measurement, pixels, might seem on the surface to be in the wrong group. After all, 100 pixels appears to be an absolute measurement. However, remember that there are several different possible resolution settings for browsers. One hundred pixels on a 640 480 screen takes up more space than on an 800 600 screen. Therefore, pixels are measured relative to a display screen’s resolution. Although any of the measurements listed in this section will work for you, generally you will find that the em’s simplicity and flexibility make it your best choice for your CSS measurement need.

Understand <div>, <span>, and Inheritance

Two tools to keep ready for use in working with CSS are the <div> and <span> elements. These two elements have no function in and of themselves but are “generic” in nature. Essentially, you can make them do almost anything you want them to. Why are there two generic elements? The <div> element is a block-level element, while <span> is an inline element. Block-level elements create a separate division on the page and insert an extra space after the element. Thus, if you want to create a grouping of elements on your page to which you will add style, you would use <div>. For example, say there was a portion of your page where you wanted to have a different background color. You could apply the background color to each of the elements in that section individually, or you could simply enclose all of those elements inside a set of <div> tags. Then all you need to do is apply the new background color to <div>, and the other elements will inherit the new style, as in the following code listing:

<div style="background-color: blue"> <h1>All of this content</h1> <h2>will have a</h2> <p>blue background</p> </div> <p>This content returns to the default background.</p>

On the other hand, if you want to apply a style inside a paragraph, you would use <span>. For example, say that you want to italicize one sentence in a paragraph. Simply enclose the sentence you want to modify inside a set of <span> tags and assign whatever style you want, as in the following listing:

<p>This is a generic paragraph using the page's default font. <span style="font-style: italic">However, this text will display in italics.</span> This text returns to the default font style.</p> 

Another important concept to understand here is that of inheritance. In most cases, an element that is a descendent of (nested inside) another element inherits that element’s styles. Although this is not always the case, it is helpful to remember that the styles you assign will often influence more page elements than you expect them to.

Tip

Often, in CSS, you will see terms like parent, child, ancestor, and descendent. If you find these terms confusing, just think of a family. Anytime an element is nested inside another element, it is considered a “child” element. Thus, the terms parent and child refer to elements that are members of an “immediate family.” The terms ancestor and descendent can refer to immediate family, but they can also refer to grandparents and grandchildren, great-grandparents and great-grandchildren, and so on.