CSS: Style the Web

Master the language that brings websites to life.

// CSS HISTORY

CSS (Cascading Style Sheets) was first proposed by Håkon Wium Lie in 1994. It separated presentation from structure, revolutionizing web design and enabling the responsive, beautiful websites we see today.

// WHY CSS MATTERS

CSS controls every visual aspect of a website: colors, layouts, typography, animations, and responsiveness. Mastery of CSS transforms a plain HTML document into a stunning, interactive experience.

Start Learning →

// Lessons

12 lessons • Style & design

LESSON 01

Introduction to CSS

Learn what CSS is and how it styles web pages

Beginner
LESSON 02

Selectors & Specificity

Target elements precisely and understand specificity rules

Beginner
LESSON 03

Colors & Units

Master color values, lengths, and CSS units

Beginner
LESSON 04

The Box Model

Understand content, padding, border, and margin

Beginner
LESSON 05

Typography

Style text with fonts, sizes, spacing, and alignment

Beginner
LESSON 06

Layout: Display & Position

Control element positioning and display types

Intermediate
LESSON 07

Flexbox Layout

Create flexible one-dimensional layouts with ease

Intermediate
LESSON 08

CSS Grid Layout

Build complex two-dimensional grid-based layouts

Intermediate
LESSON 09

Responsive Design

Make websites work on all screen sizes

Intermediate
LESSON 10

Animations & Transitions

Add motion and interactive effects.

Intermediate
LESSON 11

CSS Architecture

Organize CSS with BEM, SMACSS, methodologies.

Advanced
LESSON 12

Modern CSS Features

CSS variables, custom properties, new features.

Advanced

// Why CSS

CSS (Cascading Style Sheets) was first proposed by Håkon Wium Lie in 1994. It separated presentation from structure, revolutionizing web design and enabling the responsive, beautiful websites we see today.

CSS controls every visual aspect of a website: colors, layouts, typography, animations, and responsiveness. Mastery of CSS transforms a plain HTML document into a stunning, interactive experience.

From Flexbox to Grid, from transitions to animations, CSS has evolved into a powerful layout language. With modern features like container queries and cascade layers, the future of CSS is brighter than ever.

Style the web. Own your design.

// Tools & References

📖 MDN Web Docs

CSS Reference

developer.mozilla.org

🎨 CSS Tricks

CSS Tutorials & Tips

css-tricks.com

📐 Flexbox Froggy

Learn Flexbox Game

flexboxfroggy.com

🔲 Grid Garden

Learn CSS Grid Game

cssgridgarden.com

// Introduction to CSS

×

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML.

Ways to Add CSS

/* 1. External Stylesheet (recommended) */ <link rel="stylesheet" href="styles.css"> /* 2. Internal Stylesheet */ /* 3. Inline Styles (avoid) */ <p style="color: blue;">Text

CSS Syntax

/* Selector targets elements */ h1 { /* Declaration = property: value; */ color: blue; font-size: 24px; } /* Multiple selectors */ h1, h2, h3 { font-family: Arial; }
CSS RULE: The "C" in CSS stands for "Cascading" - styles can inherit and override from multiple sources, with specificity determining the winner.

CSS Comments

/* This is a single-line comment */ /* * This is a * multi-line comment */

Quiz

1. CSS stands for Cascading _____.

Hint: S-S

2. External CSS uses the _____ tag.

Hint: In head

3. Inline styles use the _____ attribute.

Hint: HTML attr

4. h1 is a _____.

Hint: Targets elements

5. color: blue is a _____.

Hint: Property + value

6. /* */ defines a _____.

Hint: Code note

7. Recommended: external _____.

Hint: Separate file

8. Cascading means styles _____.

Hint: From parent

Show Answers

Answers

  1. Style Sheets
  2. link
  3. style
  4. selector
  5. declaration
  6. comment
  7. stylesheets
  8. inherit

// Selectors & Specificity

×

Basic Selectors

/* Element selector */ p { color: black; } /* Class selector */ .highlight { background: yellow; } /* ID selector */ #header { height: 100px; } /* Universal selector */ * { margin: 0; }

Combinator Selectors

/* Descendant (space) */ article p { line-height: 1.6; } /* Child (>) */ ul > li { list-style: none; } /* Adjacent sibling (+) */ h2 + p { font-size: 18px; } /* General sibling (~) */ h2 ~ p { color: gray; }

Pseudo-classes

/* User interaction */ a:hover { color: red; } a:visited { color: purple; } input:focus { outline: 2px solid blue; } /* Structural */ li:first-child { font-weight: bold; } li:last-child { margin-bottom: 0; } tr:nth-child(odd) { background: #f0f0f0; }

Pseudo-elements

/* First line/letter */ p::first-line { font-weight: bold; } p::first-letter { font-size: 2em; } /* Before/after content */ .tooltip::before { content: "?"; } /* Selection */ ::selection { background: yellow; }

Specificity

Specificity determines which rule wins. Higher specificity = higher priority:

  • Inline: 1000
  • ID: 100
  • Class: 10
  • Element: 1
/* Specificity: 0-1-1 (101 with element) */ #nav .active { color: red; } /* Specificity: 0-0-2 (2) */ div p { color: blue; }

Quiz

1. .class uses _____ selector.

Hint: Dot notation

2. #id uses _____ selector.

Hint: Hash notation

3. ul > li uses _____ combinator.

Hint: Direct child

4. :hover is a _____ class.

Hint: State-based

5. ::before is a _____.

Hint: Creates content

6. ID specificity is _____.

Hint: Highest

7. nth-child(n) selects by _____.

Hint: Number

8. Universal selector is _____.

Hint: Asterisk

Show Answers

Answers

  1. class
  2. ID
  3. child
  4. pseudo
  5. pseudo-element
  6. 100
  7. position
  8. *

// Colors & Units

×

Color Values

/* Named colors */ color: red; color: transparent; /* Hexadecimal */ color: #ff0000; /* Red */ color: #f00; /* Short */ color: #ff000080; /* With alpha */ /* RGB / RGBA */ color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.5); /* HSL / HSLA */ color: hsl(0, 100%, 50%); color: hsla(0, 100%, 50%, 0.5);

CSS Units

/* Absolute units */ font-size: 16px; /* Pixels */ border: 1in; /* Inches */ padding: 1pt; /* Points */ /* Relative units */ width: 50%; /* Percent of parent */ font-size: 1em; /* Relative to parent */ font-size: 1rem; /* Relative to root */ width: 100vw; /* 1% of viewport width */ height: 100vh; /* 1% of viewport height */

CSS Variables

/* Define variable */ :root { --primary-color: #007bff; --spacing: 1rem; --font-main: Arial, sans-serif; } /* Use variable */ .button { background: var(--primary-color); padding: var(--spacing); }

calc() Function

.container { width: calc(100% - 40px); height: calc(100vh - 100px); }

Quiz

1. #f00 is _____ color.

Hint: Short hex

2. rgb(255, 0, 0) is _____.

Hint: Full red

3. % is relative to _____.

Hint: Container

4. rem is relative to _____.

Hint: HTML

5. vw stands for _____.

Hint: Window

6. var() accesses _____.

Hint: Custom props

7. calc() performs _____.

Hint: Math

8. HSL uses hue, _____, lightness.

Hint: Color intensity

Show Answers

Answers

  1. hex
  2. red
  3. parent
  4. root
  5. viewport width
  6. variables
  7. calculations
  8. saturation

// The Box Model

×

Understanding the Box Model

Every element in CSS is a rectangular box with: content, padding, border, and margin.

.box { /* Content area */ width: 200px; height: 100px; /* Space inside border */ padding: 20px; /* Border around padding */ border: 2px solid black; /* Space outside border */ margin: 10px; }

Padding & Margin Shorthand

/* All four sides */ padding: 10px; /* Top/bottom left/right */ padding: 10px 20px; /* Top right bottom left */ padding: 10px 20px 30px 40px; /* Individual sides */ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;

box-sizing

/* Default - width is content only */ box-sizing: content-box; /* Width includes padding + border (recommended) */ box-sizing: border-box; /* Global reset */ * { box-sizing: border-box; }

Border Properties

border-width: 2px; border-style: solid; /* solid, dashed, dotted */ border-color: black; /* Shorthand */ border: 2px solid black; /* Individual borders */ border-top: 1px solid red; border-radius: 10px; /* Rounded corners */

Margin Collapsing

Vertical margins between elements collapse to the larger value.

.box1 { margin-bottom: 20px; } .box2 { margin-top: 30px; } /* Result: 30px between boxes (not 50px) */

Quiz

1. Box model has content, padding, _____, margin.

Hint: Around padding

2. padding is inside the _____.

Hint: Surrounds content

3. margin is _____ the border.

Hint: External space

4. border-box makes width include _____.

Hint: Content + padding + border

5. margin collapses _____.

Hint: Top/bottom

6. border-radius creates _____.

Hint: Curved edges

7. Shorthand: 10px 20px is _____ values.

Hint: TB RL

8. box-sizing default is _____.

Hint: Content only

Show Answers

Answers

  1. border
  2. border
  3. outside
  4. padding and border
  5. vertically
  6. rounded corners
  7. two
  8. content-box

// Typography

×

Font Properties

font-family: "Arial", sans-serif; font-size: 16px; font-weight: bold; /* normal, bold, 100-900 */ font-style: italic; /* normal, italic */ line-height: 1.5; /* 1.5x font-size */ /* Shorthand */ font: italic bold 16px/1.5 Arial;

Text Properties

color: #333; text-align: center; /* left, right, justify */ text-decoration: underline; /* none, line-through, overline */ text-transform: uppercase; /* lowercase, capitalize */ letter-spacing: 2px; word-spacing: 4px; text-indent: 20px; /* First line indent */

Text Shadow

text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* x-offset y-offset blur color */ /* Multiple shadows */ text-shadow: 2px 2px 0 red, 4px 4px 0 blue;

Web Fonts

/* Google Fonts */ href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet"> /* @font-face */ @font-face { font-family: MyFont; src: url('font.woff2') format('woff2'); } body { font-family: 'Roboto', sans-serif; }

Font Display

@font-face { font-family: MyFont; src: url('font.woff2') format('woff2'); font-display: swap; /* swap, block, optional */ }

Quiz

1. font-family sets the _____.

Hint: Font name

2. line-height controls _____.

Hint: Between lines

3. text-decoration: underline adds a _____.

Hint: Under text

4. text-transform: _____ makes ALL CAPS.

Hint: Capital

5. text-shadow has _____ values.

Hint: x y blur color

6. @font-face is for _____ fonts.

Hint: Your own

7. font-display: swap prevents _____.

Hint: Flash

8. Google Fonts uses _____ tag.

Hint: In head

Show Answers

Answers

  1. typeface
  2. spacing
  3. line
  4. uppercase
  5. four
  6. custom
  7. FOUT
  8. link

// Layout: Display & Position

×

Display Property

display: block; /* Full width, line breaks */ display: inline; /* Same line, no width/height */ display: inline-block; /* Same line, but can have size */ display: none; /* Hidden, no space */ display: flex; /* Flexbox container */ display: grid; /* CSS Grid container */

Position Property

/* Static - default, normal flow */ position: static; /* Relative - offset from normal position */ position: relative; top: 10px; left: 20px; /* Absolute - relative to positioned ancestor */ position: absolute; top: 0; right: 0; /* Fixed - relative to viewport */ position: fixed; top: 0; /* Sticky - toggles between relative and fixed */ position: sticky; top: 10px;

z-index

z-index: 1; /* Lowest */ z-index: 100; /* Higher */ z-index: auto; /* Default */ z-index: -1; /* Behind everything */

Centering Techniques

/* Horizontal centering (block) */ margin: 0 auto; /* Perfect centering (flex) */ .parent { display: flex; justify-content: center; align-items: center; } /* Perfect centering (grid) */ .parent { display: grid; place-items: center; }

Quiz

1. display: none makes element _____.

Hint: No space

2. position: absolute is relative to _____.

Hint: Positioned parent

3. position: fixed is relative to _____.

Hint: Screen

4. z-index controls _____.

Hint: Layer order

5. margin: 0 auto centers _____.

Hint: Block elements

6. flexbox uses justify-content for _____.

Hint: Main axis

7. inline-block can have _____.

Hint: Width/height

8. position: sticky toggles to _____.

Hint: On scroll

Show Answers

Answers

  1. hidden
  2. ancestor
  3. viewport
  4. stacking
  5. horizontally
  6. horizontal
  7. dimensions
  8. fixed

// Flexbox Layout

×

Flex Container

.container { display: flex; /* Main axis alignment */ justify-content: flex-start; /* default */ justify-content: center; justify-content: flex-end; justify-content: space-between; justify-content: space-around; justify-content: space-evenly; /* Cross axis alignment */ align-items: stretch; /* default */ align-items: flex-start; align-items: center; align-items: flex-end; align-items: baseline; }

Flex Direction

flex-direction: row; /* default: left to right */ flex-direction: row-reverse; /* right to left */ flex-direction: column; /* top to bottom */ flex-direction: column-reverse; /* bottom to top */

Flex Items Properties

/* Grow to fill space */ flex-grow: 1; /* Shrink when needed */ flex-shrink: 1; /* Base size */ flex-basis: 200px; /* or auto */ /* Shorthand: grow shrink basis */ flex: 1 0 auto; /* Individual alignment */ align-self: center;

Wrapping

flex-wrap: nowrap; /* default */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Align wrapped lines */ align-content: flex-start; align-content: center; align-content: space-between;

Gap

gap: 10px; /* Row and column gap */ gap: 10px 20px; /* row column */ row-gap: 10px; column-gap: 20px;

Quiz

1. display: flex enables _____.

Hint: Layout

2. justify-content aligns on _____.

Hint: Horizontal

3. align-items aligns on _____.

Hint: Vertical

4. flex-direction: column stacks _____.

Hint: Top to bottom

5. flex-grow makes items _____.

Hint: Fill space

6. flex-wrap enables _____.

Hint: Multiple lines

7. align-self overrides _____.

Hint: Individual

8. gap creates space between _____.

Hint: Flex items

Show Answers

Answers

  1. Flexbox
  2. main axis
  3. cross axis
  4. vertically
  5. grow
  6. wrapping
  7. align-items
  8. items

// CSS Grid Layout

×

Grid Container

.container { display: grid; /* Define columns */ grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 200px auto 100px; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Define rows */ grid-template-rows: 100px auto; grid-template-rows: repeat(3, 1fr); }

Grid Gaps

gap: 20px; row-gap: 10px; column-gap: 20px;

Placing Grid Items

/* Line numbers */ .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } /* Shorthand */ grid-column: 1 / 3; /* start / end */ grid-row: 1 / 2; /* Span */ grid-column: span 2; /* span 2 columns */

Named Grid Areas

.container { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; grid-template-columns: 200px 1fr 1fr; grid-template-rows: auto 1fr auto; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }

auto-fit vs auto-fill

/* auto-fill: keeps empty columns */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* auto-fit: collapses empty columns */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Quiz

1. display: grid enables _____.

Hint: Layout

2. 1fr is _____ fraction.

Hint: Unit

3. repeat(3, 1fr) creates _____ columns.

Hint: Three equal

4. grid-column: 1/3 spans _____ columns.

Hint: From 1 to 3

5. grid-area can use _____ names.

Hint: Custom names

6. auto-fit _____ empty columns.

Hint: Folds up

7. minmax(200px, 1fr) has _____ value.

Hint: Smallest

8. gap is shorthand for row-gap and _____.

Hint: Grid gap

Show Answers

Answers

  1. CSS Grid
  2. one
  3. three
  4. two
  5. named
  6. collapses
  7. minimum
  8. column-gap

// Responsive Design

×

Media Queries

/* Basic media query */ @media (min-width: 768px) { .container { width: 750px; } } /* Multiple conditions */ @media (min-width: 768px) and (max-width: 1024px) { .box { background: blue; } }

Media Types

@media screen { ... } /* Default */ @media print { ... } /* Print media */ @media speech { ... } /* Screen readers */ @media all { ... } /* All devices */

Common Breakpoints

/* Mobile first approach */ /* Small devices (phones) */ /* Default styles */ /* Medium devices (tablets) */ @media (min-width: 768px) { } /* Large devices (desktops) */ @media (min-width: 1024px) { } /* Extra large devices */ @media (min-width: 1280px) { }

Feature Queries

/* Check for grid support */ @supports (display: grid) { .container { display: grid; } } /* Check for custom properties */ @supports (--custom: value) { .box { color: var(--custom); } }

Responsive Images

/* Responsive image CSS */ img { max-width: 100%; height: auto; } /* srcset for resolution switching */ srcset="img-400.jpg 400w, img-800.jpg 800w" sizes="(max-width: 600px) 400px, 800px" src="img-800.jpg" alt="Image">

Quiz

1. @media is used for _____.

Hint: Responsive

2. min-width targets _____ screens.

Hint: And above

3. @supports checks for _____.

Hint: CSS support

4. print media is for _____.

Hint: Paper

5. max-width: 100% makes images _____.

Hint: Scale down

6. Mobile-first uses _____ queries.

Hint: Up from

7. sizes attribute tells browser about _____.

Hint: Image size

8. 768px is a common _____ breakpoint.

Hint: Medium size

Show Answers

Answers

  1. breakpoints
  2. larger
  3. features
  4. printers
  5. responsive
  6. min-width
  7. layout
  8. tablet

// Animations & Transitions

×

CSS Transitions

.button { background: blue; transition: background 0.3s ease; } .button:hover { background: red; } /* Multiple properties */ transition: all 0.3s ease-in-out; /* Transition timing functions */ transition-timing-function: ease; transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

CSS Animations

/* Define animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Apply animation */ .box { animation: fadeIn 1s ease-in-out; animation-fill-mode: forwards; /* Keep end state */ animation-iteration-count: infinite; animation-direction: alternate; }

Keyframe Properties

@keyframes slide { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } }

Transform

transform: translate(10px, 20px); transform: rotate(45deg); transform: scale(1.5); transform: skew(10deg); transform: matrix(1, 0, 0, 1, 0, 0); /* Transform origin */ transform-origin: center center; transform-origin: top left; /* Multiple transforms */ transform: translate(10px, 20px) rotate(45deg) scale(1.5);

Performance Tips

  • Use transform and opacity for animations
  • Avoid animating layout properties (width, height, top)
  • Use will-change sparingly
  • Prefer transitions over animations for simple effects

Quiz

1. transition animates on _____ change.

Hint: CSS property

2. @keyframes defines _____.

Hint: Keyframes

3. transform: translate moves _____.

Hint: Move element

4. animation-iteration-count: _____ loops forever.

Hint: Non-stop

5. ease is a _____ function.

Hint: Speed curve

6. transform-origin defaults to _____.

Hint: Middle

7. Animate transform for _____.

Hint: Smooth

8. animation-fill-mode: forwards keeps _____ state.

Hint: Final

Show Answers

Answers

  1. property
  2. animation
  3. position
  4. infinite
  5. timing
  6. center
  7. performance
  8. end

// CSS Architecture

×

BEM Methodology

Block Element Modifier - a naming convention for maintainable CSS.

/* Block */ .card { } /* Element */ .card__title { } .card__image { } .card__button { } /* Modifier */ .card--featured { } .card__button--primary { } .card__button--disabled { }

CSS Reset / Normalize

/* Simple reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Better: normalize.css (recommended) */ /* https://necolas.github.io/normalize.css/ */

CSS Custom Properties

:root { /* Colors */ --color-primary: #007bff; --color-secondary: #6c757d; --color-success: #28a745; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; /* Typography */ --font-family: system-ui, sans-serif; --font-size-base: 16px; } body { font-family: var(--font-family); color: var(--color-primary); }

CSS Organization

/* Recommended order: */ /* 1. Variables */ /* 2. Reset/normalize */ /* 3. Global styles */ /* 4. Layout (grid, flex) */ /* 5. Components */ /* 6. Utilities */

Utility Classes

/* Spacing utilities */ .m-0 { margin: 0; } .mt-1 { margin-top: 0.25rem; } .p-1 { padding: 0.25rem; } /* Display utilities */ .d-flex { display: flex; } .d-none { display: none; } /* Text utilities */ .text-center { text-align: center; } .text-uppercase { text-transform: uppercase; }

Quiz

1. BEM stands for Block _____.

Hint: Methodology

2. __ separates _____.

Hint: From block

3. -- indicates _____.

Hint: Variations

4. :root defines _____ properties.

Hint: CSS variables

5. box-sizing: border-box should be _____.

Hint: All elements

6. normalize.css makes browsers _____.

Hint: Same appearance

7. Utility classes are _____-purpose.

Hint: One job

8. margin: 0 is a _____ utility.

Hint: Layout

Show Answers

Answers

  1. Element Modifier
  2. elements
  3. modifiers
  4. custom
  5. global
  6. consistent
  7. single
  8. spacing

// Modern CSS Features

×

Container Queries

Style elements based on their container's size, not viewport.

/* Define a container */ .card-container { container-type: inline-size; container-name: card; } /* Query the container */ @container card (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 1fr; } }

CSS Nesting

/* Native CSS nesting (modern browsers) */ .parent { color: blue; &.child { color: red; } &:hover { color: green; } @media (min-width: 768px) { font-size: 18px; } }

Subgrid

.parent { display: grid; grid-template-columns: 1fr 1fr; } .child { display: grid; grid-column: span 2; grid-template-columns: subgrid; /* Inherit from parent */ }

color-mix()

.button { background: color-mix(in srgb, blue, red); color: color-mix(in srgb, white, 20%); }

scroll-driven Animations

.element { animation-timeline: scroll(); animation-range: 0% 100%; /* Or view-based */ animation-timeline: view(); }

CSS @layer

/* Layer ordering */ @layer reset, base, components, utilities; @layer reset { * { margin: 0; } } @layer utilities { .text-center { text-align: center; } }

Browser Support

Check caniuse.com for feature support. Many modern CSS features require recent browser versions.

Quiz

1. Container queries use the _____ size.

Hint: Parent

2. & in CSS nesting refers to _____.

Hint: Selector

3. subgrid inherits from _____.

Hint: Above

4. color-mix blends _____.

Hint: Two colors

5. animation-timeline: scroll() uses _____.

Hint: Page scroll

6. @layer defines _____.

Hint: Order

7. Modern CSS features need _____ browsers.

Hint: Up to date

8. @container was added in CSS _____.

Hint: Year

Show Answers

Answers

  1. container
  2. parent
  3. parent grid
  4. colors
  5. scroll position
  6. cascade layers
  7. recent
  8. 2023