CSS Basics: Styling Web Pages with Selectors, the Box Model, and Layout

This article is part 2 of a four-part series on HTML and CSS fundamentals. If you’re new to HTML, start with Part 1: HTML Basics. Continue afterward with Part 3: Flexbox and Grid and Part 4: Responsive Web Design.

HTML gives a webpage its structure — but without CSS, every page looks the same: black text on a white background, default font, no spacing. CSS (“Cascading Style Sheets”) is the language you use to define how your HTML elements look: colors, fonts, spacing, positioning. This guide explains the three core pillars of CSS: selectors, the box model, and how to properly link CSS to your page.

How Do You Actually Add CSS to a Page?

There are three ways to connect CSS to HTML. In practice, you should almost always use the third one:

• Inline styles (directly on the tag, via the style attribute) — fast, but messy and hard to maintain: <p style="color: red;">Text</p>
• Internal styles (in the <head> via a <style> tag) — fine for small test pages, but doesn’t scale.
• External stylesheets (a separate .css file, linked via <link>) — the standard in professional web development, since it cleanly separates structure (HTML) from design (CSS).

<head>
  <link rel="stylesheet" href="style.css">
</head>

In the style.css file, you then write your actual styling rules.

The Basic Structure of a CSS Rule

Every CSS rule consists of a selector (which element gets styled?) and a declaration block in curly braces (how does it get styled?):

p {
  color: darkblue;
  font-size: 18px;
}

This colors every <p> element on the page dark blue and sets its font size to 18px. color and font-size are properties, darkblue and 18px are their values.

Selectors: Targeting Elements Precisely

Selectors are the heart of CSS — they determine WHICH elements a rule affects. The most important types for beginners:

• Type selector — selects all elements of a tag: p { }, h1 { }
• Class selector — selects all elements with a given class: .highlighted { } matches <p class="highlighted">. A class can be applied to as many elements as you want.
• ID selector — selects exactly one element with a given id: #main-menu { } matches <nav id="main-menu">. An ID should only be used once per page.
• Descendant selector — selects elements inside another one: nav a { } styles all links located inside a <nav>.
• Combined selectors — multiple classes or conditions at once: .card.active { } only matches elements carrying BOTH classes.

.card {
  border: 1px solid #ddd;
  padding: 16px;
}

#main-menu {
  background: #222;
}

nav a {
  text-decoration: none;
}

Rule of thumb for beginners: use classes for anything you want to style reusably (most cases), and IDs sparingly for one-off elements or JavaScript hooks.

The Box Model: How Every Element Takes Up Space

The browser treats every HTML element as a rectangular box — even if it looks round or invisible. This box model consists of four layers, from the inside out:

• Content — the actual content (text, image)
• Padding — the inner spacing between content and border
• Border — the box’s border
• Margin — the outer spacing to other elements

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

Important gotcha for beginners: by default, width is applied ONLY to the content — padding and border are added on top. A box with width: 300px, padding: 20px, and border: 2px is actually 344px wide (300 + 2×20 + 2×2). To avoid this, almost every modern project sets this one line at the very top of the stylesheet:

* {
  box-sizing: border-box;
}

With box-sizing: border-box, padding and border are included WITHIN the specified width instead of adding to it — this makes layouts far more predictable and is today’s industry standard.

Colors and Typography

Colors can be specified in CSS in several ways:

• Named colors: color: red;, color: steelblue;
• Hex values: color: #ff5733; (most common)
• RGB/RGBA: color: rgb(255, 87, 51); or with transparency rgba(255, 87, 51, 0.5)

For typography, these properties are a good starting point:

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
}

font-family specifies a list of fonts (the browser uses the first one available), and line-height controls line spacing and is crucial for readability — a value between 1.4 and 1.6 is generally considered a good default for body text.

Practical Example: Styling a Simple Card

<div class="card">
  <h3>Product Name</h3>
  <p>Short description of the product.</p>
</div>

.card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card h3 {
  color: #111;
  margin-top: 0;
}

These few lines turn a plain <div> into a modern, rounded card with a subtle shadow — this is essentially the principle behind most card layouts on the web.

What Comes Next?

With selectors and the box model, you can already style individual elements precisely. The next step is building whole layouts — multiple boxes side by side, grids, responsive arrangements. There are two modern CSS tools for that: Flexbox and Grid. In Part 3 of this series you’ll learn when to use which: CSS Flexbox and Grid: Modern Layouts Explained for Beginners.

Frequently Asked Questions About CSS Basics

What’s the difference between a class and an ID in CSS?

A class (.name) can be applied to as many elements as you want and is the standard for reusable styling. An ID (#name) should only be used once per page and is often used for JavaScript hooks or jump anchors.

Why does my box appear larger than the width I set?

That’s the default CSS box model behavior: padding and border are added on top of the specified width by default. The fix is box-sizing: border-box, which keeps padding and border inside the specified width.

Should I use inline, internal, or external stylesheets?

For any project beyond the tiniest test page: external stylesheets. They cleanly separate structure and design, are reusable across multiple pages, and can be cached by the browser.

What’s the difference between padding and margin?

Padding is the inner spacing between an element’s content and its border (inside the box), while margin is the outer spacing to neighboring elements (outside the box).

Do I need to know every CSS property by heart?

No. As with HTML, knowing the most common 30-40 properties and looking up the rest as needed is enough. With practice, the common patterns (box model, colors, typography) quickly become second nature.