×
Course: CSS Basics

Cascading. Override Styles [10/15]

In the previous example, we used a class to add more styling to the second paragraph. Both our CSS rule for paragraphs and our CSS rule for the class contained a single property. When we have added a class to the second paragraph, its set of styles has got two properties. It looks like this:

p {
  padding: 10px;
}
       +
.truth {
  background-color: #dff0d8;
}
       =
styles for the second paragraph {
  padding: 10px;
  background-color: #dff0d8;
}

Here we have combined CSS rules with different properties. And what would happen if we combine rules with identical properties? Let's check it right now.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cascading. Override Styles</title> </head> <body> <h1>Cascading and Enlightenment</h1> <p>Cascading is a very powerful mechanism.</p> <p class="truth">A web developer who has learned the secrets of cascading becomes an enlightened master of web coding.</p> <p>A web developer who is not seeking to understand cascading will stay an apprentice forever.</p> </body> </html>
CSS
p { padding: 10px; outline: 2px solid rgba(0, 0, 0, 0.1); } .truth { }
HTML Academy

Set the background color for the CSS rules as in the previous task.

  1. First, for all the p tags set the background color of #dff0d8.
  2. Then, for the truth class, set #aaddff as the background color.

See what has happened to the color of the second paragraph as a result of the task.

Theory Check Next