Quiz

1. Can you talk a bit more about how rules accumulate?

   Sure. Here's an example from these very notes and readings:

   
   h1, h2, h3, h4, h5 {
       color: #199EC8;
   }
   
   h2 {
       border-top: 1px solid #199EC8;
   }
   
   

   After reading these two rules, the H2 elements have been styled in terms of both color and border.

   In general, you add more and more rules to your CSS file(s) until things look the way you want. If they conflict:

   • Later things override earlier things (as we just saw)
   • more specific rules override more general rules (say, classes over tags)

   as an example of the latter, these answers are in a DIV. But I also addeded a class:

   
   
   .ans {
       border: 2px solid teal;
       padding: 1ex 1em;
       font-weight: normal;
   }        
   
   

2. Explain more about the selectors, you are just able to create your own class and ID using selectors?

   Yes, that's right. I just decide on a name (such as ans) and use it in the HTML and the CSS.

3. When the border is invisible (width zero) which is preferable to use for adjusting spacing - margin or padding? Is there any reason to use one over the other?

   Great question! There are two subtle but important differences:

   1. padding gets background color but margins don't.
   2. stacked margins can have "margin collapse" where the distance between two borders is the MAX, not the SUM of the two margins.

   
   p { margin-bottom: 20px; }
   h2 { margin-top: 30px; }
   
   

   The distance is 30px, not 50px.

   Padding never collapses.

   Note that margin collapse is not a bug. It's part of the language because that's what people typically want. But maybe not always.

4. What's the point of doing "text-decoration: none"? Wouldn't the default be no decoration?

   Yes! Good thinking!

   However, hyperlinks have underlining by default, so you might want to remove that. Or, maybe some earlier or more general rule has added an underline, and you want to override that.

5. I'm still a little confused about the widths of padding?

   How so? Let's play with the dev tools here, and hopefully it'll be more clear.

6. Is there a way to write the code more efficiently (using a loop?) for elements we will use multiple times on the page?

   Yes! Later in the course, we'll learn how dynamically add elements, and if we wanted/needed to add multiple elements (e.g. we just fetched a bunch of new posts from some database in the cloud), a loop or mapping operation would be the right idea.

7. No questions, but I think it's so cool to finally learn how to access a certain area in a page!!

   You mean hyperlinking with a ID? Yes, I agree, that's pretty cool. I love having a table of contents.

8. No questions about the content this time! Just one question about the exam: are we expected to remember the listed CSS properties?

   Some, but not all. In general, I don't think memorization is a useful thing in a world where web search is always handy.

   However, part of the definition of expertise is not having to look everything up. Some things you just know, from experience.

   You'll practice certain ones in assignments and such, and so you'll get to know those.

   Maybe I'll allow folks to bring in self-created reference material into the exam.