Quiz 2 CSS

2. Quiz 2 CSS#

  1. Consider the following HTML and CSS code snippets. How will the text “Hello, User!” be displayed based on CSS specificity and inheritance rules?

    <div id="container" class="main-content">
  <p class="description" id="intro-paragraph">Welcome to the website!</p>
  <span class="highlight special" id="greeting-text" data-info="hello">Hello, User!</span>
</div>

    span {
  color: blue;
  display: inline-block;
  font-size: 14px;
}

#container #greeting-text {
  color: green;
  font-size: 30px;
}

#greeting-text[data-info="hello"] {
  color: purple;
  font-size: 20px;
}

.main-content > #greeting-text::first-letter {
  color: red;
  font-size: 10px;
}

#container .highlight[data-info="hello"] {
  color: orange;
  font-size: 16px;
}

    To verify your answer at https://codepen.io/Yong-Zhuang/pen/yLdwRLP.

Given the following DOM tree, please write the CSS selectors using possible expressions to target the specified text nodes. You may appropriately use pseudo-classes such as :first-child, :last-child, :nth-child, :first-of-type, etc.

<body>
  <h1>One</h1>
  <p class="gv">
    <b>Two</b><span><b>Three</b><b>Four</b></span>
  </p>
  <div>
    <ol id="fv">
      <li>Five</li>
      <li>Six</li>
    </ol>
  </div>
  <h1 id="me">Seven</h1>
  <p>
    <span><b>Eight</b></span>
  </p>
  <ol>
    <li>Nine</li>
    <li>Ten</li>
    <li>
      <ol>
        <li>Eleven</li>
        <li>Twelve</li>
      </ol>
    </li>
  </ol>
</body>

To verify your answer, use the following CSS code on the online platform CodePen at https://codepen.io/Yong-Zhuang/pen/PoXRBWy:

your-css-selector {
  color: red;
}

Example Question

  • Only Node “one” should be selected:

  • Answer: h1:first-child or h1:first-of-type

  1. Only Node “Two” should be selected:

  2. Only Node “Three” should be selected:

  3. Only Node “Six” should be selected:

  4. Only Node “Eight” should be selected:

  5. Only Node “Ten” should be selected:

  6. Only Node “Twelve” should be selected:

  7. You UI design team has decided on the following layout for the front page of your web app:

    • The height of the top navigation is 40px

    • The height of the app status and notification messages is 60px

    • The left and right panel take 25% of the width each

    • The app status and notification message panel takes 50% of the width each

    dom

    Using the HTML provided below, apply CSS and the CSS Grid layout to replicate the design shown in the image above. To verify your solution, use the online platform CodePen at https://codepen.io/Yong-Zhuang/pen/XWoqgVK.

    <body>
  <div id="container">
    <div id="top-nav"></div>
    <div id="left-panel"></div>
    <div id="right-panel"></div>
    <div id="main-panel"></div>
    <div id="app-status"></div>
    <div id="notification"></div>
  </div>
</body>