Linking a Class Directly to an Element

In this example, the CSS is constructed with the class attached directly to the element in the
form element.classname, and like before, it is referenced using the class="classname" format
within the (X)HTML.
/* Use this style to turn anything light gray */
.bleached {
color:#CCC;
}
/* Override the color of bleached when it identifies a paragraph */
p.bleached {
color:#000;
}
This method would be used when the standard declaration for the bleached class needs to
be overruled. For example, any element given a class of bleached will remain light gray (color:
#CCC;), but any instances of paragraph elements with a class of bleached will be rendered black
(color: #000;). This method is useful when numerous instances of a class are littering your
(X)HTML, and it would be too difficult to remove them all manually. Instead, simply target that
class when it identifies the element you need to change using the form element.classname.

When to Use and Avoid an ID

When to Use an ID
 
Only one element on each page can be styled by each unique ID, and therefore IDs should be
reserved for unique, single-use elements such as a header or sidebar, or the main navigation or
page footer. This makes scanning your markup easier, as all ID attributes will denote unique
content areas or special regions of the page, while also providing greater flexibility for more
complex CSS application. Later in this chapter, further uses for IDs will be discussed in the
“Contextual Selectors” selection.

When to Avoid an ID
IDs must be avoided when there is more than one requirement for the CSS rule. Do not use an
ID for anything you are likely to multiply in the future, such as multiple images, link styles, or
paragraphs where more than one will need to be styled a particular way.

Anatomy of a layout: Tables vs. CSS

To use a fine art analogy, working with tables is like painting by numbers: you create a
skeleton layout and then fill in the gaps with the content of choice. And, like painting by
numbers, a lot of work is required to change the layout after it’s completed. Working with
CSS is more akin to sculpting with clay: you begin with something simple and then gradually
fashion your layout. Making changes, tweaks, and even additions at a later date is simpler,
and the whole process feels more organic.
Long-time web designers may feel intimidated by CSS because they don’t initially have the
skeleton layout of table borders to work with. In some ways, CSS sits at the extremes of
web technologies, being both very graphic and design-like (in its flexibility), but also quite
technical (in how it’s created). Tables tend to sit in the middle of these two extremes.
However, once you get the hang of CSS workflow, it soon becomes second nature. Now,
we’ll look at how to create a web page structure, and we’ll then recap the CSS box model.

Adding a pop-up to an image

1. Create a container for the pop-up. Add the div shown following to the web page,
within the wrapper; the div will act as a container for the pop-up.
<div id="popupContainer">
</div>

2. Add the main image in the usual fashion, placing it inside the div created in step 1.
<img src="add-a-pop-up-image.jpg" alt="Landscape" width="500"
å height="375" />

3. Add a link and pop-up content. Surround the image with a dummy link, and then
add a span element immediately after the image. Within this, place the pop-up
content, which can contain text and even other images. Text can be styled within
inline elements (strong, em, and anchors, for example). In this example, the span
contains an image, which will be floated right, and some text (which is truncated
for space reasons—the completed version in the download files is longer). To
ensure that the floated image is “cleared,” making the span’s background appear
behind it once styled, a clearFix class is added to the span start tag, and an associated
CSS rule created (in step 10). More on this float-clearing technique, along
with floats and clears in general, is given in Chapter 7.
<a href="#"><img src="add-a-pop-up-to-an-image.jpg" alt="Landscape"
å width="500" height="375" /><span class="clearFix"><img
å src="add-a-pop-up-pop-up.jpg" alt="Winter shot" width="126"
å height="215" />
The text for the pop-up goes here…</span></a>
4. Set defaults. At this stage, the page content is displayed in a linear fashion—large
image followed by small image followed by text—so some CSS is now needed. In
the CSS document, add some padding to the existing body element, ensuring the
page content doesn’t hug the browser window edges when you’re testing the page.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

5. Give the images a border. Add the following rule to apply a thin gray border to the
images on the page.
img {
border: 1px solid #666666;
}

6. Define the pop-up area size. Add the following rule to define the size of the popup
area (the width setting defines its width and display: block stretches the
active area of the link to the size of its container—the image). The other settings
override link defaults, making the text within the div and anchor black and not
underlined.
#popupContainer a:link, #popupContainer a:visited {
position: relative;
display: block;
width: 500px;
text-decoration: none;
color: #000000;
}

7. Make the pop-up invisible. Add the following rule to make the pop-up initially not
display onscreen (i.e., outside of the viewing area of the browser).
#popupContainer a span {
position: absolute;
left: -10000px;
top: -10000px;
}

8. Style the span element. The following rule styles the span element during the
hover state. The display property value of block defines the pop-up as a blocklevel
element, rather than an inline one, while the position setting of relative
overrides that set in the previous step (as do the left and top values). The width
setting defines a width for the pop-up. The negative margin-top setting pulls the
pop-up upward, so it no longer sits under the main image. The value is the same
as the height of the main image minus the vertical offset required. (If it were set to
the height of the main image, the pop-up would sit flush to the top of the image
during the hover state, which looks cluttered.) The margin-left value provides a
horizontal offset, while the padding value places some padding within the span, so
its contents don’t hug its borders. The other settings style colors and fonts.
#popupContainer a:hover span, #popupContainer a:focus span,
å #popupContainer a:active span {
display: block;
position: relative;
left: 0;
top: 0;
width: 360px;
color: #000000;
font: 1.1em/1.5 Arial, Helvetica, sans-serif;
margin-top: -335px;
margin-left: 50px;
padding: 20px;
background-color: #e0e4ef;
border: 1px solid #666666;
}

9. Next, a rule is needed to float the image within the span. The margin settings
ensure that the image doesn’t hug the text-based content.
#popupContainer a:hover span img, #popupContainer a:focus span img,
å #popupContainer a:active span img {
border: 1px solid #666666;
float: right;

margin-left: 15px;
margin-bottom: 5px;
}

10. Apply the clearFix rule. Floated elements are outside the standard document
flow. Therefore, if there’s little text, the image appears to stick out of the span box,
as shown in the following example.
This can be fixed by adding the following rule (this technique is fully explained in
Chapter 7):
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

**Note:  Because of a bug in Internet Explorer pre-version 7, you need to add the following
rule to make the pop-up work in Internet Explorer 6 or 5.5: #popupContainer a:hover
{text-indent: 0;}. Ideally, this should be added in a style sheet linked via a conditional
comment—see Chapter 9 for more on hacks for old browsers.