HTML gives your page structure, but CSS is what makes it actually look like a real website. This guide covers the core CSS syntax, how to connect a stylesheet to your HTML, and the handful of properties you’ll use constantly as a beginner.
If you’ve worked through our HTML basics guide, you’ve already built a simple page — but it’s currently plain black text on a white background, exactly like every unstyled HTML page ever written. CSS is what changes that.
This guide covers CSS’s basic syntax, how to connect a stylesheet to an HTML page, and the small set of properties that cover the vast majority of everyday styling as a beginner.
What CSS Actually Is
CSS stands for Cascading Style Sheets. According to MDN’s guide to styling content, CSS is the code that styles web content — like HTML, it isn’t a programming language, and it isn’t a markup language either; it’s a style sheet language, used to select HTML elements and set values for how they should look.
In practice, that means CSS always follows the same basic pattern: pick which HTML elements you want to affect, then clearly describe exactly how they should look.
CSS Syntax, Piece by Piece
According to W3Schools’ CSS syntax reference, every CSS rule has the same basic shape: a selector, followed by a declaration block containing one or more declarations, each made up of a property and a value.
p {
color: red;
text-align: center;
}Breaking this down:
- p — the selector, telling CSS which elements to target (in this case, all paragraphs).
- { } — the declaration block, containing the actual styling rules.
- color: red; — a declaration, made up of the property (
color) and its value (red).
Every declaration ends with a semicolon, and the whole block is wrapped in curly braces. This pattern repeats no matter how simple or complex your stylesheet eventually gets.
Connecting CSS to Your HTML
There are three ways to apply CSS to a page, but one is strongly preferred for anything beyond a quick test. The recommended approach is an external stylesheet — a separate .css file linked to your HTML using the <link> element inside the <head>:
<head>
<link rel="stylesheet" href="style.css">
</head>This keeps your HTML focused purely on structure and content, while your CSS file handles everything about appearance separately — a genuinely useful habit to build early, since it scales cleanly as pages grow more complex.
The Properties You’ll Use Constantly
A small handful of CSS properties cover most of what a beginner needs day to day:
- color — sets the text color of an element.
- background-color — sets the background color behind an element.
- font-size — controls how large text appears.
- font-family — sets which typeface is used.
- margin — controls the space outside an element, between it and its neighbors.
- padding — controls the space inside an element, between its border and its content.
- border — adds a visible line around an element, with adjustable width, style, and color.
Selecting Elements: Beyond Just Element Names
Selecting by element name (like p or h1) styles every matching element on the page identically. Often, you’ll want to style only some elements of a given type, which is where class selectors come in. As freeCodeCamp’s introduction to CSS explains, a class attribute in your HTML lets you target a specific subset of elements using a selector that starts with a period.
<p class="highlight">This paragraph is special.</p>.highlight {
background-color: yellow;
font-weight: bold;
}Only elements with class="highlight" get this styling — every other paragraph on the page stays unaffected. This is one of the most commonly used patterns in real CSS, since it lets you reuse the same visual style across multiple, specific elements without repeating the styling rules each time.
Understanding the Box Model, Briefly
Every HTML element CSS styles is treated as a rectangular box, made up of the content itself, surrounded by padding, then a border, then margin. Understanding this — often called the box model — explains why an element with padding and a border takes up more visible space than its content alone would suggest, and it’s worth revisiting in more depth once you’re comfortable with basic properties.
Working with Colors
CSS accepts colors in several formats, and you’ll see all of them in real code. Named colors like red or steelblue are the simplest to read but limited in variety. Hex codes like #ff0000 give you precise control over any shade, and are extremely common in real stylesheets. RGB values, written as rgb(255, 0, 0), describe a color by its red, green, and blue components, which some people find more intuitive when adjusting a shade slightly.
h1 {
color: #333333;
background-color: rgb(240, 240, 240);
}As a beginner, named colors are perfectly fine to start with, especially while you’re focused on layout and structure rather than pixel-perfect branding. Hex and RGB values become more useful once you’re matching a specific design or brand palette exactly.
A Complete, Minimal Example
Here’s a small HTML page paired with a CSS file that puts several of the concepts above into practice:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My Styled Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome</h1>
<p class="intro">This paragraph gets special styling.</p>
<p>This one stays plain.</p>
</body>
</html>/* style.css */
body {
font-family: Arial, sans-serif;
}
h1 {
color: #2c3e50;
}
.intro {
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #cccccc;
}Notice how body sets a default font for the whole page, h1 targets just the heading, and .intro applies extra styling only to the paragraph carrying that specific class — three different selector types working together on the same small page.
Common Mistakes Beginners Make
A few small errors account for most early CSS frustration. Forgetting a semicolon at the end of a declaration can cause the next declaration to be ignored or misapplied. Misspelling a property name (like colour instead of color) causes the browser to silently ignore that one line, without any visible error message — which is exactly why checking your browser’s developer tools is worth learning early, since it will flag properties it doesn’t recognize.
Another common trip-up is forgetting the period before a class name in a selector — writing intro { } instead of .intro { } targets a (likely nonexistent) HTML element named “intro” rather than anything carrying that class.
Common Questions Beginners Ask About CSS
Do I need to memorize every CSS property? No. A small set of properties — the ones listed above — cover most beginner styling needs. Looking up less common properties as you need them is completely normal, even for experienced developers.
Why isn’t my CSS applying to my HTML? The most common cause is an incorrect file path in your <link> tag, or a typo in a selector or property name. Double-checking that the href in your link tag exactly matches your CSS file’s actual name and location resolves this in most cases.
Should I use inline styles, an internal stylesheet, or an external file? External stylesheets are the standard, recommended approach for anything beyond a quick one-off test, since they keep your HTML clean and let you reuse the same styles across multiple pages without duplicating code.
Why do some properties seem to apply automatically without me setting them? Browsers apply their own default styles to unstyled HTML — that’s why headings appear larger than paragraphs even before you write any CSS at all. Your own CSS declarations simply override these built-in defaults wherever you specify a different value.
Quick-Reference CSS Basics Guide
- Selector — chooses which HTML elements to style.
- Declaration block — the curly braces containing the styling rules.
- Property and value — each declaration pairs a property (like
color) with a value (likered). - External stylesheets — the recommended way to connect CSS to HTML, using
<link>. - Class selectors — target a specific subset of elements using a period and a class name.
- The box model — content, padding, border, and margin make up every styled element.
Conclusion
CSS’s basic syntax — a selector paired with property-value declarations — stays consistent no matter how advanced your styling eventually gets. Getting comfortable with a handful of common properties, linking an external stylesheet properly, and understanding class selectors covers the overwhelming majority of what a beginner needs to start making pages look genuinely presentable, well before you touch anything more advanced like layout systems.
The best way to make this stick is direct practice: take the HTML page from our HTML basics guide and add a linked stylesheet, experimenting with colors, fonts, and spacing until the result actually looks like something you’d genuinely want to show someone, rather than a plain, unstyled document.
In the next guide in this series, we’ll cover the difference between frontend and backend development in more depth, now that you’ve got hands-on experience with two of the three core frontend languages that make the modern web work.
Explore More Web Development Guides →
Alex Carter is a senior software developer with years of hands-on experience building real-world applications. After watching countless beginners give up on programming simply because most tutorials assumed too much prior knowledge, Alex started Vandutz Academy to do things differently — breaking every concept down into clear, judgment-free, step-by-step lessons. When not writing, Alex is probably debugging someone else’s code (or their own).