CSS Tutorial

Beginner

14 min read

Updated: Nov 2026

Style sheet language

CSS tutorial for beginners: Cascading Style Sheets turn plain HTML into a designed page

Start here

What Is CSS?

CSS stands for Cascading Style Sheets. It is the language that gives a web page its look: color, type, spacing, layout, and motion. HTML holds the words and pictures. CSS styling decides how they appear.

Without CSS, the browser shows a plain document. With CSS, the same HTML can become a product page, a dashboard, or a phone layout. That is the whole job of this CSS tutorial: take structure you already have and make it clear, usable, and pleasant to look at.

HTML only

Welcome

A heading, a paragraph, and a link. The browser supplies the defaults.

Same HTML + CSS

Welcome

The same content, with a brand color, a readable font, and a button-style link.

CSS is a style sheet language, not a programming language.

It describes presentation. It does not loop, calculate a shopping cart, or listen for clicks. Pair it with HTML for structure and JavaScript when the page needs behavior.

Motivation

Why Learn CSS?

If you want to build anything people see in a browser, CSS is part of the job. You do not need to memorize every property. You need the ideas that show up on every site.

Everywhere

Sites, apps, and email

Marketing pages, dashboards, docs, and many HTML emails are styled with CSS. Learn it once and you can read other people’s stylesheets.

One source of truth

Design without copying

A shared stylesheet keeps buttons, headings, and spacing consistent. Change the file, and every page that links it picks up the new CSS styling.

Any screen

Responsive web design

The same HTML can stack on a phone and spread out on a desktop. Media queries, Flexbox, and CSS Grid are how modern interfaces do that.

Fast feedback

You see the result

Save the file and refresh. Color, type, and layout update immediately, which makes CSS for beginners a good second step after HTML.

Mental model

How CSS Works

You write rules. The browser matches those rules to HTML elements, settles conflicts, then paints pixels.

1Read the HTML. The browser builds a tree of elements: headings, paragraphs, buttons, and so on.
2Read the CSS. It collects rules from linked files, <style> blocks, and style attributes.
3Match selectors. A selector such as p or .card names which elements receive the declarations.
4Resolve the cascade. When two rules disagree, specificity and source order pick a winner. Some properties also inherit from a parent.
5Layout and paint. The browser sizes each box, places it, and draws backgrounds, text, and borders.

The cascade, in plain language

Cascading means more than one rule can apply to the same element. The browser does not mix two competing colors. It chooses one.

Question	What wins
Is one declaration marked `!important`?	That declaration wins. Treat this as a last resort. It is hard to override later.
Which selector is more specific?	An inline style beats an ID. An ID beats a class. A class beats an element name.
Are the selectors equally specific?	The rule that appears later in the stylesheet wins.

Here a class and an element both set color. The class is more specific, so the paragraph is teal:

This line uses only a p rule, so it stays slate.

This line also has a class. The class color wins.

CSS

p {
  color: #334155;
}

.intro {
  color: #0f766e;
}

Inheritance

Some properties pass from a parent to its children. color and font-family do. margin, padding, border, and background do not. The box below sets a teal color. The paragraphs inside inherit it. The padding stays on the box.

This text inherits the parent color.

The parent’s padding does not become the paragraph’s padding.

Tip.

Set the font and text color on body. Children inherit them, so you do not repeat those declarations on every element.

Three places

How to Add CSS to HTML

There are three ways to attach CSS styling to HTML. The rule looks the same. Only the location changes. Real projects almost always use an external file.

Inline

On one element

A style attribute. Fast for a test. Awkward to reuse, and it beats normal selectors in the cascade.

style="color: #0f766e;"

Internal

In the page head

A <style> element. Handy for a single demo or this tutorial’s examples.

<style> p { color: #0f766e; } </style>

External

A separate file

A .css file linked from <head>. One file can style the whole site, and the browser can cache it.

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

HTML

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

The next lesson, How to Use CSS, walks through each method with an editor.

Skip @import for your main file. A <link> in the head loads the stylesheet earlier. @import inside a CSS file waits until that file is read, which can slow the first paint.

Rules

CSS Syntax and Rules

A rule has a selector and a declaration block. Each declaration is a property, a colon, a value, and a semicolon.

CSS

selector {
  property: value;
}

h1 {
  color: #0f766e;
  font-size: 2rem;
}

Selector — which elements. h1 means every top-level heading.
Declaration — one property: value; pair. End it with a semicolon.
Declaration block — the braces and everything inside them.

You can also nest rules. The heading rule below applies only to an h2 inside .card. The & refers to .card itself:

CSS

.card {
  padding: 1rem;

  h2 {
    margin: 0 0 0.5rem;
  }

  &:hover {
    border-color: #0f766e;
  }
}

Do this

One declaration per line while you are learning.
Name classes for the component: .card, .btn.
Keep presentation in CSS, not in old HTML attributes like bgcolor.

Avoid this

Forgetting the semicolon, then wondering why the next line is ignored.
Writing .Card when the HTML says class="card".
Adding !important because a selector did not match.

Targeting

CSS Selectors

A selector is the part of the rule that finds elements. These four cover most beginner pages. The full set lives in the CSS selectors lesson.

Selector	Matches	Example
Element	Every tag of that type	`p { }`
Class	Elements with that class	`.card { }` and `class="card"`
ID	The one element with that id	`#hero { }`
Descendant	An element inside another	`.card p { }`

Prefer classes for reusable components. An ID is very specific, so it is harder to override. Group selectors with a comma when they share declarations: h1, h2 { font-family: system-ui, sans-serif; }.

Try a class selector

Declarations

CSS Properties and Values

A property is what you change. A value is the setting. The browser ignores a declaration it does not understand, so a typo fails quietly.

Property	What it controls	Example value
`color`	Text color	`#0f766e`
`font-size`	Type size	`1.125rem`
`margin`	Space outside the border	`1rem 0`
`display`	How the box participates in layout	`flex`
`background`	Fill behind the content	`#f0fdfa`

Lengths need a unit: 16px, 1rem, 100%. width: 100 is invalid. 0 may omit the unit.
margin: 1rem 2rem is shorthand. The first value is top and bottom. The second is left and right.
Browse the full list in CSS properties, and units in length units.

Compare

Types of CSS

People use “types of CSS” for the three ways a rule can be attached. They differ in scope, reuse, and how strongly they compete in the cascade.

Type	Scope	Best for	Watch out
Inline	That one tag	A quick experiment	Beats class and element selectors
Internal	The current document	A single demo page	Copied styles drift apart across pages
External	Every page that links the file	A real website	The path in `href` must be correct

Best practice.

Write external CSS for anything you will keep. Use internal CSS while you are learning a single example. Leave inline CSS for rare one-off cases.

The toolkit

Key Features of CSS

You do not need all of these on day one. Knowing the names helps you pick the right tool when a layout or theme comes up.

Cascade

Specificity and order decide which rule paints an element when several match.

Box model

Content, padding, border, and margin are how spacing actually works.

Flexbox & Grid

Modern layout. Flexbox lines items up. CSS Grid builds rows and columns.

Responsive design

Fluid sizes plus media queries and container queries adapt the page to the screen.

Custom properties

Named values such as --brand keep colors and spacing consistent.

Motion

Transitions, transforms, and keyframe animations add feedback without JavaScript.

Pseudo-classes

:hover, :focus-visible, and ::before style states and extras.

Nesting

Write related rules inside a parent selector so a component stays in one place.

Spacing

CSS Box Model

Every element is a rectangle. Four layers sit around the words or image. Once you can see them, margin and padding stop feeling random.

Outside in: margin, then border, then padding, then the content.

Layer	Role
Content	The text, image, or child elements
Padding	Space between the content and the border. It takes the background color.
Border	The line around the padding. It can be solid, dashed, or transparent.
Margin	Space outside the border. It separates this box from its neighbors. It is transparent.

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

.card {
  width: 20rem;
  padding: 1.25rem;
  border: 2px solid #cbd5e1;
  margin: 1.5rem auto;
}

Use border-box.

The initial value, content-box, adds padding and border on top of width, so a “20rem” card becomes wider than 20rem. border-box includes them in the width you set. Put it on every element at the top of your stylesheet.

Logical properties such as padding-inline and margin-block follow the writing direction. They are the modern stand-in for physical left and right when a page may be right-to-left.

Try the box model

Paint

CSS Colors and Backgrounds

Color is usually the first property people try. Prefer values you can repeat: a hex code, or a custom property that stores it.

CSS

.hero {
  color: #ffffff;
  background-color: #0f766e;
  background-image: linear-gradient(#0f766e, #115e59);
}

Named — teal, white. Fine for a demo. Easy to outgrow.
Hex — #0f766e. Six digits: red, green, blue.
Functions — rgb(15 118 110), hsl(175 80% 26%), and modern oklch() when you want more predictable lightness.
Backgrounds — background-color, images, and linear-gradient(). Check that text on the background still meets contrast.

Type

CSS Typography and Fonts

Typography is hierarchy: a clear heading, a comfortable paragraph, and a line length that is easy to scan. You get most of that from a small set of CSS properties.

CSS

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

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}

rem is relative to the root font size, so it respects a reader who enlarges text in the browser. clamp() picks a size between a minimum and a maximum as the viewport changes. List a fallback in font-family in case the first face is missing.

Placement

CSS Layout

Layout is how boxes share the page. Start with display and position. Use Flexbox for one direction and CSS Grid when you need both rows and columns.

Flexbox

One row

Items share a line. flex: 1 gives each an equal slice of free space.

display: flex;

Grid

Rows and columns

A header spans both columns. The two cells below sit side by side.

display: grid;

Position

A pinned badge

The badge is absolute. It anchors to the relative parent, not the whole page.

relative

absolute

Tool	Use it when
`display: block` and `inline`	Normal document flow. Headings stack. Links sit in a sentence.
Flexbox	A nav, a toolbar, a row of cards, or centering one item.
CSS Grid	A page with a header, sidebar, and main area.
`position`	`relative` offsets a box. `absolute` and `fixed` take it out of flow. `sticky` sticks while scrolling.

CSS

.row {
  display: flex;
  gap: 0.75rem;
}

.page {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

Floats used to build whole pages. Today, use a float only to wrap text around an image. Reach for Flexbox or Grid for layout.

Every screen

Responsive Web Design

Responsive web design means one page that fits the screen in front of the reader. Mobile-first means you write the small-screen layout first, then add rules for wider screens.

Nav

Main

Notes

This preview uses a container query. Narrow the window and the three regions stack. Widen it and they sit in a row. The query watches this component, not the whole browser.

Fluid layout — max-width, %, fr, and gap instead of a fixed 960px page.
Flexible media — img { max-width: 100%; height: auto; } so pictures shrink with the column.
Breakpoints — media queries for the viewport, container queries when a component should respond to its own column.

CSS

.panel {
  container-type: inline-size;
}

@container (min-width: 36rem) {
  .panel-title {
    font-size: 1.5rem;
  }
}

A container cannot style itself from its own size query.

The query watches an ancestor. Put container-type on the parent, then style the children inside @container.

Breakpoints

CSS Media Queries

A media query applies rules when a condition is true. For layout, that condition is usually a minimum viewport width. Write the phone styles first, then enhance.

CSS

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

Below 48rem the cards stack, because a single column is the default. At 48rem and up they form two columns. More patterns are in CSS media queries. Related at-rules such as @media and @layer are grouped under at-rules.

Also test content, not only width.

A zoomed browser or a long translation can wrap a “desktop” layout. min-width in rem tracks the root font size, which helps when readers enlarge text.

Motion

CSS Transitions, Transforms, and Animations

Motion should explain a change: a button lifts, a panel fades in. CSS can do that without JavaScript.

Feature	What it does
`transition`	Animates a property from the old value to the new one. Ideal for hover and focus.
`transform`	Moves, scales, or rotates an element. Prefer this over animating `top` or `width`.
`@keyframes`	A multi-step animation you start with the `animation` property.

CSS

.btn {
  transition: transform 0.25s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

If someone has asked their system to reduce motion, drop the transition. The button can still look the same. It just should not move.

States

CSS Pseudo-Classes and Pseudo-Elements

Pseudo-classes match a state. Pseudo-elements style a part of an element that is not its own HTML tag. Write pseudo-elements with two colons.

Selector	Kind	Typical use
`:hover`	Pseudo-class	Pointer is over the element
`:focus-visible`	Pseudo-class	Keyboard focus ring, without a ring on every mouse click
`:nth-child()`	Pseudo-class	Style every odd row, or the third card
`::before` / `::after`	Pseudo-element	Decorative marks. They need a `content` value, even if it is empty.

Try a hover link

Theme

CSS Variables (Custom Properties)

A custom property is a value you name yourself. It starts with two dashes. var() reads it. Change the name once, and every use updates. These are live in the browser, unlike variables in a preprocessor.

Teal Blue Amber

One variable, one card

The border and the heading use var(--brand). The radios swap that custom property with :has(). No JavaScript required.

CSS

:root {
  --brand: #0f766e;
  --ink: #0f172a;
}

button {
  background: var(--brand);
  color: #fff;
}

Define shared tokens on :root. Override --brand on a section when that region needs a different theme. Custom properties inherit, so children see the nearest value.

Compare

CSS vs HTML vs JavaScript

Each language has one main job. Mixing them is what makes a page. Confusing them is what makes a page hard to change.

	HTML	CSS	JavaScript
Role	Structure and meaning	Presentation and layout	Behavior
You write	Tags such as `<h1>` and `<p>`	Rules such as `p { }`	Functions and events
Example	A button exists	The button is teal and padded	A click submits the form
Kind of language	Markup	Style sheets	Programming

If the change is visual, reach for CSS first. Hover colors, show-and-hide panels, and many menus do not need a script. Use JavaScript when the page must remember state, talk to a server, or change content.

Overview

What You Will Learn in This CSS Tutorial

This introduction is the map. Each card is a topic you can open next. Start anywhere, or follow the roadmap underneath.

Using CSS

Attach a rule

Inline, internal, and external styles, and what happens when a later rule repeats a property.

Selectors

Find elements

Elements, classes, attributes, and combinators. The matching half of every CSS rule.

Properties

Set values

The CSS properties catalog: what each property changes and which values it accepts.

Box model

Space and size

Padding, border, margin, and border-box. The diagram on this page is the short version.

Flexbox

One axis

Rows, columns, equal-height items, and alignment. The layout you will use every week.

CSS Grid

Two axes

Page regions, tracks, and gaps. Grid and Flexbox work together on real interfaces.

Path

CSS Learning Roadmap

Follow this order if you are new. Each step is short enough to practice the same day.

When a rule looks wrong, check the selector, then specificity, then whether a later rule replaces it. Comments that explain a tricky value help. The comments lesson shows the syntax. An editor with highlighting is covered in CSS editors.

Before you start

Prerequisites

You can start this CSS tutorial with three things. Nothing to install beyond a browser and a text editor.

Required

Basic HTML

Know <h1>, <p>, <a>, and class. The HTML introduction is enough to begin.

Required

A browser

Chrome, Firefox, Edge, or Safari. Use the page inspector when a rule does not apply. It shows the winning declaration.

Required

A text editor

Any editor that saves .html and .css files. The Try It Yourself buttons on this site work in the browser too.

Hands-on

Your First CSS Example

This page styles itself with an internal stylesheet. It uses custom properties, a system font, and a heading size that scales between two limits. Open it, then change --brand.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My first styled page</title>
  <style>
    :root {
      --ink: #0f172a;
      --brand: #0f766e;
      --paper: #f0fdfa;
    }

    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
      color: var(--ink);
      background: var(--paper);
    }

    header {
      background: var(--brand);
      color: #fff;
      padding: 2rem 1.25rem;
    }

    h1 {
      margin: 0;
      font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    main {
      max-width: 40rem;
      margin: 0 auto;
      padding: 1.5rem 1.25rem 3rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to my page</h1>
  </header>
  <main>
    <p>This started as plain HTML. CSS added the color, type, and spacing.</p>
  </main>
</body>
</html>

Try It Yourself

How it works

:root stores the ink, brand, and paper colors as custom properties.
body uses those variables for text and background, and removes the browser’s default margin.
header paints the brand color. main keeps the paragraph in a readable column.

A class selector version of a smaller demo is in the button example.

Remember

Key Takeaways

CSS stands for Cascading Style Sheets. It styles HTML. It is not a programming language.
A rule is selector { property: value; }. Classes are the selectors you will reuse.
The cascade picks one winner: specificity first, then source order. Some properties inherit.
Layout today is Flexbox, CSS Grid, and responsive rules — not tables or floats for page structure.

Next step: put a rule on a real page in How to Use CSS.

Frequently Asked Questions

What does CSS stand for?

CSS stands for Cascading Style Sheets. It is the style sheet language browsers use to control colors, typography, spacing, layout, and animation on a web page.

Is CSS a programming language?

No. CSS is a style sheet language. It describes presentation. It does not run loops, store application data, or handle clicks. HTML holds the content, and JavaScript handles behavior.

Is CSS hard for beginners?

The basics are friendly. If you know a few HTML tags, you can change colors and fonts in one sitting. The cascade, layout, and responsive web design take practice, which is why this CSS tutorial builds them one topic at a time.

Do I need HTML before CSS?

Yes. CSS selectors match HTML elements. Learn headings, paragraphs, links, and classes first, then style them. You do not need JavaScript to start.

What is the difference between inline, internal, and external CSS?

Inline CSS is a style attribute on one element. Internal CSS is a style element in the page head. External CSS is a separate .css file linked from the page. External files are the usual choice for a real site because one file can style many pages.

What is the CSS box model?

Every element is a box. From the inside out the layers are content, padding, border, and margin. Padding is space inside the border. Margin is space outside it. Set box-sizing to border-box so width includes padding and border.

Should I learn Flexbox or CSS Grid first?

Learn Flexbox first for rows, columns, nav bars, and cards. Then learn CSS Grid for page regions that need rows and columns together. Most interfaces use both.

What is a CSS variable?

A CSS variable, also called a custom property, is a named value you define, such as --brand: #0f766e. Use it with var(--brand). Change the variable once and every rule that uses it updates.

Did you know?

CSS stands for Cascading Style Sheets. One external file can style every page on a site. Change a single custom property, such as --brand, and every button that uses it updates.

Next: How to Use CSS

Attach your first rule with a style attribute, a style element, or a class.

How to use CSS →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

HTML Introduction How to Use CSS

CSS Tutorial

What Is CSS?

Why Learn CSS?

Sites, apps, and email

Design without copying

Responsive web design

You see the result

How CSS Works

The cascade, in plain language

Inheritance

How to Add CSS to HTML

On one element

In the page head

A separate file

CSS Syntax and Rules

Do this

Avoid this

CSS Selectors

CSS Properties and Values

Types of CSS

Key Features of CSS

Cascade

Box model

Flexbox & Grid

Responsive design

Custom properties

Motion

Pseudo-classes

Nesting

CSS Box Model

CSS Colors and Backgrounds

CSS Typography and Fonts

CSS Layout

One row

Rows and columns

A pinned badge

Responsive Web Design

CSS Media Queries

CSS Transitions, Transforms, and Animations

CSS Pseudo-Classes and Pseudo-Elements

CSS Variables (Custom Properties)

CSS vs HTML vs JavaScript

What You Will Learn in This CSS Tutorial

Using CSS

Selectors

Properties

Box model

Flexbox

CSS Grid

CSS Learning Roadmap

Prerequisites

Basic HTML

A browser

A text editor

Your First CSS Example

How it works

Key Takeaways

Frequently Asked Questions

Did you know?

Related Topics

How to Use CSS

Selectors

Flexbox

CSS Grid

Next: How to Use CSS

About the author