Skip to content
Laviyx Learn

Try

CSS Selectors and Box Model Practice

Practise CSS selectors, specificity, colours, units and the box model by styling given HTML. Each solution is rendered live next to the HTML it styles.

Beginner6 problemsUpdated

Review first: Selectors, Combinators, Pseudo-classes, Cascade, Specificity and Inheritance, The Box Model, Margin and Padding

  1. 1.Classes and element selectors

    Beginner

    Make all paragraphs dark grey (#333) with a line height of 1.6, give paragraphs with the class note a pale yellow background and 8px padding, and make the element with the id title navy.

    HTML to style (HTML)
    <h1 id="title">Notice board</h1>
<p>Classes start on Monday.</p>
<p class="note">Bring your own laptop.</p>
<p>Lunch is provided.</p>
    Show hint

    Element selector p, class selector .note, id selector #title.

    Show solution
    CSS
    p {
  color: #333;
  line-height: 1.6;
}
.note {
  background: #fff8c4;
  padding: 8px;
}
#title {
  color: navy;
}
    Result

  2. 2.Combinators

    Beginner

    Without adding classes: make links inside the nav white with no underline, give only the direct li children of .menu a right margin of 12px, and make the paragraph directly after each h2 italic.

    HTML to style (HTML)
    <nav style="background: #1d3b4f; padding: 8px">
  <ul class="menu" style="list-style: none; display: flex; margin: 0; padding: 0">
    <li><a href="#">Home</a></li>
    <li><a href="#">Courses</a></li>
  </ul>
</nav>
<h2>About</h2>
<p>This paragraph follows the heading.</p>
<p>This one does not.</p>
    Show hint

    Use a descendant selector (space), a child selector (>) and an adjacent sibling selector (+).

    Show solution
    CSS
    nav a {
  color: white;
  text-decoration: none;
}
.menu > li {
  margin-right: 12px;
}
h2 + p {
  font-style: italic;
}
    Result

  3. 3.Hover and focus states

    Beginner

    Style the button with a blue background, white text, 10px 18px padding, no border and 8px rounded corners. Make it darker blue on hover, and give it a visible orange outline when focused with the keyboard.

    HTML to style (HTML)
    <button class="btn">Enrol now</button>
    Show hint

    Use :hover and :focus-visible, and outline-offset to separate the outline from the button.

    Show solution
    CSS
    .btn {
  background: #2f5fe0;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
}
.btn:hover {
  background: #1f45b0;
}
.btn:focus-visible {
  outline: 3px solid orange;
  outline-offset: 2px;
}
    Result

  4. 4.Structural pseudo-classes

    Beginner

    Give every even list item a light grey background, make the first item bold, and add a dashed bottom border to every item except the last.

    HTML to style (HTML)
    <ul class="list" style="list-style: none; padding: 0">
  <li>Notebook</li>
  <li>Pen</li>
  <li>Eraser</li>
  <li>Ruler</li>
</ul>
    Show hint

    Use :nth-child(even), :first-child and :not(:last-child).

    Show solution
    CSS
    .list li {
  padding: 6px 10px;
}
.list li:nth-child(even) {
  background: #f1f3f5;
}
.list li:first-child {
  font-weight: bold;
}
.list li:not(:last-child) {
  border-bottom: 1px dashed #bbb;
}
    Result

  5. 5.A card with the box model

    Beginner

    Style .card so that with box-sizing: border-box it is exactly 280px wide, has 20px padding, a 1px light grey border, 12px rounded corners, and 16px of space below it. Center it horizontally.

    HTML to style (HTML)
    <div class="card">
  <h3>Weekend workshop</h3>
  <p>Build a portfolio website in two days.</p>
</div>
<p>Text after the card.</p>
    Show hint

    margin: 0 auto 16px centers a block with a width and adds space below.

    Show solution
    CSS
    .card {
  box-sizing: border-box;
  width: 280px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  margin: 0 auto 16px;
}
.card h3 {
  margin-top: 0;
}
    Result

  6. 6.Fix a specificity problem

    Intermediate

    The link below should be green when it has the class active, but the existing rule #sidebar a { color: grey; } wins. Without using !important and without changing the HTML, write a rule that makes the active link green.

    HTML to style (HTML)
    <style>
  #sidebar a { color: grey; }
</style>
<div id="sidebar">
  <a href="#">Lessons</a><br>
  <a href="#" class="active">Practice</a>
</div>
    Show hint

    #sidebar a has specificity (1, 0, 1). Your selector needs at least the same id and something more.

    Show solution
    CSS
    #sidebar a.active {
  color: green;
  font-weight: bold;
}
    Result

    #sidebar a.active has specificity (1, 1, 1), which beats (1, 0, 1). A better long-term fix is to avoid id selectors for styling, so that simple class selectors are enough.

← All practice setsLearn CSS course →