CSS FUNDAMENTALS

Make Your Websites Beautiful with Cascading Style Sheets

Lesson Progress ⏳ In Progress

CSS Curriculum

Section 3.1 - 3.4

Section 3.5 - 3.8

3.1 CSS Selectors

What are Selectors?

Selectors are patterns used to select the elements you want to style.

/* Element Selector */
p {
    color: blue;
}

/* Class Selector */
.highlight {
    background: yellow;
}

/* ID Selector */
#header {
    font-size: 24px;
}

Selector Types

SelectorExampleDescription
Elementp { }Selects all <p>
Class.class { }Selects class="class"
ID#id { }Selects id="id"
Universal* { }Selects all
Descendantdiv p { }p inside div
Childdiv > p { }Direct child p
Adjacenth1 + p { }p after h1
Attribute[type="text"]With attribute

🎮 Selector Practice Game

Click the buttons to see selectors in action:

Paragraph 1 (with class "demo")

Paragraph 2

Div with class "demo"

3.2 The Box Model

Box Model Components

Every element is a box with:

  • Content - The actual content
  • Padding - Space inside the border
  • Border - Edge around padding
  • Margin - Space outside the border
div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
}

Visual Box Model

Content

Padding

Border

Margin

🔧 Adjust the Box Model

Box Model Demo

3.3 Colors & Backgrounds

Color Formats

Hex: #ff6b6b

RGB: rgb(100, 150, 255)

HSL: hsl(200, 80%, 60%)

Background Properties

div {
    background-color: #00ffff;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Gradients

background: linear-gradient(
    90deg, 
    #00ffff, 
    #9d4edd
);

🎨 Color Playground

3.4 Typography

Font Properties

PropertyExample
font-familyArial, sans-serif
font-size16px, 1.2em, 100%
font-weightbold, 400, 700
font-styleitalic, normal
text-aligncenter, left, right
text-decorationunderline, none
line-height1.5, 20px

Web Fonts

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

body {
    font-family: 'Orbitron', sans-serif;
}

This uses Google Fonts!

✏️ Typography Playground

The quick brown fox jumps over the lazy dog.

3.5 Flexbox

Flexbox Properties

Container properties:

  • display: flex;
  • flex-direction: row | column
  • justify-content: center | space-between
  • align-items: center | stretch
  • flex-wrap: wrap | nowrap

Item properties:

  • flex: 1 1 auto;
  • align-self: center;
  • order: 1;

Flexbox Demo

1
2
3

🎮 Control Flexbox

1
2
3

3.6 CSS Grid

Grid Properties

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 10px;
}

.item {
    grid-column: span 2;
    grid-row: 1 / 3;
}

Grid Demo

1
2
3
4
5
6

📐 Grid Builder

3.7 CSS Animations

Transitions

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

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

Keyframes Animation

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.ball {
    animation: bounce 1s infinite;
}

✨ Animation Playground

3.8 Responsive Design

Media Queries

/* Mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .container {
        grid-template-columns: 1fr;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

Responsive Units

  • % - Percentage of parent
  • vw - Viewport width
  • vh - Viewport height
  • em - Relative to parent font
  • rem - Relative to root font

📱 Responsive Demo

Resize your browser window to see changes:

Card 1
Card 2
Card 3

Uses grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

🎯 CSS Practice Project

Build a Responsive Card Component

Requirements:

  • ✅ Create a card with image, title, description
  • ✅ Use Flexbox for layout
  • ✅ Add hover effects
  • ✅ Make it responsive
  • ✅ Use custom colors and typography
  • ✅ Add a button with animations

Starter Code:

<div class="card">
    <img src="image.jpg">
    <h3>Title</h3>
    <p>Description</p>
    <button>Learn More</button>
</div>

<style>
/* Your CSS here */
</style>

📚 CSS Resources

CSS Cheatsheet Example Code MDN CSS Docs CSS-Tricks Flexbox Froggy Grid Garden
Back to Main Menu
html