Quiz

1. Is all the CSS written inside the HTML file, or would it be written in a separate file

   Actually, the CSS is written in a different file. (It can be written in the HTML file, but it's considered best practice not to, as with Ottergram.) But the classes go in the HTML file to label elements.

2. Is there something comparable to the box model for inline elements?

   The box model applied to both, but certain values (width, for example) are ignored for inline elements. Weird, but true. That's why inline-block was invented.

3. id tags vs other types of tags - how to use them to select items

   ID is an attribute, not a tag. So:

   
   <figure id="fred" class="gryffindor">Fred Weasley</figure>
   <figure id="george" class="gryffindor">George Weasley</figure>
   <figure id="luna" class="ravenclaw">Luna Lovegood</figure>
   
   

   Now consider the following rules:

       
           figure { border: 2px solid black; border-radius: 0.5em }
           .gryffindor { color: red; background-color: gold; }
           #fred { font-style: italic; }
   
   

   With the following result:

   Fred Weasley

   George Weasley

   Luna Lovegood

4. In what situation do we use tag selector?

   When we want a rule to apply to every element that uses that tag. For example, every LI or every NAV.

   But we often want to be more specific, so we use class or (rarely) ID.

5. Selectors and Ids , is there a quick way to understand them

   A selector chooses a set of elements to apply the rule to. An ID is just one kind of selector.

6. More clarification on class vs id please

   Above, there's only one Fred, but there are multiple Gryffindors.

   A class is like a category or a label. It can be applied to more than one thing.

   An ID should be unique.

7. Could you share examples of how more than one style can be applied to something and how it would appear on a browser as a result?

   Look at the formatting of #fred, above.

8. When to use what unit for images and whatnot. Is there an option that is always better and should be used a majority of the time?

   We almost never use inches, unless we are formatting something for printing.

   EM is used when we want something to adjust with the font size; often a good idea

   PX is often used for narrow things, like borders and padding.

   percentages are used for big things, like MAIN or SECTION, or FIGURE or IMG

9. Difference between em and rem

   EM might differ from place to place because of inheritance. If you don't want that, use REM.

   So, 2em is twice as big as an EM. Nest those, and you get 4EM.

   But 2rem will always be the same size.

10. What does this mean?

    This rule happens to apply to the hyperlinks that surround each picture. (You can look back at the HTML to see all the elements that are class=""thumbnail-item-a"".)

    I am confused about the content after the =

    Let's look back at the HTML for this: Ottergram HTML

11. Also confused about how inline-block works, how display: inline-block works, and how display: list-item works" / Difference between & more practices on block, inline-block, and inline

    These are confusing! Originally there was just BLOCK (big boxes) and INLINE (word-like things that go in paragraphs).

    But INLINE-BLOCKS were added to create things that flow like words, but have width, containing block content.

12. A bit confused on the purpose of normalize.css, what does it mean when it says ""to have a consistent basis for styling pages""? Why would we need this? I thought stuff like class would take care of styling consistency, unless I'm misinterpreting this?

    Turns out browser have different defaults. For example, one browser might have a default margin for BODY of 8px, while others have a default of 0px.

    If you want your website to look the same on all browser, you have to decide all those things, to make them consistent.

    Normalize does that for you.

13. can we talk more about why some people don't like ids and what the benefits of using them are?

    Personal preference. There's no requirement that a class apply to only one thing, so you can create a class and apply it to just one thing, just like with an ID.

    But ID is useful in that (1) you can use them for hyperlinks, (2) it tells other programmers that something is unique, and (3) ID rules have precedence over class rules.

14. Could we have more practice with the CSS rules and just overall review over the syntax?

    We'll do some practice today and over the next few weeks!