×
Course: CSS Basics

Cascading [9/15]

We know that CSS stands for Cascading Style Sheets. But why actually are they called cascading?

The point is, that styles for an element can be defined in several places: in a single style file or in different style files.

The browser finds all CSS rules affecting a given element; after that, it combines them to result in the final list of properties for this particular element. Property combination is based on strict rules dependent on priority and specificity.

The word "cascading" points at the above-mentioned mechanism of combining styles from different CSS rules.

In this task, you will combine styles for a single paragraph.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cascading</title> </head> <body> <h1>Cascading and Enlightenment</h1> <p>Cascading is a very powerful mechanism.</p> <p>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 { outline: 2px solid rgba(0, 0, 0, 0.1); } .truth { }
HTML Academy
  1. To the CSS rule for the p tag, add property padding: 10px;.
  2. Add to the CSS rule for the truth class, property background-color: #dff0d8;.
  3. In the HTML Editor, add the truth class to the second paragraph.
Theory Check Next