CSS Introduction
Use CSS to style HTML elements, create layouts of the web pages, set colors, fonts, layouts, etc. Learn how to style web pages with CSS.
Cascading Style Sheets (CSS) is the language that controls how a web page looks. While HTML defines the content and structure of a page (headings, paragraphs, lists, links), CSS describes its presentation — colors, fonts, spacing, sizes, and layout. The two work together: HTML is the skeleton, CSS is the skin.
CSS was created by the World Wide Web Consortium (W3C) and is now an open standard supported by every modern browser.
This page covers what CSS is, why it exists, how a CSS rule is written, and where you go next.
Why CSS Exists
In the early web, styling was mixed directly into HTML using attributes and presentational tags. That made pages hard to maintain: changing one color meant editing every element on every page. CSS solves this by separating content from presentation. You write your markup once, then control its appearance from a separate set of rules.
This separation gives you three big wins:
- One change, applied everywhere. A single external stylesheet can style every page on a site. Update one file and the whole site changes.
- Cleaner, smaller HTML. Your markup stays focused on meaning, which is easier to read and better for accessibility and SEO.
- Reusable, consistent design. The same rules apply automatically to every matching element, so buttons, headings, and links look the same site-wide.
How a CSS Rule Looks
A CSS rule has two parts: a selector that picks which elements to style, and a declaration block (inside { }) that lists what to change. Each declaration is a property: value; pair.
p {
color: blue;
font-size: 16px;
}In this rule:
pis the selector — it targets every<p>(paragraph) element.colorandfont-sizeare properties — the things being styled.blueand16pxare values — what each property is set to.- The semicolon
;ends each declaration; the braces{ }group them.
Here is a complete page that uses CSS to style its heading and paragraph:
<!DOCTYPE html>
<html>
<head>
<title>My first CSS page</title>
<style>
h1 {
color: #1c87c9;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>The heading turns blue and centered, and the paragraph becomes gray and larger — all without touching the text itself.
Where CSS Lives
You can apply CSS in three ways, and you will meet all of them in the How to Add CSS chapter:
- External — rules saved in a separate
.cssfile and linked from the page. This is the standard approach for real sites because one file styles many pages. - Internal — rules placed inside a
<style>element in the page's<head>(as in the example above). - Inline — a
styleattribute on a single element, used for quick one-off tweaks.
Where to Go Next
Now that you know what CSS is, continue with the fundamentals:
- CSS Syntax — the anatomy of a rule in detail.
- How to Add CSS — inline, internal, and external styles.
- CSS Selectors — every way to target elements.
- CSS Id and Class — targeting specific elements by name.