Quiz

I am still a little confused about the use/implementation of selectors. What do they do in our HTML?

They allow us to style elements. Remember that the original goal of CSS was to avoid mixing presentational information (e.g. font, color, centering) from structural information: H1, H2, P, OL, LI.
Back before CSS, there were tags like CENTER and FONT, and, heaven help us, BLINK.
So, selectors live in the CSS file, describing what HTML elements the rules apply to.
That also allows different expertise: the HTML might be created by back-end database work, and the CSS might be handled by front-end folks.
Is there any way besides eyeballing or constantly reloading the result page to know whether the spacing is what we want?

Great question! Given that the goal is to please your eye (or your testers), there really isn't much alternative than to look at the result.
However, using the developer tools is a great way to make this easier and more immediate. I highly recommend playing with them, and when you are happy with a color, spacing, or whatever, you can then copy the rule into your CSS file.
Aside: there's no way to save the dev tools into your file; it's a sandbox.
Could you elaborate more on the multiple selectors section? I don't quite understand those two examples.
Sure. Here's a different example, from our course website:
```
h1, h2, h3, h4, h5 {
    color: #199EC8;
}
```
means the same thing as:
```
h1 {
    color: #199EC8;
}
h2 {
    color: #199EC8;
}
h3 {
    color: #199EC8;
}
h4 {
    color: #199EC8;
}
h5 {
    color: #199EC8;
}
```
But the former is more concise and consistent. Plus, it's five times easier to change the color of header elements.
Further explanation of structural selectors would be helpful.

They are useful when you want something's appearance/style/presentation to depend on its context: where in the document tree it is.
E.g. links in the NAV bar, versus in paragraphs
E.g. EM in the H2 elements, versus in paragraphs
E.g. paragraphs in an ASIDE element, versus in an ARTICLE
E.g. LI elements that are first versus subsequent (not-first)
I still don't really understand the difference between a child and a descendant. Does child just mean it's directly inside the parent vs descendants being anything like grandchildren and grand-grandchildren too?

Yes. The document tree is just like a family tree. The notion of parent/child is created went one element is directly inside another, like this P is a child of the DIV.ANS, which is a child of LI, making this P a grandchild of the LI.
So this P is a descendant of the LI, but it is not a child.

I'll draw the HTML on the board.
Just to clarify, are descendant elements those that don't have a direct parent-child relationship?

Correct, but there is a chain of parent-child relationships that create an ancestor-descendant relationship.
I would like to talk more about the difference between + and ~ for structural selectors.

It's a little similar. + means immediately prior sibling, while ~ means some prior sibling.

Please give an example on cases we would use A + B and A > B.

We'll see + today!

As for >, that's useful when, say, you have nested bullet lists, and you want to control one set of LI elements, but not all:


    <ul class="outer">
        <li>first menu
            <ul>
                <li>A
                <li>B
                <li>C
            </ul>
        </li>
        <li>second menu
            <ul>
                <li>D
                <li>E
                <li>F
            </ul>
        </li>
    </ul>

Now, consider a rule like this:


    .outer LI { list-style-type: disc; }
    .outer > LI { list-style-type: square; }

Please explain what does <code> mean inline. Thank you!

The code tag changes the font to a monospace, typewriter-like font that looks like computer code. I used it in the previous sentence around the word code.
Of course, that's presentational information. The meaning or the code tag is that the contents are computer code or something similar to that. It's the job of CSS to change the font, background color, etc.
can you talk more about pseudoclasses?
Sure. There are a bunch. See MDN pseudo-classes for a long list
- :hover for when you hover over an element
- :first for the first element in a set. E.g. first LI
- :link for links that are not yet visited (default is blue)
- :visited for links that have been visited (default is purple)
RGB notation is preferred for transparency, but for the other notations (name, hex value), are there times you would use one over the other?
Great question. I've learned that the newest syntax is to use a slash after values separated by spaces:
```
color: rgb(34 34 34 / 50%);
background-color: hsl(210 30% 96% / 80%);
border-color: rgb(0 0 0 / 20%);
```
Use whatever you like; they all work.
What's the point of adding font definitions in a second CSS file? I tried adding a font definition to my original CSS file and it seemed to work fine.

Yes, you are right. It does work.
My reason is modularity and avoiding/reducing clutter. This website has five CSS files, but I could concatenate them and just use one.
Currently no, thanks!

Great!