CSS Essentials: Selectors, Properties, Cascade
---
theme: seriph
title: CSS Essentials
info: "Module F-CSS-001 — CSS Essentials: Selectors, Properties, Cascade"
---
# CSS Essentials
Selectors, Properties, and the Cascade
---
# CSS = Cascading Style Sheets
CSS controls **how** HTML elements look:
- Colors and fonts
- Spacing and layout
- Animations and effects
Without CSS, websites would be plain text with default browser styling.
---
# Three Ways to Add CSS
1. **External** (recommended)
```html
<link rel="stylesheet" href="styles.css">
```
2. **Internal** (in `<head>`)
```html
<style> h1 { color: blue; } </style>
```
3. **Inline** (avoid!)
```html
<p style="color: red;">Text</p>
```
> **AI tip:** When AI generates CSS, it often uses inline styles. Move them to an external stylesheet for maintainability.
---
# CSS Syntax
```css
selector {
property: value;
property: value;
}
```
**Example:**
```css
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
```
---
layout: center
---
# Selectors
---
# Basic Selectors
| Selector | Targets | Example |
|---|---|---|
| Element | All elements of type | `p { }` |
| Class | Elements with class | `.intro { }` |
| ID | Element with ID | `#header { }` |
| Universal | All elements | `* { }` |
---
# Element Selector
```css
/* All paragraphs */
p {
color: gray;
line-height: 1.6;
}
/* Multiple elements at once */
h1, h2, h3 {
font-family: Arial, sans-serif;
}
```
---
# Class Selector
HTML:
```html
<p class="highlight">Important text</p>
<p>Regular text</p>
<p class="highlight">Also important</p>
```
CSS:
```css
.highlight {
background-color: yellow;
font-weight: bold;
}
```
> Classes can be used on **multiple** elements.
---
# ID Selector
HTML:
```html
<header id="main-header">...</header>
```
CSS:
```css
#main-header {
background-color: navy;
color: white;
}
```
> IDs should be **unique** -- only one per page!
---
# Pseudo-Class Selectors
Target elements based on **state** or **position**:
```css
/* When the user hovers over a link */
a:hover {
color: orange;
text-decoration: underline;
}
/* First and last child of a parent */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
/* Every other row */
tr:nth-child(even) { background-color: #f2f2f2; }
```
---
# Combining Selectors
The most common combinator: **descendant selector** (space between selectors).
```css
/* Style all links inside nav */
nav a {
color: white;
text-decoration: none;
}
```
This targets every `<a>` that is anywhere inside a `<nav>`.
> **Reference:** Other combinators exist (`p.intro`, `.btn.primary`, `ul > li`) but the descendant selector covers most real cases. You'll see the others in AI output; look them up on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors) when you do.
---
layout: center
---
# The Cascade
---
# Why "Cascading"?
When multiple styles target the same element, CSS decides which wins.
Three factors, in order:
1. **Origin & importance** -- your styles override browser defaults
2. **Specificity** -- more specific selectors win
3. **Source order** -- later rules override earlier ones
---
# Specificity at a Working Level
From **lowest** to **highest** priority:
1. Element selectors: `p`, `div`, `h1`
2. Class / pseudo-class selectors: `.intro`, `:hover`
3. ID selectors: `#header`
4. Inline styles: `style="..."`
> When in doubt, use classes. They strike the right balance.
---
# When You and AI Disagree on Styling
AI-generated CSS sometimes doesn't apply the way you expect. Here's the fix:
1. **Inspect** the element in DevTools (`F12` or `Cmd+Option+I`)
2. Look at the **Styles** panel -- rules are listed by specificity
3. Struck-through rules are **overridden** -- the winning rule is above them
4. Check: is a more specific selector beating yours?
> **AI tip:** Understanding specificity means you can debug AI output instead of guessing. Tell AI: "My style isn't applying. Here's the HTML and CSS." It will check for specificity conflicts.
---
# Inheritance
Some CSS properties **cascade down** to child elements. Others don't.
| Inherited (flows to children) | Not inherited (stays on element) |
|---|---|
| `color` | `border` |
| `font-family` | `margin` |
| `font-size` | `padding` |
| `line-height` | `width` / `height` |
| `text-align` | `background` |
> Rule of thumb: text-related properties inherit; box-related properties don't.
> **AI tip:** If AI sets `font-family` on every element, that's redundant. Set it once on `body` and let inheritance do the work.
---
layout: center
---
# Common Properties
---
# Colors
```css
/* Named colors */
color: red;
background-color: lightblue;
/* Hex colors */
color: #ff0000;
background-color: #3498db;
/* RGB / RGBA */
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 0, 0.5); /* 50% transparent */
```
---
# Typography
```css
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold; /* or 400, 700, etc. */
font-style: italic;
text-align: center; /* left, right, justify */
text-decoration: underline;
line-height: 1.5;
```
**Google Fonts:**
```html
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
```
---
# Your Turn
Create `css/style.css` in your `username.github.io` repo and link it to your `about-me.html`:
```html
<link rel="stylesheet" href="css/style.css">
```
In `css/style.css`, add at least:
1. A `body` rule setting `font-family` and `color`
2. A class selector styling one element (e.g., `.highlight`)
3. A descendant selector (e.g., `nav a`)
Commit, push, and verify the styles appear at `https://username.github.io/about-me.html`
---
# Key Takeaways
1. CSS selectors target elements by **type**, **class**, **ID**, or **state**
2. The cascade resolves conflicts via **specificity** and **source order**
3. Text properties **inherit**; box properties don't
4. **DevTools** is how you debug CSS, yours and AI-generated
5. When AI generates CSS, always check: external stylesheet, correct selectors, no unnecessary `!important`
> Practice selectors: [CSS Diner](https://flukeout.github.io/), a game that teaches selectors by doing.
---
# What's Next
You can now style any HTML element and understand why a rule wins or loses.
Next: **Layout** -- making elements sit where you want them on the page.
Topics Covered
- selectors (element/class/ID/pseudo)
- the cascade
- specificity at a working level
- inheritance
- common properties
Content Slides Open fullscreen ↗
Taught In
- Monday, 6/1 — CSS essentials: selectors · cascade · properties