⚠️ REMINDER: Recipe Project due TONIGHT! Submit GitHub link on D2L.
🎨 CSS Fundamentals
What is CSS?
CSS stands for _________________ Style Sheets
Purpose: CSS describes _________________ HTML elements should be displayed
HTML vs CSS
| HTML (Structure) |
CSS (Style) |
| The _________________ |
The _________________ |
| Content, headings, paragraphs |
Colors, fonts, spacing, layout |
CSS Basic Syntax
_________ {
_________: _________;
property2: value2;
}
Three parts of a CSS rule:
- Selector: _________________
- Property: _________________
- Value: _________________
💡 Remember: Properties and values separated by _____, declarations end with _____
🎯 CSS Selectors
Types of Selectors
| Selector Type |
Symbol/Syntax |
Example |
What it Selects |
| Universal |
_____ |
* { } |
_________________________ |
| Type |
(none) |
p { } |
_________________________ |
| Class |
_____ |
.highlight { } |
_________________________ |
| ID |
_____ |
#header { } |
_________________________ |
Class vs ID
Classes: Can be used on _________________ elements
IDs: Must be _________________ on the page
Advanced Selectors
Grouping (comma-separated): Applies same styles to _________________ selectors
h1, h2, h3 {
color: blue;
}
Chaining (no space): Elements must have _________________ specified criteria
.alert_____warning {
/* Needs BOTH classes */
}
Descendant (space): Selects elements _________________ other elements
.container _____ p {
/* Paragraphs inside .container */
}
🎨 Common CSS Properties
Color Properties
| Property |
What it Changes |
Example Values |
| color |
_________________ |
red, #FF0000, rgb(255,0,0) |
| background-color |
_________________ |
blue, #0000FF, transparent |
Typography Properties
- font-family: Sets the _________________ (include fallbacks!)
- font-size: Sets the _________________ (no space before unit!)
- font-weight: Sets the _________________ (bold = 700)
- text-align: Aligns text _________________
Image Sizing
To maintain aspect ratio, set width and height to _________________
img {
width: 300px;
height: _________;
}
🔗 Three Ways to Add CSS to HTML
| Method |
Where CSS Goes |
Best For |
| 1. External (Best!) |
_________________________ |
Most projects, reusable styles |
| 2. Internal |
_________________________ |
Single page unique styles |
| 3. Inline (Avoid!) |
_________________________ |
Quick testing only |
External CSS Link
<head>
<link _________="stylesheet" _________="styles.css">
</head>
Internal CSS
<head>
<_________>
p { color: blue; }
</_________>
</head>
Inline CSS
<p _________="color: blue; font-size: 16px;">Text</p>
✏️ Practice Exercises
Write the CSS selector for:
- All paragraphs: _________________
- Elements with class "warning": _________________
- Element with ID "footer": _________________
- All h1, h2, and h3 elements: _________________________
- Paragraphs inside divs: _________________________
- Elements with both "alert" and "urgent" classes: _________________________
Fix this CSS (find 3 errors):
p {
color red;
font-size: 16 px;
background-color: blue
}
Errors:
- _________________________________________
- _________________________________________
- _________________________________________
💻 Odin Project Exercises
We'll complete these exercises in class:
Exercise Checklist:
- ☐ 01-css-methods
- ☐ 02-class-id-selectors
- ☐ 03-grouping-selectors
- ☐ 04-chaining-selectors
- ☐ 05-descendant-combinator
Exercise Notes:
Key takeaways from each exercise:
01-css-methods: _________________________________________
02-class-id-selectors: _________________________________________
03-grouping-selectors: _________________________________________
04-chaining-selectors: _________________________________________
05-descendant-combinator: _________________________________________
🔑 Key Concepts Review
Fill in the blanks:
- CSS stands for _________________________________________
- The three parts of a CSS rule are:
• _________________
• _________________
• _________________
- To select a class, use the symbol: _____
- To select an ID, use the symbol: _____
- The best way to add CSS to HTML is: _________________
- Classes can be used _________________ times,
while IDs can only be used _________________ time per page.
- To apply the same style to multiple selectors, separate them with: _____
- To select elements nested inside other elements, use a: _________________
📝 Additional Notes
Use this space for any additional notes, questions, or examples from class:
Questions to Ask:
- _________________________________________________
- _________________________________________________
- _________________________________________________
📚 Homework & Next Steps
Tonight's Homework:
- ☐ SUBMIT RECIPE PROJECT on D2L!
- ☐ Finish any incomplete CSS exercises
- ☐ Read about CSS Cascade and Specificity
- ☐ (Optional) Add basic CSS to Recipe Project
Next Class Preview:
Topic: _________________________________________
Key Concept: How CSS decides which styles "win" when there are conflicts