Figure 3.11. The tag line appearing in italics

What's happening here? Perhaps a CSS-to-English translation is required. This CSS rule means, "For any paragraph element that occurs inside an element that has an id of tagline, set the text to italics and the font to Georgia, Times, or some other serif font if you don't have either of those."

Note: Getting a Positive ID

The # notation in the CSS refers to an element with a specific id attribute -- in this case, tagline. We'll learn more about selecting ids and manipulating them in subsequent chapters.

Contextual Selectors

#tagline p is known as a contextual selector. Here are some other examples (with their English translations):

#navigation a {
  text-decoration: none;
}

Translation: for any link found inside the navigation area (an element with an id of navigation), remove any decoration on that text; in other words, remove the underline (any other links on the page will remain underlined).

#footer p {
  line-height: 150%;
}

Translation: set the vertical height between lines of text contained in paragraphs inside the footer area (e.g. a div element with an id of footer) to 150%. This would override the browser default of 100%, or other line-height values that might be set, for example, on the body.

h1 strong {
  color: red;
}

Translation: for any text inside a level one heading that's marked up as strong, set the color to red (any other instance of strong on the page will not be set to red).

h2 a {
  text-decoration: none;
}

Translation: don't underline the text of any link inside a level two heading (the default setting underlines all links, so any other links on the page will remain underlined).

Grouping Styles

If you want to apply the same style to different elements on a web page, you don't have to repeat yourself. For example, let's say that you want to set heading levels one through three in yellow text with a black background. Perhaps you'd do this:

h1 {
  color: yellow;
  background-color: black;
}
 
h2 {
  color: yellow;
  background-color: black;
}
 
h3 {
  color: yellow;
  background-color: black;
}

That's very messy, and once you have a lot of styles on the page, it gets even more difficult to maintain. Wouldn't it be great if you could reduce some of that work? You can! Here's how:

h1, h2, h3 {
  color: yellow;
  background-color: black;
}

Translation: if the element is a level one heading, a level two heading, or a level three heading, set the text to yellow and the background to black.

Note: Comma = "Or"

Think of the commas in the selector above as the word "or."

Let's try grouping some styles in our project site. We don't have any h3 headings yet, but they're coming:

Edit your CSS file (style1.css) by adding the following to the bottom of it:

Example 3.16. style1.css (excerpt)
 
h1, h2, h3 {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  background-color: navy;
  color: white;
}

Save the file, then refresh the 'About Us' page in your browser (assuming it's still open from your last exercise). You should be looking at a page like the one shown in Figure 3.12.

Figure 3.12. Displaying the changed heading styles

That CSS really does kill several birds with one stone (and I said no animals would be harmed! Apologies to ornithologists). Now, not only do you have the convenience of being able to style many pages from one central location (your CSS file), but you have the added convenience of being able to style many elements in one go. Your CSS file becomes easier to manage and -- a nice little side-benefit -- smaller, and therefore quicker to download.

But something interesting is happening in our CSS file: it appears that we may have a conflict in our rules. Or have we?

Share and Enjoy: