Module quiz: Interactive CSS

Module quiz: Interactive CSS

  1. Which of the following describes the CSS selector [href~="dog"] ?

    • Select all elements with the href attribute where the value starts with the word dog

    • Select all elements with the href attribute where the value ends with the word dog

    • Select all elements with the href attribute where the value contains the word dog

  2. If you modify the second CSS selector mentioned to ‘div + p’ with the properties remaining the same, which of the <p> tags will have a change in color? Select all that apply.

     <div>
        <p>alpha</p>
     </div>
     <p>beta</p>
    
     div p {
          color: red;
     }
     div p {
          color: blue;
     }
    
    • Both alpha and beta

    • Neither alpha nor beta

    • Only alpha

    • Only beta

  3. Which of the following CSS selectors is suitable for selecting an element that is a child of another element? Select all that apply.

    • Descendant Selector

    • Pseudo-class Selector

    • Child Selector

  4. True or false. The following CSS code will change the color of paragraph elements to red.

     /*
     p { color: red; }
     */
    
    • False

    • True

  5. An element with the property set as ‘position: fixed' is placed relative to the parent (or ancestor) element, not the viewport.

    • True

    • False

  6. Select the CSS units of measurement that are directly related to the viewport’s measurement. Choose all that apply.

    • vh

    • vw

    • vb

    • vi

  7. Which of the following ARE a part of the grid shorthand property? Select all that apply.

    • grid-area

    • grid-template-areas

    • align-self

    • grid-auto-flow

  8. Which of the following rules inside the @keyframes is valid code for moving an item by 100px from top to bottom, assuming elements have an absolute position. Select all that apply.

    • from {top:0px;} to {bottom:100px;}

    • from {top:0px;} to {top:100px;}

    • None of the above

    • from {bottom:100px;} to {bottom:0px;}

  9. @mixin and @includes are NOT REQUIRED to be used inside which of the following?

    • Stylus CSS

    • SASS

    • SCSS

  10. You're developing a website and the customer has reported that the website doesn't display correctly in their web browser. Which of the following will help you to investigate the issue? Select all that apply.

    • Install and use a linter

    • Review CSS selectors used and ensure that they are more specific

    • Inspect the element using the browser developer tools