• Choose a category
• All
• Classic-Fiction

♦ Paragraphs defined outside special aren’t affected. This nested selection technique can help you create very complex style combinations. It becomes especially handy when you start building positioned elements, like menus and columns.

Defining Multiple Styles at Once

Sometimes, you want a number of elements to share similar styles. As an example, look at Figure 3-10.

Figure 3-10:

H1, H2, and H3 have similar style rules.

As shown in Figure 3-10, the top three headings all have very similar styles. Creating three different styles would be tedious, so CSS includes a shortcut:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

H1 Heading

H2 Heading

H3 Heading

One style element (the one that begins h1, h2, h3) provides all the information for all three heading types. If you include more than one element in a style selector separated by commas, the style applies to all the elements in the list. In this example, the centered cursive font with a yellow background is applied to heading levels 1, 2, and 3 all in the same style.

If you want to make modifications, you can do so. I created a second h3 rule, changing the font-family attribute to monospace. Style rules are applied in order, so you can always start with the general rule and then modify specific elements later in the style if you wish.

If you have multiple elements in a selector rule, it makes a huge difference whether you use commas. If you separate elements with spaces (but no commas), CSS looks for an element nested within another element. If you include commas, CSS applies the rule to all the listed elements.

Chapter 4: Borders and Backgrounds

In This Chapter

Creating borders

Managing border size, style, and color

Using the border shortcut style

Understanding the box model

Setting padding and margin

Creating background and low-contrast images

Changing background image settings

Adding images to list items

CSS offers some great features for making your elements more colorful, including a flexible and powerful system for adding borders to your elements. You can also add background images to all or part of your page. This chapter describes how to use borders and backgrounds for maximum effect.

Joining the Border Patrol

You can use CSS to draw borders around any HTML element. You have some freedom in the border size, style, and color. Here are two ways to define border properties: using individual border attributes, and using a shortcut. Borders don’t actually change the layout, but they do add visual separation that can be appealing, especially when your layouts are more complex.

Using the border attributes

Figure 4-1 illustrates a page with a simple border drawn around the heading.

Figure 4-1: This page features a double red border.

Shades of danger

Several border styles rely on shading to produce special effects. Here are a couple things to keep in mind when using these shaded styles:

You need a wide border. The shading effects are typically difficult to see if the border is very thin.

Browsers shade differently. All the shading tricks modify the base color (the color you indicate with the border-color attribute) to simulate depth. Unfortunately, the browsers don’t all do this in the same way. The Firefox/Mozilla browsers create a new color lighter than the base color to simulate areas in the light (the top and left sides of an outset border, for example). Internet Explorer (IE) uses the base color for the lighter regions and creates a darker shade to simulate areas in darkness.