CSS

The Paint Job

What is CSS?

CSS is what makes a website feel modern (or look outdated). It controls the design, layout, and all the details people notice first.

Analogy

Car Paint + Upgrades

HTML is the car frame. CSS is the paint, the exterior, the mags, and the “wow” factor.

Reality

Style is subjective

Different products have different UI styles. Your job is to make it look good and feel easy to use.

Tiny Details

Modern vs old

Border radius + shadows change the vibe fast.

Foundation

Behind UI libraries

Bootstrap, Tailwind, and every UI kit still relies on CSS behind the scenes.

.card {
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 16px;
}

Terminology

Vanilla CSS plain CSS

Preprocessors Sass / SCSS

Frameworks Bootstrap / Tailwind

Start with vanilla CSS so the “magic” makes sense later.

selector • property • value

target elements precisely

Later

Responsive

mobile-first layouts

Video unavailable.

Next The Rules

Grammar

CSS Syntax

A CSS rule consists of a selector and a declaration block.

Video unavailable.

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

Terminology

Selector .button

Property background-color

Value #007bff

Quick Check

In the code on the left, what is the "Selector"?

.container {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

Anatomy

Selector .container

Declaration block { ... }

Declaration property: value;

Think: “target something” → “describe what it should look like”.

Mental model

Declarations feel like a dictionary/object: a set of key/value pairs.

{

"width": "100%",

"maxWidth": "1000px",

"margin": "auto"

}

Selector types

tag a

class .container

id #hero

You started by targeting HTML tags. Later you’ll use classes/IDs to be more specific.

Unlock Full Access Buy this Course

Next The Target

Unlock Full Access Buy this Course

Next Clean Slate

Unlock Full Access Buy this Course

Next The Palette

Unlock Full Access Buy this Course

Next The Lineup

Layout

Flexbox

Flexbox is arguably the most powerful layout tool in CSS. It allows you to align, space, and distribute elements perfectly along a single direction.

Video unavailable.

The Parent-Child Relationship

You cannot align elements by targeting the elements themselves. Flexbox operates on a strict parent-child relationship. If you want to center a group of items, you must apply the flex properties directly to their parent container.

The Display Rule

A common beginner mistake is trying to use properties like justify-content without first defining the container as a flexbox. None of the alignment tools will work unless you explicitly set display: flex; on the parent element.

Direction Matters

By default, flexbox aligns your items horizontally (row). You can easily flip this to stack items vertically by setting the direction to column. You can even reverse the order completely!

row column row-reverse

Justify vs Align

justify-content handles alignment along your primary direction (the Main Axis). align-items handles alignment perpendicular to your primary direction (the Cross Axis). Using both together with center is the classic way to perfectly center an element.

Spacing It Out

Instead of manually calculating margins, justify-content can automatically distribute empty space between your items.

space-between

space-around

space-evenly

Test with Colors

When building layouts, it's easy to lose track of where a container actually begins and ends. Temporarily adding a bright background-color to your elements is the best way to visualize their true size and bounds while you work.

Understanding VH

When dealing with full-page layouts, vh (viewport height) is your best friend. Setting a min-height: 30vh ensures an element will always take up at least 30% of the user's screen height, regardless of their device.

fit-content

By default, block-level elements will stretch to fill the entire width of their parent container. Using width: fit-content; forces the container to shrink down and tightly wrap only the content inside it.

Padding is Inside

Never forget: margins push elements away from each other on the outside, but padding creates space on the inside of the container, separating the content from its own borders.

Master the Layout

Jump into the sandbox to practice centering divs, spacing out navigation links, and building responsive grids with Flexbox.

Unlock Full Access Buy this Course

Next The Blueprint

Unlock Full Access Buy this Course

Next The Space

Unlock Full Access Buy this Course

Next Device Ready

Unlock Full Access Buy this Course

Next Mastery

Unlock Full Access Buy this Course

CSS

What is CSS?

Car Paint + Upgrades

Style is subjective

Modern vs old

Behind UI libraries

CSS Syntax

Selectors

The Reset

The "Standard" Reset

Values & Units

Flexbox

The Parent-Child Relationship

The Display Rule

Direction Matters

Justify vs Align

Spacing It Out

Test with Colors

Understanding VH

fit-content

Padding is Inside

Master the Layout

CSS Grid

The Spacing Secret

Social Distancing

Responsive Design

Pro Tips for CSS