Quiz

This might be outside the scope of this course, but I thought the primary colors are red, blue, and yellow--why red, blue, and green?

The difference is between additive and subtractive colors. Light versus paint. Primary Colors of Light - Mixing of Colors
why is transparency 0.8 on white color instead of 1?

That was just Ottergram's choice. It means that 20% of the background color will show through. transparency

can we talk more about child vs. descendant selectors/how it's used in the context of the code?

Sure. My favorite example is hyperlinks in the nav bar:



    <nav>
        <ul>
            <li><a href="home.html">home</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="contact.html">contact us</a></li>
            <li><a href="buy.html">Shop</a></li>
        </ul>
    </nav>

To style all of those, we could do:


nav ul {... }
nav li {... }
nav a { ... }

Or, we can add classes to all of them. But that's a lot more clutter.

The descendent system and syntax for IDs/classes.
NAV A means a hyperlink (an A element) that is a descendant of a NAV element.
Classes are done with dots and IDs with hashtag:
```
.optional {... }
.important li {... }
.minor { ... }
#table_of_contents { ... }
#copyright_notice { ... }
```
When is it helpful to select using inheritance?

When that's a clear and succinct way of describing the set of elements.
You could always give each element a unique ID and then style it using #id, but that would be tedious beyond belief, and would not generalize well.
When positioning IDs in the url, is it possible to point to more than one element on a webpage with the help of the IDs or is it limited to only one?

The browser can only scroll to one place, so you can only put one ID in the URL.
More explanation on the /foo#bar question. (A URL that ends like /foo#bar means)

Sure. A hyperlink has the structure https://machine.domain/path/to/file#id where the #id is optional.
Can you please go over LI LI vs LI + LI when selecting everything except the LAST element?

LI LI means an LI that is a descendant of an LI. So, only with nested lists.
LI + LI means an LI that immediately follows another LI. So LI + LI is every LI except the first one.
I don't know of a simple rule for every element except the last, but there might be some clever trick, maybe involving :last-child and :not
Does UL .lorem point to every element in the class lorem but will those elements be direct children of UL or descendants? Is there a difference for that or do we deal with it similarly to UL> .lorem.

UL .lorem is any .lorem descendant of a UL.
UL > .lorem is any .lorem that is a child of a UL.
Children are a subset of descendants: every child is a descendant, but not every descendant is a child. For example, grandchildren are descendants, but they are not children.
Could you also give a clear difference between LI + LI and LI ~ LI. / Can you explain the difference between A+B selector and A~B selector?

In a proper, valid, HTML file, all the LI elements will be siblings and all their siblings will be LI elements. In which case, there's no difference.
So, let's talk about a SECTION that has children: H2 P P BLOCKQUOTE P P
Now, consider the selectors P + P versus P ~ P
Can you show how A + B and A ~ B are indicated in the structure of the HTML code? Can ""B"" be multiple elements or just one element? Thus, for question 2 in the quiz, would it be possible that the answer to be LI~LI?

The B can only be a single selector (tag, class).
Yes, for question 2, LI ~ LI would also work (but it wasn't an option).
Is there an A - B format of structural selector or ""-"" would only be used to name a class/id

Right, there's no hyphen structural selector. You can use them (without spaces) in your class names.
Could you go over A>B, A B, A+B?

Let's draw a picture
More on pseudo classes and spacing.

There are a bunch of pseudo-classes. We're just learning about :hover. It means the mouse is hovering over the element.
For spacing we are using margin-top, which is the distance above the element.
On the interactive demonstration part , the h2,p and ol are they all parents of li?

Let's do a VIEW SOURCE together: interactive demo
I need a little bit more practice with the A > B, A B, A + B, and A ~ B -- I didn't fully understand questions 1 and 2, specifically how to apply them.

Maybe the interactive demo will help.
- Shall we create a css file every time we want to design a website? (Since we can also directly do it on the html right?

Yes. That allows sharing of CSS code.
- I am still confused about the revised version, can we talk more on that?

revised