Theory
Theory

Cascade

Now we have come to one of the most important mechanisms within CSS: the cascade. This is what the “C” in the abbreviation “CSS” (Cascading Style Sheets) stands for.

When the browser renders a page, it must determine the final appearance of each HTML element. To do this, it collects all of the CSS rules that apply to each element, because, after all, several CSS rules can affect the element at the same time. For example:

<p class="beloved-color">Green is my favorite color</p>

This element may be simultaneously influenced by the CSS rules for the tag p and the class beloved-color from our styles. Indeed, even the CSS rule for the p tag from the browser’s default styles affects this element.

After all the rules for an element are collected, the browser combines all of the properties from these rules and applies them to the element. If the following bit of code exists in our styles:

p { font-size: 14px; }
.beloved-color { color: green; }

then our paragraph about color will be assigned the following final set of properties and values:

font-size: 14px; /* From the rule for p in our styles */
color: green;    /* From the rule from .beloved-color in our styles */
margin: 1em 0;   /* From the rule for p in browser styles */

This mechanism, which is used to combine styles from different sources into a final set of properties and values for each tag, is called cascading.

Let’s continue to determine the design of the list of skills, and at the same time let’s apply the cascade.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav class="blog-navigation"> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is offended at me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or more precisely night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> <li><a href="day-12.html">Day Twelve. Everyone loves cookies</a></li> <li><a href="day-13.html">Day Thirteen. I found an article</a></li> <li><a href="day-14.html">Day Fourteen. A New Format</a></li> <li><a href="day-15.html">Day Fifteen. The Selfie Gallery</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> <h2>Skills</h2> <dl class="skills"> <dt>HTML</dt> <dd>60%</dd> <dt>CSS</dt> <dd>20%</dd> <dt>JS</dt> <dd>10%</dd> </dl> </section> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } .blog-navigation h2 { margin-top: 0; } .blog-navigation ul { list-style: none; padding-left: 0; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } /* Uncomment this rule and add properties to it */ /* .skills dd { background-color: #e8e8e8; } */ footer { margin-top: 30px; }

Goalscompleted

Uncomment the rule with the .skills dd selector in the styles.
Add the composite margin property with the value 0 to this rule.
Below the margin property add the margin-bottom property with the value 10px, which overrides the bottom margin.

Cascade

Log in

Sign up

Restore access