Front-end quizzes

1. Conflicting Style Sheets
2. Cansei de Ser Sexy
3. Cascading Style Sheets
4. Court Side Seats

1. property { selector: value; }
2. value { selector: property; }
3. selector { value: property; }
4. selector { property: value; }

1. declaration
2. selector
3. specificity
4. cascade

    p { color: blue; }
    p { color: red; }

1. blue
2. red
3. purple
4. black

1. Magic
2. Inline Styles
3. External Style Sheet
4. Science
5. Internal Style Sheet
6. Prayer
7. Cascading

1. #foo { color: #000; }
2. .foo { color: #000; }
3. foo > bar { color: #000; }
4. foo bar { color: #000; }

1. As many as needed
2. 10
3. Five
4. One

1. child combinator
2. descendant selector
3. id selector
4. class selector

    <p class="one" id="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis augue, sollicitudin vel dapibus sit amet, mollis condimentum est. Etiam et suscipit massa. Praesent at lacus elit, vitae lobortis ligula. In ac convallis diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros sapien, interdum sit amet sollicitudin nec, consectetur ornare tellus. Nam fermentum mollis aliquam. Nullam ut sem in lacus feugiat commodo. Maecenas fermentum, felis luctus vulputate vehicula, magna ligula sollicitudin justo, at ornare est nulla vitae quam. Mauris nec diam metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tincidunt purus ac ipsum porttitor adipiscing.</p>

    <p class="two" id="blue">Aliquam laoreet eleifend semper. Nulla faucibus orci sit amet tellus feugiat id elementum libero mollis. Proin diam mauris, iaculis in sodales id, vestibulum accumsan enim. Sed eu leo est, sit amet sodales nulla. Ut facilisis massa non turpis ornare luctus. Sed vestibulum adipiscing pellentesque. Pellentesque porttitor placerat mattis. Donec felis leo, semper elementum mollis a, volutpat in dolor. Sed nec ante ac arcu vulputate pretium. Nunc egestas leo non neque fringilla non scelerisque lacus sodales. Aenean sit amet laoreet velit. Donec elementum, libero quis eleifend consequat, erat arcu interdum augue, vitae dapibus lacus est imperdiet mi.</p>

1. .one { color: red; }
2. #red { color: red; }
3. p { color: inherit; }
4. p + p { color: red; }

1. True
2. False

1. 1, 0, 3, 1
2. 0, 1, 3, 1
3. 0, 3, 1, 1
4. 0, 1, 1, 3

1. 0, 2, 2, 4
2. 0, 2, 4, 2
3. 0, 4, 2, 2
4. 4, 0, 2, 2

    p#foo a#bar { color: red; }
        
    <p id="foo">Lorem ipsum dolor <a href="foo.html" id="bar" style="color: blue;">sit amet</a>, consectetur adipiscing elit. Quisque egestas venenatis dui, consectetur convallis dui venenatis ac. Nullam non lacus eu libero tristique pretium</p>

1. purple
2. red
3. black
4. blue

Using the !important declaration basically adds another level higher of specificity.

.foo { color: black !important; } would be equal to 1, 0, 0, 1, 0.

1. using !important
2. using the same selector with !important
3. using !important inline
4. using the universal selector (*) with !important

1. the highest
2. the lowest
3. the prettiest
4. whatever it takes to get the style to render correctly

    .red { color: red; }
    p { color: blue; }
    
    <p class="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla odio et ante vehicula ac posuere neque venenatis. Maecenas tortor quam, mollis viverra blandit non.</p>

1. red
2. blue
3. purple
4. black

    ul#foo { color: red; }
    ul {color: blue; }
    
    <ul id="foo">
        <li>Item</li>
        <li>Item</li>
    </ul>
    
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>

1. The type (element) selector will have the same result
2. The cascade will override the id
3. Not reusable – if you later change elements it will not render correctly
4. Increased specificity
5. Red is a poor color choice
6. Decreased performance – the browser reads right to left

    <ul>
        <li><a href="foo.html" id="foo" class="foo">Foo link</a></li>
        <li><a href="bar.html">Bar link</a></li>
    </ul>

1. .foo { color: red; }
2. #foo { color: red; }
3. ul > li > a { color: red; }
4. ul li a { color: red; }
5. ul > li:first-child > a { color: red; }

    <ul>
        <li><a href="foo.html" id="foo" class="foo">Foo link</a></li>
        <li><a href="bar.html">Bar link</a></li>
    </ul>

1. .foo { color: red; }
2. #red { color: red; }
3. ul > li > a { color: red; }
4. ul li a { color: red; }
5. ul > li:first-child > a { color: red; }

1. five
2. 10
3. two
4. 100
5. 256

1. creates more properties to inherit/override in the cascade
2. to be verbose and explicit
3. only need a few properties
4. like typing more