Intermediate HTML & CSS

Specificity & Inheritance Exercise

Jen Kramer

Jen Kramer

AnnieCannons
Intermediate HTML & CSS

Check out a free preview of the full Intermediate HTML & CSS course

The "Specificity & Inheritance Exercise" Lesson is part of the full, Intermediate HTML & CSS course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to explain the CSS rules and calculate the specificity of each rule.

Preview
Close

Transcript from the "Specificity & Inheritance Exercise" Lesson

[00:00:00]
>> Now it's time for you to do your own work with specificity and inheritance. And, I have an exercise here for you you're actually not going to write any code at all. What I would like for you to do this is the same HTML that we just worked with previously.

[00:00:16]
What I'd like for you to do is to look at the CSS and do the following. First of all I'd like you to calculate the specificity of each of the selectors that you see here in the list. And then the second thing I'd like for you to do, is to explain why the page looks the way it does.

[00:00:33]
So for example if we start with a footer, I would say that the specificity is 001, and that the color is pink because if you take a look at the footer down here at the bottom, you'll see that references, the bullets, and the numbers are all pink. From that style, but the links are still taking on the styling that comes from the default browser stylesheet that colors unvisited links in blue and underlined.

[00:01:01]
And of course the font is coming from the body element. So, that is what I would like for you to do now, and when you come back I will explain all of these to you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now