CSS Basics | Notion

CSS Rule Structure:

Example:

h1 {
  color: purple;
  background-color: gray;
}

styles all <h1> tags with purple text on a gray background.

Linking CSS: Use the <link rel="stylesheet" href="style.css"> tag in your HTML’s <head> to apply external styles.

Specificity & Precedence: ID selectors (#headerOne) override type selectors (h1) because they are more specific.

Element Selector
```
p { color: blue; }
```
Targets all <p> elements on the page.
ID Selector
```
#latest { background-color: purple; }
```
Targets the single element whose id="latest".
Class Selector
```
.navigation { margin: 2px; }
```
Targets every element with class="navigation".
Element + Class
```
p.introduction { margin: 2px; }
```
Targets only <p> elements that also have class="introduction".
Descendant Selector
```
#blog h1 { color: blue; }
```
Targets all <h1>s inside the element with id="blog", at any depth.
Child Selector
```
#blog > h1 { color: blue; }
```
Targets only those <h1>s that are direct children of #blog (one level deep).
Pseudo-class
```
a:hover { color: orange; }
```
Targets <a> links when the user’s cursor hovers over them.