📚 Learning Objectives

By the end of this lesson, you will be able to:

✅ Understand what CSS is and how it works with HTML
✅ Write CSS rules using proper syntax
✅ Use various CSS selectors to target elements
✅ Apply colors, fonts, and spacing to style web pages
✅ Understand the CSS Box Model
✅ Create layouts using Flexbox and positioning
✅ Make responsive designs for different screen sizes
✅ Style your HTML projects beautifully

🤔 What is CSS?

CSS = Cascading Style Sheets

CSS is the styling language for the web. While HTML provides structure and content, CSS controls how that content looks - colors, fonts, layouts, spacing, animations, and more.

Think of HTML as the bones and CSS as the skin, clothes, and makeup that make everything look beautiful!

🎨 Why We Need CSS

👁️ Visual Appeal

Make websites attractive, engaging, and professional-looking

🎯 User Experience

Improve readability, navigation, and overall usability

🏢 Branding

Apply consistent colors, fonts, and styles that match your brand

📱 Responsiveness

Adapt layouts for different devices and screen sizes

⚡ Performance

Separate content from presentation for better organization

♿ Accessibility

Control contrast, sizing, and layout for better accessibility

📊 HTML vs CSS - Side by Side

HTML Without CSS

Welcome

This is plain HTML with no styling.

Basic, unstyled, black and white

HTML With CSS

Welcome

This is HTML with beautiful CSS styling!

Colorful, styled, professional

🔗 How CSS Connects to HTML

There are three ways to add CSS to your HTML:

1. Inline CSS (Not Recommended)

<p style="color: blue; font-size: 18px;">This is blue text.</p>

⚠️ Avoid inline styles! They mix content with presentation and are hard to maintain.

2. Internal CSS (For Single Pages)

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

3. External CSS (Best Practice!) ✅

<!-- In your HTML file -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* In your styles.css file */
p {
    color: blue;
    font-size: 18px;
}

✅ Best Practice: Use external CSS files! This keeps your HTML clean, makes styles reusable, and is easier to maintain.

🔧 CSS Syntax

📖 Anatomy of a CSS Rule

selector {
    property: value;
    property: value;
}

Real Example:

h1 {
    color: #f5576c;
    font-size: 36px;
    text-align: center;
}

Breaking it down:

h1 = Selector (what to style)
{ } = Declaration block
color, font-size, text-align = Properties
#f5576c, 36px, center = Values
; = Ends each declaration

💬 CSS Comments

/* This is a single-line comment */

/*
  This is a
  multi-line comment
*/

h1 {
    color: red; /* Inline comment */
}

✅ CSS Syntax Best Practices

❌ Bad - Hard to Read

h1{color:red;font-size:24px;margin:0;}
p{color:blue}

✅ Good - Clean & Readable

h1 {
    color: red;
    font-size: 24px;
    margin: 0;
}

p {
    color: blue;
}

🎯 CSS Selectors

Selectors are patterns that tell CSS which HTML elements to style. Let's explore the most important ones!

1. Element Selector

Targets all elements of a specific type.

/* Styles ALL paragraphs */
p {
    color: blue;
}

/* Styles ALL h1 headings */
h1 {
    font-size: 36px;
}

2. Class Selector (.)

Targets elements with a specific class attribute. Classes can be reused on multiple elements.

/* HTML */
<p class="highlight">This text is highlighted</p>
<div class="highlight">This div is also highlighted</div>

/* CSS */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

3. ID Selector (#)

Targets a single element with a specific ID. IDs should be unique on a page.

/* HTML */
<div id="header">Main Header</div>

/* CSS */
#header {
    background-color: #f093fb;
    padding: 20px;
}

4. Universal Selector (*)

Targets ALL elements on the page.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

5. Descendant Selector (space)

Targets elements inside other elements.

/* Targets paragraphs inside divs */
div p {
    color: green;
}

/* Targets links inside nav elements */
nav a {
    text-decoration: none;
}

6. Child Selector (>)

Targets direct children only.

/* Only direct paragraph children of div */
div > p {
    margin-bottom: 10px;
}

7. Multiple Selectors (,)

Apply the same styles to multiple selectors.

h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #2d3748;
}

8. Pseudo-classes (:)

Target elements in specific states.

/* When hovering over a link */
a:hover {
    color: red;
}

/* First child of a parent */
li:first-child {
    font-weight: bold;
}

/* Last child of a parent */
li:last-child {
    margin-bottom: 0;
}

/* Nth child */
tr:nth-child(even) {
    background-color: #f8fafc;
}

📊 Selector Specificity

When multiple rules target the same element, specificity determines which style wins!

Specificity Hierarchy (from weakest to strongest):

Element selectors - p, div (1 point)
Class selectors - .classname (10 points)
ID selectors - #idname (100 points)
Inline styles - style="..." (1000 points)
!important - Overrides everything (avoid using!)

✨ Common CSS Properties

🎨 Colors

CSS supports multiple ways to define colors:

/* Named colors */
color: red;
background-color: blue;

/* Hexadecimal */
color: #f5576c;
background-color: #f093fb;

/* RGB */
color: rgb(245, 87, 108);

/* RGBA (with transparency) */
background-color: rgba(240, 147, 251, 0.5);

/* HSL */
color: hsl(348, 90%, 65%);

Color Examples:

#f5576c

#f093fb

#667eea

#fbbf24

#10b981

🔤 Typography

Property	Description	Example Values
`font-family`	Font typeface	Arial, Georgia, sans-serif
`font-size`	Size of text	16px, 1.5em, 1rem
`font-weight`	Boldness of text	normal, bold, 400, 700
`font-style`	Text style	normal, italic, oblique
`text-align`	Horizontal alignment	left, center, right, justify
`text-decoration`	Text decorations	none, underline, line-through
`text-transform`	Text casing	uppercase, lowercase, capitalize
`line-height`	Space between lines	1.5, 24px, 150%
`letter-spacing`	Space between letters	1px, 0.05em

Typography Example:

h1 {
    font-family: 'Arial', sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #f5576c;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

p {
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
    color: #2d3748;
}

📏 Spacing

Control space inside and around elements:

Property	Description	Example
`margin`	Space outside element	`margin: 20px;`
`padding`	Space inside element	`padding: 15px;`
`margin-top`	Top margin only	`margin-top: 10px;`
`padding-left`	Left padding only	`padding-left: 20px;`

Spacing Shorthand:

/* All sides the same */
margin: 20px;

/* Top/Bottom | Left/Right */
margin: 20px 40px;

/* Top | Right | Bottom | Left (clockwise) */
margin: 10px 20px 30px 40px;

/* Individual sides */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 25px;

🎨 Backgrounds

/* Solid color */
background-color: #f093fb;

/* Image */
background-image: url('image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

/* Gradient */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

/* Multiple backgrounds */
background: 
    url('pattern.png'),
    linear-gradient(to right, #667eea, #764ba2);

🔲 Borders

/* Border shorthand: width style color */
border: 2px solid #f5576c;

/* Individual sides */
border-top: 1px dashed blue;
border-right: 3px dotted red;

/* Rounded corners */
border-radius: 10px;
border-radius: 50%; /* Circle */

/* Individual corner radius */
border-top-left-radius: 10px;
border-bottom-right-radius: 20px;

🌟 Display & Visibility

Property	Values	Description
`display`	block, inline, none, flex, grid	How element is displayed
`visibility`	visible, hidden	Show/hide (keeps space)
`opacity`	0 to 1	Transparency level

📦 The CSS Box Model

What is the Box Model?

Every HTML element is a rectangular box. The CSS Box Model describes how these boxes are sized and how space around them is calculated.

🎯 The Four Parts of the Box Model

    ┌─────────────────────────────────┐
    │         MARGIN (transparent)     │
    │  ┌───────────────────────────┐  │
    │  │    BORDER                 │  │
    │  │  ┌─────────────────────┐  │  │
    │  │  │   PADDING           │  │  │
    │  │  │  ┌───────────────┐  │  │  │
    │  │  │  │   CONTENT     │  │  │  │
    │  │  │  │   (text/img)  │  │  │  │
    │  │  │  └───────────────┘  │  │  │
    │  │  └─────────────────────┘  │  │
    │  └───────────────────────────┘  │
    └─────────────────────────────────┘

1. Content

The actual content of the element (text, images, etc.)

width and height control this

2. Padding

Space between content and border (inside the element)

Transparent, takes background color

3. Border

Line around padding and content

Can have color, width, and style

4. Margin

Space outside the border (between elements)

Always transparent

📐 Box Model Example

.box {
    /* Content size */
    width: 300px;
    height: 200px;
    
    /* Inside space */
    padding: 20px;
    
    /* Border */
    border: 5px solid #f5576c;
    
    /* Outside space */
    margin: 30px;
}

/* Total width = width + padding + border + margin */
/* Total width = 300 + 40 + 10 + 60 = 410px */

🎯 Box-Sizing Property

content-box (default)

.box {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}

/* Total width = 350px */
/* 300 + 20 + 20 + 5 + 5 */

Width/height applies to content only

border-box (recommended!)

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}

/* Total width = 300px */
/* Padding and border included! */

Width/height includes padding and border

✅ Best Practice: Use border-box!

/* Apply to all elements */
* {
    box-sizing: border-box;
}

This makes sizing much more predictable and easier to work with!

📐 CSS Layout

🎯 Display Property

Value	Behavior	Common Use
`block`	Takes full width, starts on new line	div, p, h1, section
`inline`	Takes only needed width, flows with text	span, a, strong, em
`inline-block`	Inline but can have width/height	Buttons, inline containers
`none`	Completely hidden, takes no space	Hide elements dynamically
`flex`	Flexible container for layouts	Modern layouts
`grid`	Grid-based layout system	Complex 2D layouts

💪 Flexbox Layout

Flexbox is a powerful, modern way to create flexible layouts. It's perfect for one-dimensional layouts (rows or columns).

Basic Flexbox Setup:

/* Container (parent) */
.container {
    display: flex;
    justify-content: center; /* Horizontal alignment */
    align-items: center; /* Vertical alignment */
    gap: 20px; /* Space between items */
}

/* Items (children) automatically become flex items */

Flexbox Container Properties:

Property	Values	Description
`flex-direction`	row, column, row-reverse, column-reverse	Direction of flex items
`justify-content`	flex-start, center, flex-end, space-between, space-around	Horizontal alignment
`align-items`	flex-start, center, flex-end, stretch	Vertical alignment
`flex-wrap`	nowrap, wrap, wrap-reverse	Whether items wrap to new line
`gap`	10px, 1rem, etc.	Space between items

Flexbox Examples:

/* Center content horizontally and vertically */
.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Create a navigation bar */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

/* Create a card grid */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px; /* Grow, shrink, base width */
}

📍 Positioning

Position	Behavior	Use Case
`static`	Default, normal flow	Most elements
`relative`	Relative to original position	Slight adjustments
`absolute`	Relative to positioned parent	Overlays, tooltips
`fixed`	Relative to viewport	Sticky headers, floating buttons
`sticky`	Relative until scroll threshold	Sticky navigation

Positioning Examples:

/* Fixed header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 1000;
}

/* Sticky navigation */
nav {
    position: sticky;
    top: 0;
    background: white;
}

/* Centered modal */
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 40px;
    border-radius: 10px;
}

📱 Responsive Design

What is Responsive Design?

Responsive design ensures your website looks great and functions well on all devices - desktops, tablets, and mobile phones.

🎯 Media Queries

Media queries let you apply different styles based on screen size, device type, and other characteristics.

Basic Syntax:

@media (max-width: 768px) {
    /* Styles for screens 768px and smaller */
    .container {
        flex-direction: column;
    }
}

Common Breakpoints:

/* Mobile devices */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* Small laptops */
@media (max-width: 1024px) {
    .container {
        padding: 20px;
    }
}

/* Desktops */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
}

📐 Responsive Units

Unit	Description	Example
`px`	Fixed pixels	`font-size: 16px;`
`%`	Relative to parent	`width: 50%;`
`em`	Relative to parent font-size	`padding: 1.5em;`
`rem`	Relative to root font-size	`margin: 2rem;`
`vw`	Viewport width (1vw = 1% of viewport width)	`width: 50vw;`
`vh`	Viewport height (1vh = 1% of viewport height)	`height: 100vh;`

✅ Responsive Design Best Practices

✅ Mobile-first approach: Design for mobile, then scale up
✅ Use flexible units: %, rem, vw/vh instead of fixed px
✅ Flexible images: max-width: 100%; on images
✅ Test on real devices: Don't just rely on browser tools
✅ Touch-friendly: Make buttons large enough to tap (44x44px minimum)
✅ Readable text: Minimum 16px font-size on mobile

Mobile-First Example:

/* Base styles (mobile) */
.container {
    padding: 15px;
    font-size: 16px;
}

.grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        padding: 30px;
    }
    
    .grid {
        flex-direction: row;
        gap: 25px;
    }
}

/* Desktop and up */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 60px;
    }
}

🎯 CSS Activities & Projects

🎨 Activity 1: Style Your Song Lyric Page

⏱️ Time: 20 minutes

Task: Take your HTML Song Lyric Page and make it beautiful with CSS!

📋 Requirements:

✅ Create an external CSS file (style.css)
✅ Choose a color scheme (background, text colors)
✅ Style the song title (h1) - make it stand out!
✅ Style the artist name (h2)
✅ Format the verses with proper spacing
✅ Add padding and margins for better readability
✅ Center the content or create an interesting layout
✅ Use at least 3 different font properties
✅ Add a border or background to sections
✅ Make text emphasized words visually distinct

💡 Bonus Challenges:

🎯 Add a background image or gradient
🎯 Create hover effects on text
🎯 Use Google Fonts for custom typography
🎯 Add subtle shadows to elements

✨ Activity 2: Style Your About Me Page

⏱️ Time: 30-40 minutes

Task: Transform your About Me page into a professional portfolio!

📋 Requirements:

✅ External CSS file with organized sections
✅ Professional color scheme (3-5 colors max)
✅ Styled header with your name prominently displayed
✅ Navigation styling (if you have links)
✅ Card-style sections with borders/shadows
✅ Properly sized and styled images
✅ Styled lists with custom bullets or numbers
✅ Styled links with hover effects
✅ Consistent spacing throughout (padding/margins)
✅ Footer with centered content
✅ Use Flexbox for at least one layout

🏆 Grading Rubric (100 points):

Category	Points	Description
CSS Organization	15	Clean, commented, external file
Color & Typography	25	Professional color scheme, readable fonts
Layout & Spacing	25	Proper use of box model, flexbox
Visual Design	20	Attractive, cohesive design
Creativity	15	Unique design choices, extras

🐱 Homework: Style Your Cat Photo App

📅 Due: Next class session

Task: Make your Cat Photo App visually stunning with professional CSS!

📋 Requirements:

✅ External CSS file with clear organization
✅ Cat-themed color palette (think: orange, cream, brown, playful colors)
✅ Responsive layout that works on mobile and desktop
✅ Styled navigation menu
✅ Photo gallery using Flexbox or Grid
✅ Image hover effects (scale, shadow, overlay)
✅ Styled buttons and links
✅ Card-style sections for different content
✅ Custom styling for lists
✅ Professional footer design
✅ At least one media query for responsive design
✅ Smooth transitions on interactive elements

🌟 Stretch Goals (Extra Credit):

🎯 Create an animated header or title
🎯 Add a sticky navigation bar
🎯 Create a lightbox effect for images
🎯 Use CSS animations or transitions creatively
🎯 Implement dark mode toggle styles
🎯 Create a fully responsive 3-column grid layout
🎯 Add gradient backgrounds or patterns

💡 Design Inspiration:

🎨 Look at professional pet websites for inspiration
🎨 Use color palette generators (coolors.co, colorhunt.co)
🎨 Check out Google Fonts for fun, cat-themed fonts
🎨 Pinterest and Dribbble for design ideas

🚀 Advanced CSS Topics (Preview)

Here are some advanced CSS topics you'll learn as you continue your journey:

🎬 Animations

@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}

.box {
    animation: slide 2s infinite;
}

🔄 Transitions

.button {
    background: #f093fb;
    transition: all 0.3s ease;
}

.button:hover {
    background: #f5576c;
    transform: scale(1.1);
}

📐 CSS Grid

.grid {
    display: grid;
    grid-template-columns: 
        repeat(3, 1fr);
    gap: 20px;
}

🎭 Transforms

.card:hover {
    transform: 
        rotate(5deg) 
        scale(1.05);
}

🌈 Variables

:root {
    --primary: #f093fb;
    --secondary: #f5576c;
}

.button {
    background: var(--primary);
}

🎨 Filters

img:hover {
    filter: 
        brightness(1.2)
        contrast(1.1)
        saturate(1.3);
}

✅ CSS Best Practices

📋 CSS Coding Standards

✅ Use external stylesheets - Keep CSS separate from HTML
✅ Organize your CSS - Group related styles, use comments
✅ Use meaningful class names - .btn-primary, not .blue-thing
✅ Avoid !important - Use proper specificity instead
✅ Mobile-first approach - Design for mobile, scale up
✅ Use shorthand properties - margin: 10px 20px vs individual properties
✅ Keep selectors simple - Don't nest too deeply
✅ Use consistent naming - Pick a convention (BEM, etc.) and stick to it
✅ Comment your code - Explain complex or non-obvious styles
✅ Test across browsers - Check Chrome, Firefox, Safari

🗂️ CSS Organization Example

/* ================================
   CSS FILE STRUCTURE
   ================================ */

/* 1. RESET/NORMALIZE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. VARIABLES (if using) */
:root {
    --primary-color: #f093fb;
    --secondary-color: #f5576c;
    --text-color: #2d3748;
    --spacing: 20px;
}

/* 3. TYPOGRAPHY */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
}

h1, h2, h3 {
    margin-bottom: 1rem;
}

/* 4. LAYOUT */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 5. COMPONENTS */
.button {
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 6. UTILITIES */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }

/* 7. RESPONSIVE */
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

📚 CSS Resources

🌐 Learning Resources

MDN Web Docs

developer.mozilla.org/CSS

Comprehensive CSS documentation

CSS-Tricks

css-tricks.com

Tutorials, articles, and tips

W3Schools CSS

w3schools.com/css

Interactive tutorials and examples

Flexbox Froggy

flexboxfroggy.com

Learn Flexbox with a fun game!

Grid Garden

cssgridgarden.com

Learn CSS Grid through gameplay

CSS Battle

cssbattle.dev

Practice CSS with challenges

🎨 Design Tools

Tool	Purpose	URL
Coolors	Color palette generator	coolors.co
Google Fonts	Free web fonts	fonts.google.com
CSS Gradient	Gradient generator	cssgradient.io
Box Shadow Generator	Create box shadows	cssgenerator.org
Can I Use	Browser compatibility	caniuse.com

⚠️ Common CSS Mistakes

🐛 Top 10 CSS Mistakes to Avoid

Not using external stylesheets - Keep CSS separate from HTML!
Overusing !important - This breaks the cascade; fix specificity instead
Not using box-sizing: border-box - Makes sizing unpredictable
Forgetting to reset/normalize CSS - Browsers have different defaults
Using too many specific selectors - Keep selectors simple and reusable
Not testing on different browsers - Always check cross-browser compatibility
Hardcoding values everywhere - Use variables for consistency
Not organizing CSS logically - Group related styles together
Ignoring mobile devices - Always design responsively
Not commenting complex code - Future you will thank present you!

🔧 Debugging CSS Tips

🔍 Use browser DevTools (F12) to inspect elements
🔍 Check the computed styles panel to see final values
🔍 Use border or background colors temporarily to see element boundaries
🔍 Comment out sections to isolate problems
🔍 Validate your CSS at jigsaw.w3.org/css-validator
🔍 Check specificity when styles aren't applying
🔍 Look for typos in property names or values
🔍 Make sure files are linked correctly

🎉 You've Learned CSS Basics!

What You Now Know:

✅ What CSS is and how it works with HTML
✅ CSS syntax and how to write rules
✅ Different types of selectors and when to use them
✅ How to style text, colors, and backgrounds
✅ The CSS Box Model and how spacing works
✅ Layout techniques including Flexbox
✅ How to make responsive designs
✅ Best practices for writing clean CSS

🚀 Next Steps in Your CSS Journey

🎨 Practice Daily

Style different HTML elements every day. Try recreating websites you like.

📐 Master Flexbox & Grid

These are essential for modern layouts. Play Flexbox Froggy and Grid Garden!

🎬 Learn Animations

Add life to your pages with CSS transitions and keyframe animations.

🎯 Build Projects

Create portfolio pieces: landing pages, photo galleries, portfolios.

👀 Study Great Designs

Look at websites you admire and try to recreate elements.

📚 Keep Learning

CSS is constantly evolving. Follow CSS blogs and try new features.

✅ Before You Go - Action Items:

✅ Complete Activity 1: Style your Song Lyric Page
✅ Complete Activity 2: Style your About Me Page
✅ Start Homework: Style your Cat Photo App
✅ Bookmark CSS resources and tools
✅ Play Flexbox Froggy to practice layouts
✅ Experiment with colors and typography
✅ Join CSS communities for inspiration

Keep Styling! 🎨✨

CSS is where creativity meets code!

Every beautiful website starts with great CSS.

📚 Continue Your Learning Journey

📚 Learning Objectives

By the end of this lesson, you will be able to:

🤔 What is CSS?

CSS = Cascading Style Sheets

🎨 Why We Need CSS

👁️ Visual Appeal

🎯 User Experience

🏢 Branding

📱 Responsiveness

⚡ Performance

♿ Accessibility

📊 HTML vs CSS - Side by Side

HTML Without CSS

Welcome

HTML With CSS

Welcome

🔗 How CSS Connects to HTML

1. Inline CSS (Not Recommended)

2. Internal CSS (For Single Pages)

3. External CSS (Best Practice!) ✅

🔧 CSS Syntax

📖 Anatomy of a CSS Rule

Real Example:

💬 CSS Comments

✅ CSS Syntax Best Practices

❌ Bad - Hard to Read

✅ Good - Clean & Readable

🎯 CSS Selectors

1. Element Selector

2. Class Selector (.)

3. ID Selector (#)

4. Universal Selector (*)

5. Descendant Selector (space)

6. Child Selector (>)

7. Multiple Selectors (,)

8. Pseudo-classes (:)

📊 Selector Specificity

✨ Common CSS Properties

🎨 Colors

Color Examples:

🔤 Typography

Typography Example:

📏 Spacing

Spacing Shorthand:

🎨 Backgrounds

🔲 Borders

🌟 Display & Visibility

📦 The CSS Box Model

What is the Box Model?

🎯 The Four Parts of the Box Model

1. Content

2. Padding

3. Border

4. Margin

📐 Box Model Example

🎯 Box-Sizing Property

content-box (default)

border-box (recommended!)

✅ Best Practice: Use border-box!

📐 CSS Layout

🎯 Display Property

💪 Flexbox Layout

Basic Flexbox Setup:

Flexbox Container Properties:

Flexbox Examples:

📍 Positioning

Positioning Examples:

📱 Responsive Design

What is Responsive Design?

🎯 Media Queries

Basic Syntax:

Common Breakpoints:

📐 Responsive Units

✅ Responsive Design Best Practices

Mobile-First Example:

🎯 CSS Activities & Projects

🎨 Activity 1: Style Your Song Lyric Page

📋 Requirements:

💡 Bonus Challenges: