Learn HTML and CSS: An Absolute Beginner’s Guide Article

Looking at Elements in Context

Here’s a riddle for you: which of these items is bigger? A pen or a sheep? Well, the answer is either, depending on the context. If you were a farmer, you’d swear that the pen is bigger. After all, you spend many hours a week rounding up herds of sheep into a big, solid pen. If, however, you’re an office worker, you’d opt for the sheep being the larger of the two — after all, you’d find it a lot easier to pick up a pen and flip it around your fingers.

Context can change a situation quite drastically, and we can use context to our advantage in CSS. We can style an element in a number of different ways, depending on its position. Let’s head back to our example site for another lesson. Don’t be sheepish, now!

Currently, we have styled paragraphs so that they appear in a navy blue, sans-serif font (Verdana, specifically), as does almost everything else on the page:

body {                 

     font-family: Verdana, Helvetica, Arial, sans-serif;                 

    }                 

                    

    p {                 

      font-size: small;                 

      color: navy;                 

    }

This is all well and good, but there’s one paragraph on our site that’s a little different than the others in terms of its purpose. Can you spot which one it is? It’s our first paragraph, the one in the tag line. Here’s the XHTML for that section:

index.html (excerpt)
<div id="tagline">                
 <p>Diving club for the south-west UK - let's make a splash!</p>                
</div>

It’s different because it’s not really part of the document content and, as such, it might benefit from some different styling. The fact that this particular paragraph is contained within a specific div element — which has an id attribute of tagline — can be useful. Because it’s contained within its own div, we can set a rule for this paragraph and this paragraph only.

• Open the CSS file for editing, and add the following after the first paragraph rule:

  #tagline p {                
         font-style: italic;                
         font-family: Georgia, Times, serif;                
        }

• Save the file, then refresh the About Us page (or any of the three, for that matter) in your browser. Your page should now look similar to the one shown below.

  

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, for the body text.
    

• 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 repetitive. Plus, once you have a lot of styles on the page, it is 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.

Tip: Comma = “Or”

You can think of the commas in CSS selectors (like the one above) as the word “or.”

Let’s try grouping some styles in our project site. We don’t have any h3 headings yet, but we will soon.

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

  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. You should be looking at a page like the one shown in Figure 3.12, “Displaying the changed heading styles”.

That CSS really does kill several birds with one stone (figuratively speaking, of course; I did say no animals would be harmed!). 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.

Tip: Filenames for Your Style Sheets

Although we’ve been working with style1.css for some time, you may be wondering why we named the file this way. The name is deliberate. You might want to add another style to your web site at a later date, and numbering is a basic way to keep track of the styles you can apply to a site.

You might be thinking, “Why not name it something like marine.css because it uses marine colors, references to sea animals, and so on?” That’s a fair question, but it’s important to remember with CSS is that you can always change the styles later, and your naming convention might, at a later date, bear no relevance to the styles a file contains. For example, you can edit marine.css such that all the colors in your web site are changed to ochres, browns, and sandy yellows. This ability to change the web site’s design in one action is the whole point of CSS! With the new design, your web site might have an earthy/desert feel to it, yet you could still have 200 or more pages referring to a style sheet by the filename of marine.css. It’s not quite right, is it? This is why I’ve chosen an abstract name for the CSS file, and I recommend that you do the same for the web sites you develop.

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