# Cascade and inheritance
###### tags: CF-workshops
---
You know: CSS is Cascading Style Sheets
so, what is cascade?
---
## Cascade is the mechanism that controls the end result when multiple, conflicting CSS declarations apply to the same element
let's see
---
```htmlembedded=
<h2> Heading with no class</h2>
<h2 class="bright">Heading with class of bright</h2>
```
```css=
h2 {
font-size: 2em;
color: black;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.bright {
color: red;
}
```
---
There are three factors to consider:
1. Source order
2. Specificity
3. Importance
---
## Source order
```htmlembedded=
<h1>Hello World!</h1>
```
```css=
h1{
color: red;
}
```
```css=
h1{
color:black;
}
```
---
## Specificity
```htmlembedded=
<h1 class="greeting" id="say-hello">Hello World!</h1>
```
```css=
.greeting{
color: red;
}
```
```css=
#say-hello{
color:black;
}
```
---
## Importance
```htmlembedded=
<h1 class="greeting" id="say-hello">Hello World!</h1>
```
```css=
.greeting{
color: red;!important
}
```
```css=
#say-hello{
color:black;
}
```
---
## Inheritance is associated with how the elements in the HTML markup inherit properties from their parent (containing) elements and pass them on to their children.
---
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inheritance</title>
</head>
<body>
<h1>Heading</h1>
<p>This paragraph has <em>emphasized text</em> in it.</p>
</body>
</html>
```
```css=
html {
font: 75% Verdana, sans-serif;
}
p {
border: medium solid;
color:red;
}
```
{"metaMigratedAt":"2023-06-16T12:26:29.875Z","metaMigratedFrom":"Content","title":"Cascade and inheritance","breaks":true,"contributors":"[{\"id\":\"cd3c9070-2906-4cfb-8d09-6614329d14b5\",\"add\":1711,\"del\":65}]"}