CSS Fundamentals

After this lesson, you will be able to: Style a webpage using CSS selectors, the box model, and flexbox to build a clean, professional-looking layout.

CSS turns the bare-bones HTML skeleton into something people actually want to look at. This lesson covers selectors, the all-important box model, and flexbox, the layout system you'll use most often as a modern developer.

Prerequisites:HTML Fundamentals

Three ways to add CSS (use the third)

Inline styles, <style> tags, and external stylesheets. External is what real projects use.

html

<!-- inline (avoid) -->
<p style="color: red">Hello</p>

<!-- internal -->
<style>
  p { color: red; }
</style>

<!-- external (best) -->
<link rel="stylesheet" href="styles.css" />

Selectors, picking what to style

The three selectors you'll use 90% of the time.

html

/* Tag selector, every <p> on the page */
p {
  color: #333;
  line-height: 1.6;
}

/* Class selector, any element with class="card" */
.card {
  background: white;
  padding: 16px;
  border-radius: 8px;
}

/* ID selector, the one element with id="hero" */
#hero {
  text-align: center;
}

The box model, every element is a box

Every HTML element is a rectangular box made of four layers: content (the text or image), padding (space inside the border), border (the visible edge), and margin (space outside the border). Understanding this is the single most important step in CSS.

Diagram coming soon!

Standard CSS box model diagram with four nested rectangles labeled content, padding, border, margin, each with a different color

Flexbox, the modern layout tool

Flexbox arranges children in a row or column with one declaration on the parent.

css

.container {
  display: flex;            /* turn it into a flex parent */
  justify-content: center;  /* horizontal alignment */
  align-items: center;      /* vertical alignment */
  gap: 16px;                /* space between children */
}

.container > div {
  flex: 1;  /* each child takes equal width */
}

Diagram coming soon!

Flexbox axes diagram, main axis (horizontal arrow) and cross axis (vertical arrow) with three boxes evenly spaced along the main axis

Try it: style your bio page

Open last lesson's bio page in your editor and apply CSS.

1
Create a styles.css file and link it from index.html
2
Set a body background color and font-family
3
Give your h1 a custom color and add a border-bottom
4
Wrap your hobbies list in a div with class="hobbies" and style it as a centered card with padding and border-radius
5
Use flexbox on a container div to put your image and bio text side by side

Quick Check

What does "display: flex" do?

Where does it go and what changes?

←Semantic HTML, Accessibility, and WCAG

Back to Web Development

Tailwind CSS: The Utility-First Mental Model→