CSS - Basic CSS Part 2

May 27, 2026 3:00pm UTC (Check your timezone)

Theory Review Quiz

Instructors: Jess, Carmen, and Eda

Basic CSS

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

CSS Specificity, the Cascade Algorithm, and Inheritance: What Is CSS Specificity, and the Specificity for Inline, Internal, and External CSS?

When multiple styles are applied to an element, we need to determine which one comes first. This is where CSS specificity comes in.

CSS specificity is determined based on the type of selectors.

We can think of calculating specificity as a four-part value (a, b, c, d).

(You might usually see this as a three-column comparison, but we’ll stick with four-part value for now.)

Each value can be either 1 or 0. The weight (importance) of values goes from left to right (from a to d).

Inline styles have the highest specificity…

1<p style="color: purple">…</p>

…therefore, they are the value a, and contributes 1 to the total value.

The number of ID selectors is b, it contributes 1 to the value.

The number of class selectors, attribute selectors, and pseudo-classes is c, it contributes 1 to the value.

The number of type selectors, pseudo-elements, and universal selectors is d, it contributes 1 to the value.

Since universal selectors have the lowest specificity, they only contribute 0 to the value.

This might sound a little complicated, so let’s look at an example. Given this HTML:

1<body class="bodyClass">
2  <section class="sectionClass">
3    <div class="parentClass">
4      <p id="myElement">Hey!</p>
5    </div>
6  </section>
7</body>

Instead of using all the classes and an attribute selector, selecting the p element by ID will have a higher specificity:

1#myElement {
2  color: green; /* 0-1-0-0  - WINS! */
3}
4.bodyClass .sectionClass .parentClass [id="myElement"] {
5  color: yellow; /* 0-0-4-0 */
6}

CSS example from MDN (adapted for four-part specificity).

Internal CSS and external CSS have the same level of specificity, it’s determined by the number of selectors.

Also, because of the cascading nature of CSS, if two rules have the same specificity, the one that appears later in the document wins.

CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the Universal Selector, and What Is Its Specificity?

The universal selector (*) matches any element in the document.

It can be useful to reset styles because we can apply a style to all elements on the page with it.

A common use is setting the margin and padding to 0 for the whole document:

1* {
2  margin: 0;
3  padding: 0;
4}

It comes as the lowest in the specificity hierarchy and contributes 0 to the specificity value, which means that any selector will override the styles set by a universal selector.

Let’s say there exists only a p element in our HTML:

1<p>Hey!</p>

Using the universal selector to change its color will work…

1* {
2  color: green;
3}

…but it will be overridden by any selector:

1* {
2  color: green;
3}
4
5p {
6  color: purple; /* WINS */
7}

CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the Specificity for Type Selectors?

Type selectors are used to select elements based on their tag name and have the lowest specificity compared to most other selectors.

CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the Specificity for Class Selectors?

Class selectors are used to select elements that have the same class name, and while they have higher specificity than type selectors, they have lower specificity than ID selectors and inline styles.

CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the Specificity for ID Selectors?

ID selectors are used to select elements that are guaranteed to be unique, and they have the highest specificity among selectors. But, since they have lower specificity than inline styles, they will be overridden by them.

CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the important Keyword, and What Are the Best Practices for Using It?

The !important keyword forces the browser to apply a specific style, disregarding the specificity value.

It means that even the inline styles can be overridden!

 1<head>
 2  <style>
 3    p {
 4      color: green !important;
 5    }
 6  </style>
 7</head>
 8<body>
 9  <p style="color: purple;">Hey!</p> <!-- This will be green! -->
10</body>

It doesn’t change the specificity value of the selector, but just ensure that the style is applied.

We should avoid using it as much as possible because it can cause unintended behavior or difficulties in maintaining our CSS.

CSS Specificity, the Cascade Algorithm, and Inheritance: How Does the Cascade Algorithm Work at a High Level?

Browsers use the Cascade Algorithm to determine which CSS rules to apply when there are multiple styles for the same element.

The process of the Cascade Algorithm goes like this:

  1. The browser finds styles that apply to the element by filtering out other rules. (relevance)
  2. The origin source is considered. It can be the browser’s default styles (user-agent), styles set by the user, and the styles written by the author. (origin)
  3. The importance of each rule is evaluated. Priority is given to the rules with the !important keyword. (importance)
  4. The rules are applied according to specificity. (specificity)
  5. If the rules have the same specificity, styles are applied based on the order of appearance of the rule. The rule that comes later is applied. (order of appearance)

CSS Specificity, the Cascade Algorithm, and Inheritance: How Does Inheritance Work with CSS at a High Level?

Child elements can inherit certain properties from their parent elements. Some properties are inherited by default, such as color, font-family, line-height, etc.

Properties such as margin, padding, border, and background are not inherited by default. To inherit these styles, we have to use the inherit keyword on a child element.

Inheritance is useful for reusability and consistency. For example, instead of defining the same style for multiple child elements, we can define it once for the parent element and let the children inherit it.

CSS Fundamentals Review

We’ve been learning a lot of CSS fundamentals, and these are the topics we’ve seen so far: