Thursday, February 4, 2010

Section 8.11. Seeing selectorsvisually










8.11. Seeing selectors

visually


Let's take some selectors and see how they map to the tree you just created. Here's how this "h1" selector maps to the graph:



h1 {
    font-family: sans-serif;
}




        html
head    body
We can only style elements in the body, so we're not showing the
<head> element and everything under it.
h1   p   h2   p    p
This selector matches any <h1> elements in the page, and there's
only one.
img   a    em   a




       html
       body
h1  p   p   h2   p
Now the selector matches both <h1> and <h2> elements.

    img a   em   a
Now the selector matches both <h1> and <h2> elements.




If we use a "p" selector, here's how that looks:



p {
    font-family: sans-serif;
}




       html
       body
h1  p   p   h2   p
This selector matches all the <p> elements in the tree.  img a   em   a




Sharpen your pencil



Color in the elements that are selected by these selectors:



p, h2 {
    font-family: sans-serif;
}
      body
      html
h1  p  p  h2  p
    img   a   em a
p, em {
    font-family: sans-serif;
}
                body
                html
       h1   p    p   h2   p
            img  a   em   a






8.11.1. Five-Minute Mystery


The Case of Brute Force versus Style


When we last left RadWebDesign in Chapter 4, they had just blown the corporate demo and lost RobotsRUs' business. CorrectWebDesign was put in charge of the entire RobotsRUs site and got to work getting everything nailed down before the site launch later in the month. But, you'll also remember that RadWebDesign decided to bone up on their XHTML CSS. They decided to rework the RobotsRUs site on their own, using strict XHTML and style sheets, just to get some experience under their belt before they took on another consulting job.


As fate would have it, just before RobotsRUs' big site launch, it happened again: RobotsRUs called CorrectWebDesign with an urgent message. "We're changing our corporate look and we need all the colors, backgrounds, and fonts changed on our site." At this point, the site consisted of almost a hundred pages, so CorrectWebDesign responded that it would take them a few days to rework the site. "We don't have a few days!" the CEO said. Desperate, the CEO decided to call in RadWebDesign for help. "You flubbed up the demo last month, but we really need your help. Can you help the CorrectWebDesign guys convert the site over to the new look and feel?" RadWebDesign said they could do better than that; in fact they could deliver the entire site to them in less than an hour.


How did RadWebDesign go from disgrace to Web page superheroes? What allowed them to change the look and feel of a hundred pages faster than a speeding bullet?


Uh, I think you forgot to style the elixirs and directions pages?













Posted by at 4:52 AM