Add Backgrounds to HTML Elements

The background-* properties let you create and customize backgrounds for HTML elements.

The background-color property adds a pure-color background. This is a commonly used method for drawing users' attention to specific parts of a webpage.

For instance, you can highlight certain columns or rows in a table by specifying background colors.

html

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th class="highlight">Occupation</th>
    <th>Country</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td class="highlight">Software Engineer</td>
    <td>USA</td>
    <td>john.doe@example.com</td>
  </tr>
  . . .
</table>

css

table {
  border-collapse: collapse;
}
 
table,
th,
td {
  border: 1px solid;
}
 
.highlight {
  background-color: bisque;
}

Zebra stripping is another common table styling technique.

Instead of micromanaging individual rows, you can simply use the :nth-child pseudo-selector.

html

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
    <th>Country</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>Software Engineer</td>
    <td>USA</td>
    <td>john.doe@example.com</

css

table {
  border-collapse: collapse;
}
 
table,
th,
td {
  border: 1px solid;
}
 
tr:nth-child(even) {
  background-color: bisque;
}

By passing the parameter even, the styling will be applied to all even-numbered rows of the table.

Color backgrounds are also frequently combined with the :hover pseudo-selector to add more interactivity to the webpage.

For instance, when the cursor hovers over the table, the corresponding row is highlighted:

css

table {
  border-collapse: collapse;
}
 
table,
th,
td {
  border: 1px solid;
}
 
tr:nth-child(even) {
  background-color: bisque;
}
 
tr:hover {
  background-color: orange;
}