CSS Foundations
Introduction to CSS 🎨
CSCI 3403 - Web Programming
Week 4, Class 8
Time to make the web beautiful! ✨
⚠️ IMPORTANT REMINDER ⚠️
Recipe Project Due TONIGHT!
Submit your GitHub link on D2L by end of day
- At least 3 recipe pages
- Proper HTML structure
- All links working
- Images displaying correctly
Quick Q&A: Any last-minute Recipe Project questions before we dive into CSS?
The Journey So Far 🗺️
What we've built:
- ✅ HTML structure and elements
- ✅ Lists, links, and images
- ✅ Complete Recipe Project (almost!)
The problem:
Our websites work but... they look like they're from 1995! 😅
Today's Solution: CSS - Making HTML look amazing!
Today's Learning Objectives
- 🎯 Understand what CSS is and why we need it
- 🎯 Learn CSS syntax and rules
- 🎯 Master different types of selectors
- 🎯 Apply basic styling properties
- 🎯 Connect CSS to HTML (3 methods)
- 🎯 Complete hands-on exercises
What is CSS? 🤔
Cascading Style Sheets
HTML (Structure)
The skeleton 🦴
- Content
- Headings
- Paragraphs
- Links
CSS (Style)
The skin & clothes 👗
- Colors
- Fonts
- Spacing
- Layout
CSS describes how HTML elements should be displayed
Life Without CSS vs With CSS
Without CSS 😢
- Plain black text
- Times New Roman everywhere
- Blue underlined links
- No layout control
- Looks like 1990s web
With CSS 🎉
- Beautiful colors
- Custom fonts
- Styled buttons
- Professional layouts
- Modern, responsive design
Fun Fact: CSS Zen Garden shows the same HTML with different CSS - mind-blowing!
CSS Basic Syntax 📝
selector {
property: value;
property: value;
}
Real Example:
p {
color: red;
font-size: 16px;
}
- Selector: What to style (p = all paragraphs)
- Property: What aspect to change (color, size)
- Value: What to change it to (red, 16px)
CSS Syntax Rules ⚠️
Remember These!
- Properties and values separated by
: (colon)
- Each declaration ends with
; (semicolon)
- Declarations wrapped in
{ } (curly braces)
- CSS is case-insensitive but use lowercase
- Whitespace doesn't matter (but use it for readability!)
h1 {
color: blue;
font-size: 24px;
}
h1{color:blue;font-size:24px;}
Universal Selector *️⃣
Selects EVERYTHING on the page!
* {
color: purple;
margin: 0;
}
When to use:
- Resetting default browser styles
- Applying a style to absolutely everything
- Use sparingly - it's very powerful!
Warning: The universal selector can slow down your page if overused!
Type Selectors 🏷️
Select all elements of a specific HTML type
p {
color: blue;
}
h1 {
font-size: 32px;
}
div {
background-color: gray;
}
Note: Type selector = just the HTML tag name, no brackets!
Class Selectors 🎯
Target elements with a specific class attribute
<p class="
highlight">Important text</p>
<p>Normal text</p>
<p class="
highlight">Also important</p>
.
highlight {
background-color: yellow;
}
Key Points:
- Start with a period
.
- Can reuse on multiple elements
- Elements can have multiple classes
Multiple Classes on One Element
<p class="
alert-text severe-alert">Warning!</p>
.alert-text {
color: red;
}
.severe-alert {
font-weight: bold;
}
This paragraph gets BOTH styles applied!
Pro Tip: Use hyphens for multi-word class names (not spaces!)
ID Selectors 🆔
Target ONE specific element
<div id="
header">Site Header</div>
<div id="
footer">Site Footer</div>
#
header {
background-color: navy;
}
#
footer {
background-color: gray;
}
Remember: IDs must be unique! Only ONE element per ID on a page!
Class vs ID: When to Use Which?
Classes (.)
- Can use on multiple elements
- For reusable styles
- Most common choice
- Example: .button, .card, .highlight
IDs (#)
- Only one per page
- For unique elements
- Use sparingly
- Example: #header, #main-nav, #footer
Best Practice: Default to classes. Use IDs only when truly needed!
Grouping Selectors 👥
Apply same styles to multiple selectors
h1 { color: blue; }
h2 { color: blue; }
h3 { color: blue; }
h1, h2, h3 {
color: blue;
}
Benefits: Less repetition, easier to maintain, cleaner code!
Chaining Selectors ⛓️
Target elements that match ALL specified criteria
<p class="highlight">Text 1</p>
<p class="highlight warning">Text 2</p>
.highlight.warning {
background-color: orange;
font-weight: bold;
}
Only "Text 2" gets the orange background (has BOTH classes)
Remember: No space = chaining, Space = descendant (we'll learn next!)
Descendant Combinator 👨👧
Select elements nested inside other elements
<div class="container">
<p>This paragraph is inside</p>
</div>
<p>This paragraph is outside</p>
.container p {
color: red;
}
Only the paragraph INSIDE .container turns red!
Think: "Find all p elements that are descendants of .container"
Quick Selector Practice 🧠
What would these select?
1. p
2. .warning
3. #header
4. div p
5. .alert.urgent
6. h1, h2, h3
Click for Answers
- All paragraph elements
- Elements with class "warning"
- Element with id "header"
- Paragraphs inside divs
- Elements with BOTH alert AND urgent classes
- All h1, h2, and h3 elements
Color Properties 🎨
p {
color: red;
background-color: yellow;
}
Color Values:
color: red;
color: #FF0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);
Typography Basics 📝
p {
font-family: "Helvetica", Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
}
Pro Tip: Always include fallback fonts in case the first isn't available!
Image Dimensions 📐
img {
width: 300px;
height: auto;
}
img {
width: 300px;
height: 200px;
}
Important: Setting both width and height can distort images! Use 'auto' for one dimension to maintain proportions.
Three Ways to Add CSS to HTML
- 🔗 External CSS (Recommended!)
- 📄 Internal CSS (Sometimes useful)
- 🏷️ Inline CSS (Avoid if possible)
Let's explore each method...
External CSS 🔗
The BEST method - CSS in a separate file!
<head>
<link rel="stylesheet" href="styles.css">
</head>
p {
color: blue;
}
✅ Advantages:
- Keeps HTML and CSS separate
- One CSS file can style many HTML pages
- Easier to maintain
Internal CSS 📄
CSS inside the HTML file's <head>
<head>
<style>
p {
color: blue;
}
</style>
</head>
When to use:
- Single page needs unique styles
- Quick testing/prototyping
- Small, one-page projects
Downside: Can't reuse styles across multiple pages
Inline CSS 🏷️
CSS directly on HTML elements
<p style="color: blue; font-size: 16px;">Text</p>
❌ Problems:
- Mixes presentation with content
- Can't reuse styles
- Makes HTML messy
- Overrides other CSS (specificity issues)
Best Practice: Avoid inline CSS except for quick testing!
Let's Practice! 💻
Exercise Time
We'll work through exercises from The Odin Project:
- 01-css-methods
- 02-class-id-selectors
- 03-grouping-selectors
- 04-chaining-selectors
- 05-descendant-combinator
We'll do these together - follow along!
Note: We might not finish all today - that's okay! We'll continue next class.
Setting Up the Exercises
git clone https://github.com/TheOdinProject/css-exercises.git
cd css-exercises/foundations/intro-to-css
code .
For Each Exercise:
- Read the README file
- Open index.html in browser
- Edit the CSS file
- Refresh browser to see changes
- Compare with solution when done
Today's Key Takeaways 🎯
CSS Fundamentals:
- CSS = Cascading Style Sheets (makes HTML pretty!)
- Basic syntax: selector { property: value; }
- Multiple types of selectors (type, class, ID)
- Can combine selectors (grouping, chaining, descendant)
- External CSS is the best practice
Remember:
- Classes (.) are reusable
- IDs (#) are unique
- Practice makes perfect!
Homework 📚
For Next Class:
- TONIGHT: Submit Recipe Project on D2L!
- Finish any CSS exercises we didn't complete
- Read about CSS Cascade and Specificity
- Try adding some basic CSS to your Recipe Project (optional)
Next Class: The Cascade - How CSS decides which styles win!
CSS is Your Creative Superpower! 🚀
You Can Now:
- ✅ Write CSS rules
- ✅ Select elements multiple ways
- ✅ Apply colors and typography
- ✅ Link CSS to HTML
Your websites are about to get a MAJOR upgrade! 🎨
Don't forget: Recipe Project due TONIGHT!
1 / 30