Learn CSS from Scratch: A Practical Guide for Beginners

You’ve written some HTML. Your page has content, but it looks… plain. That’s where CSS comes in.

What is CSS?

CSS (Cascading Style Sheets) controls how HTML elements look — colors, fonts, spacing, layout, animations, and everything visual. If HTML is the skeleton, CSS is the skin, clothes, and style.

How to add CSS

There are three ways to add CSS to your HTML:

1. External stylesheet (recommended)

Create a separate .css file and link it in your HTML:

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

/* styles.css */
h1 {
  color: orange;
}

2. Internal styles

Add a <style> tag inside <head>:

<style>
  h1 {
    color: orange;
  }
</style>

3. Inline styles

Add styles directly to an element (avoid when possible):

<h1 style="color: orange;">Hello</h1>

Use external stylesheets for real projects. They keep your HTML clean and your styles reusable.

CSS selectors

Selectors tell CSS which elements to style.

/* Element selector — all paragraphs */
p {
  color: gray;
}

/* Class selector — elements with class="highlight" */
.highlight {
  background-color: yellow;
}

/* ID selector — the element with id="header" */
#header {
  font-size: 24px;
}

/* Descendant — paragraphs inside .card */
.card p {
  margin: 0;
}

Classes (.classname) are the most common selector you’ll use. IDs are for unique elements.

The box model

Every element in CSS is a box with four layers:

Content — the text or image
Padding — space between content and border
Border — the edge of the box
Margin — space between this box and others

.box {
  width: 200px;
  padding: 16px;
  border: 2px solid gray;
  margin: 24px;
}

A tip that saves headaches — use box-sizing: border-box so padding and border are included in the width:

* {
  box-sizing: border-box;
}

Most modern projects set this globally.

Common properties

Colors and backgrounds

.card {
  color: #333; /* text color */
  background-color: #f5f5f5; /* background */
}

Typography

body {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

Spacing

.section {
  padding: 32px 16px; /* top/bottom  left/right */
  margin-bottom: 24px;
}

Borders and rounded corners

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
}

Specificity

When multiple rules target the same element, CSS uses specificity to decide which wins:

Inline styles (highest)
ID selectors (#id)
Class selectors (.class)
Element selectors (p, h1)

When in doubt, use classes. They’re specific enough without causing specificity wars.

What’s next?

Once you’re comfortable with selectors, box model, and basic properties, move on to:

Flexbox — for one-dimensional layouts
CSS Grid — for two-dimensional layouts
Responsive design — making your site work on all screen sizes

The best way to learn CSS is to style real things. Hyper Sheets has 100+ CSS exercises and CSS Battle challenges where you write real code and see instant visual feedback.

Stop reading, start styling.