CSS Rules and The Cascade
- CSS's Function:
- Cascading Style Sheets (CSS) is used exclusively for formatting and styling. It is completely separate from the content.
- CSS Rule Anatomy:
-
A style rule is defined as:
Selector { Property: Value; } - The Cascade:
- When multiple rules apply, styles are applied based on Specificity. The styling that is defined closest to the HTML element wins (unless overridden by a more specific selector).
- Browser Defaults:
- Every browser has a default CSS stylesheet that your custom CSS must override.
Key CSS Selectors
| Selector Type | Syntax Example | Specificity | Target Scope |
|---|---|---|---|
| Type Selector | p { ... } |
Lowest | All instances of that element tag (e.g., every paragraph). |
| Class Selector | .highlight { ... } |
Medium | Any element with class="highlight". |
| ID Selector | #main-header { ... } |
Highest | A single, unique element with that ID. |
The Box Model
- Content: The element itself (text, image).
- Padding: Space inside the border (cushioning the content).
- Border: The line separating the padding and margin.
- Margin: Space outside the border (separating the box from its neighbours).
Addressing/Paths
- Absolute Addressing:
-
Provides the full path to the resource, including the protocol (e.g.,
https://...). Works anywhere because it's globally referenced. - Relative Addressing:
-
Points to a file relative to the current document’s location (e.g.,
../images/pic.png).