CSS Tutorial: A Complete Guide to Learning CSS From Scratch
If you already know a bit of HTML and want your pages to stop looking like a Word document from 2003, this CSS tutorial is where you start. CSS is what turns plain markup into something people actually enjoy looking at, and once the basics click, most of it is just repetition with different property names.
This guide walks through everything a beginner needs: how CSS connects to HTML, selectors, the box model, layout with Flexbox and Grid, responsive design, and a few habits that will save you hours of debugging later. Every section has code you can copy into a file and test right away.
What CSS Actually Does
HTML gives a page structure. It says “this is a heading,” “this is a paragraph,” “this is a button.” CSS decides what those things look like: their color, size, spacing, and position on the screen.
Here’s the smallest possible example:
<p class="intro">Welcome to the site.</p>.intro {
color: #2b2d42;
font-size: 18px;
}The browser reads the HTML first, builds a structure from it, then applies whatever CSS rules match each element. That’s the whole relationship. HTML is the skeleton, CSS is everything you see draped over it.
Three Ways to Add CSS to a Page
There are three methods, and you’ll probably use all of them at different points.
Inline CSS goes directly on an element using the style attribute:
<p style="color: red;">This text is red.</p>It works, but it’s hard to maintain once a page has more than a few elements. Avoid it except for quick tests or CSS applied dynamically through JavaScript.
Internal CSS sits inside a <style> tag in the document’s <head>:
<head>
<style>
p {
color: red;
}
</style>
</head>This is fine for single-page demos, but it doesn’t scale across a multi-page site since every page needs its own copy.
External CSS is the one you’ll use for almost everything. You write your styles in a separate .css file and link it:
<link rel="stylesheet" href="styles.css">One file, linked from every page. Change a color once, and it updates everywhere. This is the standard setup for real projects, and it’s what we’ll assume for the rest of this tutorial.
CSS Syntax: The Part People Skip and Regret
A CSS rule has three pieces: a selector, a property, and a value.
selector {
property: value;
}For example:
h1 {
color: navy;
text-align: center;
}h1 is the selector (it targets every <h1> on the page), color and text-align are properties, and navy and center are their values. Each declaration ends with a semicolon. Forget one, and the next line sometimes gets swallowed into the value above it, which is a classic source of “why isn’t this working” confusion for beginners.
CSS Selectors: How to Target the Right Elements
Selectors are how you tell the browser which elements a rule applies to. Get comfortable with these and layout work gets a lot less frustrating.
Type, Class, and ID Selectors
A type selector targets every instance of a tag:
p {
line-height: 1.6;
}A class selector targets any element with a matching class attribute, and you can reuse it on as many elements as you want:
.card {
border-radius: 8px;
}An ID selector targets a single, unique element:
#main-nav {
background-color: #1a1a2e;
}Use classes for anything you’ll style more than once. Save IDs for elements that genuinely appear only one time on a page, like a main navigation bar.
Attribute Selectors
These target elements based on an attribute value, which is handy for forms:
input[type="email"] {
border: 1px solid #ccc;
}Pseudo-Classes and Pseudo-Elements
Pseudo-classes style an element based on its state:
a:hover {
text-decoration: underline;
}
li:first-child {
font-weight: bold;
}Pseudo-elements let you style a specific part of an element, or insert content that isn’t in the HTML at all:
p::first-line {
font-weight: bold;
}
.tooltip::after {
content: "?";
}Combinators
Combinators describe relationships between elements:
/* Direct child */
ul > li { }
/* Any descendant, at any depth */
article p { }
/* Adjacent sibling, right after */
h2 + p { }Descendant selectors (article p) are the most common. Direct child (>) is worth knowing because it stops a rule from accidentally hitting nested elements you didn’t intend to target.
CSS Specificity: Why Some Rules Win and Others Don’t
Specificity decides which rule applies when two selectors target the same element. Browsers calculate it by weighing selector types, roughly in this order, from strongest to weakest:
- Inline styles
- IDs
- Classes, attribute selectors, and pseudo-classes
- Type selectors and pseudo-elements
Here’s a case where it trips people up:
#header { color: blue; }
.title { color: red; }If an element has both id="header" and class="title", the text renders blue. The ID wins regardless of which rule appears later in the file, because ID selectors carry more weight than class selectors. Order in the stylesheet only matters when two rules have equal specificity, in which case the one that comes last wins.
A practical rule of thumb: keep specificity as flat as possible across your project. If most of your rules are single classes, a new rule with two chained classes or an ID will unexpectedly override things you didn’t intend to touch.
The Box Model: The Concept That Explains Half of CSS
Every element on a page is a rectangular box, whether it’s a paragraph, an image, or a <div>. That box has four layers, from the inside out:
- Content: the actual text or image
- Padding: space between the content and the border
- Border: a line around the padding
- Margin: space outside the border, separating it from other elements
.box {
width: 300px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}By default, that width: 300px only applies to the content. Add padding and a border, and the box actually renders wider than 300px, which trips up a lot of beginners. Fix it with:
* {
box-sizing: border-box;
}With border-box, the width you set includes padding and border, so the final rendered size matches what you specified. Most developers add this globally at the top of their stylesheet and never think about it again.
Colors and Units
CSS accepts colors in several formats:
.example {
color: red; /* named color */
color: #ff0000; /* hex */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGB with transparency */
color: hsl(0, 100%, 50%); /* hue, saturation, lightness */
}Hex and rgb() are the most common in practice. hsl() is worth learning too, since adjusting lightness or saturation to create a color palette is more intuitive than guessing hex codes.
For sizing, you’ll mostly reach for:
px: a fixed pixel value, predictable but does not scale with user font settings%: relative to the parent elementem: relative to the font size of the current elementrem: relative to the root (html) font size, which makes it more predictable thanemfor consistent spacing across a pagevw/vh: relative to the viewport width or height, useful for full-screen sections
A common pattern is setting a base font size on html, then using rem for everything else so the whole page scales together if that base changes.
Typography Basics
Text styling is where a lot of visual polish comes from, and it’s cheap to get right.
body {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #222;
}
h1 {
font-weight: 700;
letter-spacing: -0.5px;
}A few things worth remembering: always list a fallback font (or several) after your preferred one, in case it fails to load. Line height around 1.5 to 1.6 makes paragraphs noticeably easier to read than the browser default. And text-align, text-transform, and font-style cover most of the remaining text formatting you’ll need day to day.
Backgrounds and Borders
.card {
background-color: #f4f4f9;
background-image: url('pattern.png');
background-size: cover;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}box-shadow and border-radius are two of the most-used properties in modern web design. A small shadow and rounded corners on a card element go a long way toward making a layout feel finished rather than flat.
Display and Positioning
Every element has a default display value that controls how it behaves in the flow of the page.
.block-example { display: block; } /* takes full width, new line */
.inline-example { display: inline; } /* only as wide as content, no line break */
.hybrid { display: inline-block; } /* inline, but respects width/height */div, p, and h1 are block-level by default. span and a are inline. Knowing which is which explains a lot of layout behavior that otherwise looks random.
The position property controls how an element is placed relative to its normal spot:
.relative { position: relative; top: 10px; }
.absolute { position: absolute; top: 0; right: 0; }
.fixed { position: fixed; bottom: 20px; right: 20px; }
.sticky { position: sticky; top: 0; }relative nudges an element from where it would normally sit. absolute removes it from the normal flow entirely and positions it relative to the nearest positioned ancestor. fixed pins it to the viewport, so it stays put even when the page scrolls, which is how sticky “back to top” buttons are usually built. sticky is a hybrid: the element scrolls normally until it hits the specified offset, then locks in place.
Z-Index and Stacking Order
When elements overlap, z-index controls which one sits on top.
.modal {
position: absolute;
z-index: 100;
}
.overlay {
position: absolute;
z-index: 50;
}Higher values sit above lower ones, but only among elements that create a stacking context, and z-index only has an effect on elements with a position value other than static. This is a common source of confusion: setting z-index: 999 on an element with no position set does nothing at all. If a modal window keeps appearing behind other content despite a high z-index, check first whether position is actually set, and second whether a parent element has its own stacking context that’s boxing things in.
Also Read: HTML Tutorial
Flexbox: Laying Out Rows and Columns Without the Old Hacks
Before Flexbox, centering something vertically in CSS was a running joke in the developer community. Flexbox fixed most of that.
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}display: flex turns an element into a flex container, and its direct children become flex items that line up in a row by default. justify-content controls spacing along the main axis (left to right, by default), and align-items controls alignment along the cross axis (top to bottom). gap adds consistent spacing between items without needing margin tricks.
Want a column instead of a row?
.container {
display: flex;
flex-direction: column;
}Flexbox works well for navigation bars, card rows, form layouts, and anything that needs to distribute space along one direction, whether that’s a row or a column.
CSS Grid: Laying Out Full Pages
Grid handles two dimensions at once, rows and columns together, which makes it a better fit for overall page layout than Flexbox.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}That creates three equal-width columns with 20px of space between items. You can also define specific column widths:
.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas: "sidebar content";
}
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }A common approach is Grid for the overall page structure (header, sidebar, main content, footer) and Flexbox for smaller components inside each of those regions, like a card’s internal layout. They’re not competitors; they solve different problems and work fine together.
Responsive Design With Media Queries
A layout that looks right on a laptop can fall apart on a phone. Media queries let you apply different styles depending on the screen size.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}Here, the layout switches from three columns to one when the viewport drops below 768px wide, which covers most tablets and phones. The general approach most developers use is called mobile-first: write your base styles for small screens, then add min-width media queries that build out the layout as the screen gets bigger.
.container {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}This tends to produce cleaner CSS than starting with a desktop layout and overriding it downward for smaller screens.
CSS Custom Properties (Variables)
Custom properties let you define a value once and reuse it across your stylesheet.
:root {
--primary-color: #4361ee;
--spacing-unit: 8px;
}
.button {
background-color: var(--primary-color);
padding: calc(var(--spacing-unit) * 2);
}Change --primary-color in one place, and every element referencing it updates. This is especially useful for maintaining a consistent color palette and spacing scale across a large site, and it’s a big part of why raw CSS can now do a lot of what people used to reach for a preprocessor like Sass to accomplish.
Transitions and Basic Animations
Transitions smooth out changes between two states, like a button’s color on hover:
.button {
background-color: #4361ee;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #3a0ca3;
}For more involved motion, @keyframes defines a sequence of steps:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 0.6s ease-in;
}A little motion makes an interface feel more responsive to the user’s actions. A lot of it makes a site feel slow and distracting. Short durations (200 to 400 milliseconds) and simple easing usually age better than anything elaborate.
Resetting Default Browser Styles
Every browser ships with its own default styles for margins, list bullets, and font sizes, and they don’t all agree with each other. That’s why the same unstyled page can look slightly different in Chrome versus Firefox. A small reset at the top of your stylesheet removes most of that inconsistency:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul, ol {
list-style: none;
}This isn’t strictly required, but starting from a known baseline saves time later, since you’re no longer fighting a default margin you didn’t set yourself. Larger projects often use a more complete reset like Josh Comeau’s CSS reset or Eric Meyer’s classic reset instead of writing one from scratch.
Debugging CSS With Browser DevTools
Most CSS problems get solved faster in DevTools than by staring at the stylesheet. Right-click any element on a page and choose “Inspect” (or press F12) to open it.
The Elements panel shows every CSS rule affecting the selected element, in order of specificity, with crossed-out lines showing which rules got overridden and why. The box model diagram in the same panel shows the actual computed padding, border, and margin for that element, in pixels, which is faster than doing the math by hand.
You can also edit values live in DevTools to test changes before writing them into your file. Toggle a property off, adjust a padding value, or switch display: block to display: flex and watch the layout update immediately. Nothing you do here is permanent until you copy the change back into your stylesheet, which makes it a safe place to experiment.
CSS Frameworks: Do You Need One?
Frameworks like Bootstrap and Tailwind CSS package common patterns, grids, buttons, and forms, so you don’t write every rule from scratch.
Bootstrap gives you pre-built components and a grid system through class names like .container, .row, and .btn-primary. It’s a fast way to get a decent-looking layout without writing much custom CSS.
Tailwind takes a different approach: small utility classes like flex, p-4, and text-center that you combine directly in your HTML instead of writing separate CSS rules.
Both are useful once you understand what they’re generating under the hood. Learning plain CSS first makes framework output far less mysterious, since .p-4 in Tailwind is just padding: 1rem, and Bootstrap’s grid is Flexbox and Grid wrapped in preset classes. Jumping straight to a framework without the fundamentals tends to make debugging harder, not easier, the moment something doesn’t look right.
Accessibility Considerations in CSS
CSS affects accessibility more than most beginners expect. A few habits make a real difference.
Maintain enough color contrast between text and its background. Light gray text on a white background might look clean, but plenty of people find it hard to read, and that goes well beyond users with low vision.
Don’t rely on outline: none to remove the default focus ring on interactive elements without replacing it with a visible alternative. That outline is how keyboard users see which element is currently selected, and removing it without a substitute makes a site unusable without a mouse.
Avoid setting font-size in a way that blocks browser zoom or user font-size preferences. Using rem units instead of fixed px values for text keeps pages usable for people who increase their default font size in browser settings.
Respect motion preferences where relevant:
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}This turns off animations for users who’ve set their operating system to reduce motion, which matters for people with vestibular disorders that make large-scale movement on screen genuinely uncomfortable.
Common Beginner Mistakes
A few issues come up constantly with people new to CSS:
Forgetting box-sizing: border-box. Without it, padding and borders add to your declared width instead of being included in it, and layouts end up wider than expected.
Overusing !important. It overrides normal specificity rules, and once you start relying on it, small style changes turn into a guessing game about which rule actually wins.
Not understanding specificity. An ID selector beats a class selector, which beats a type selector, regardless of the order they appear in the file. If a style isn’t applying, this is usually why.
Margin collapsing. Vertical margins between block elements can combine into a single margin instead of stacking, which looks like a bug the first few times you run into it but is actually expected behavior.
Absolute positioning without a positioned parent. An absolute element positions itself relative to the nearest ancestor that has position: relative, absolute, or fixed. Skip that on the parent, and the element jumps to a much less predictable position, sometimes relative to the entire page.
A Few Habits Worth Building Early
Keep selectors as simple as they can be. A rule like .sidebar .widget .title span is fragile and hard to override later; a single well-named class does the same job more reliably.
Group related styles together and comment on sections in longer stylesheets, especially once a project passes a few hundred lines.
Use a consistent naming convention for classes. Something like BEM (.card, .card__title, .card--featured) keeps large projects from turning into a pile of vague, overlapping class names.
Test on an actual small screen, not just a resized browser window. Real devices sometimes reveal spacing and tap-target issues that a desktop browser’s responsive mode misses.
Practice Project
A solid way to lock in what’s covered here: build a simple pricing page with three cards side by side using Flexbox, a sticky navigation bar using position: sticky, and a responsive layout that stacks the cards into a single column below 600px. That one project touches the box model, Flexbox, positioning, and media queries, which covers most of what you’ll use day to day.
Frequently Asked Questions
Is CSS hard to learn? The syntax itself is simple. What takes time is layout behavior, since properties like display, position, and the box model interact with each other in ways that aren’t always obvious until you’ve debugged a few real pages.
Should I learn Flexbox or Grid first? Flexbox first. It’s simpler and covers more everyday cases, like navigation bars and card rows. Grid becomes useful once you’re laying out a full page with multiple regions.
Do I need to learn Sass or Tailwind before plain CSS? No. Both build on core CSS concepts, so understanding selectors, the box model, and layout first will make either one easier to pick up later.
How long does it take to get comfortable with CSS? Most people can handle basic styling within a couple of weeks of regular practice. Layout systems like Flexbox and Grid usually take longer to feel natural, closer to a month or two of building real pages.
What’s the difference between CSS and CSS3? CSS3 isn’t a separate language. It’s the name given to the set of CSS features introduced in modules after CSS2.1, including Flexbox, Grid, transitions, and custom properties. In current use, “CSS” and “CSS3” mean the same thing.
Can I use CSS without knowing JavaScript? Yes. CSS handles appearance and layout on its own. JavaScript becomes necessary once you need to change styles based on user interaction beyond what :hover, :focus, and similar pseudo-classes can handle, like toggling a class when a button is clicked.
Why does my CSS file load but the styles don’t apply? The most common causes are a wrong file path in the <link> tag, a typo in a selector or property name, or a more specific rule elsewhere overriding the one you’re editing. Checking the Elements panel in DevTools, described earlier in this CSS tutorial, usually points to the exact rule that’s winning.
Where to Go From Here
This tutorial covers the core of what CSS does: syntax, selectors, the box model, layout, and responsiveness. From here, the fastest way to get better is building actual pages, since layout bugs teach specificity and the box model faster than reading about them does.
If you want a structured path through this with guided exercises and projects, explore the CSS course on eLearnCourses.com alongside our tutorials on JavaScript, HTML, and front-end frameworks.