CSS (Cascading Style Sheets) styles and lays out web pages. It controls colors, fonts, spacing, and positioning—while HTML defines the structure and meaning of your content.
HTML and CSS work together: HTML says what is on the page; CSS says how it looks. Once you can connect the two, you can turn plain text into polished, readable websites.
Role & syntax.
Inline, internal, external.
Color, size, spacing.
Element, class, ID.
Clean, reusable CSS.
Try It editor.
CSS stands for Cascading Style Sheets. It is a stylesheet language that describes how HTML elements should appear on screen, on paper, or in other media.
With CSS you can change fonts, colors, margins, backgrounds, layout, and animations—without changing the HTML structure itself. That separation keeps your markup focused on content and your styles easy to update in one place.
Think of HTML as the skeleton of a house and CSS as the paint, furniture, and floor plan. Both are needed, but they do different jobs.
HTML defines the structure of a webpage—headings, paragraphs, links, images. CSS defines the presentation—how those elements look and how they are spaced on the page.
You connect CSS to HTML in one of three ways:
<style> block in the <head> (internal)..css file with <link> (external).The browser reads your HTML, loads any linked CSS, matches selectors to elements, and applies the matching declarations (property + value pairs).
Every web project uses one or more of these approaches. Here is a quick comparison:
| Method | Where CSS Lives | Best For |
|---|---|---|
| Inline | style attribute on one element | Quick one-off tweaks (use sparingly) |
| Internal | <style> in <head> | Single-page demos and early learning |
| External | Separate .css file + <link> | Real websites and team projects |
style attribute.<style> element in the <head> section.<link rel="stylesheet" href="styles.css">. View demo styles.css · complete.cssA CSS rule has two parts: a selector (which element to style) and a declaration block (the styles to apply). Inside the block, each declaration is a property and a value, separated by a colon and ended with a semicolon.
selector {
property: value;
another-property: another-value;
}This rule targets every p element and sets text color and size:
p {
color: #2563eb;
font-size: 18px;
}The selector (p) matches all paragraphs. The declarations inside the curly braces define how they look.
These properties appear in almost every stylesheet. You do not need to memorize them all at once—refer back as you build pages.
color
font-size
font-family
font-weight
line-heightTypography and readability
margin
padding
border
width
heightSpacing and dimensions
background-color
background-image
background-sizeSurfaces behind content
display
text-align
max-widthHow elements flow on the page
color — Sets the text color of an element.font-size — Controls the size of the text (e.g. 16px, 1.125rem).margin — Space outside an element’s border.padding — Space inside an element, between content and border.background-color — Fills the background behind an element.width and height — Control the dimensions of an element.Below are the three methods in detail. Try each one in the Examples Gallery or open the Try It editor links.
Add the style attribute directly on an HTML element. Good for quick tests; avoid using it everywhere.
<h1 style="color: crimson; text-align: center;">Hello World</h1>Place a <style> block inside <head>. All rules in that block apply to the current page.
<head>
<style>
h1 {
color: #15803d;
}
</style>
</head>Save your CSS in a file such as styles.css, then link it from the <head>. When the HTML and CSS files sit in the same folder, use a relative path:
<link rel="stylesheet" href="styles.css">The separate stylesheet file might look like this (full file):
body {
font-family: system-ui, sans-serif;
background-color: #f1f5f9;
margin: 0;
padding: 2rem;
color: #1e293b;
}
h1 {
color: #1e3a8a;
margin-top: 0;
}
p {
color: #475569;
line-height: 1.6;
max-width: 36rem;
}Keep the href path correct relative to your HTML file. If both files are in the same folder, href="styles.css" works.
Working examples ship with this tutorial under /demos/html/how-to-add-css-to-html/. Open the full external CSS files directly: styles.css · complete.css. HTML demos: external.html · complete.html.
Selectors tell the browser which HTML elements receive each rule. These three are the most important for beginners.
Targets elements by tag name. Every matching tag gets the style.
p {
color: #1e293b;
line-height: 1.6;
}Targets elements with a specific class attribute. Classes are reusable—add the same class to many elements.
.intro {
font-weight: bold;
color: #7c3aed;
}In HTML: <h1 class="intro">Welcome</h1>
Targets one element with a unique id attribute. Use IDs sparingly for styling—prefer classes.
#header {
background-color: #fef08a;
padding: 1rem;
}In HTML: <header id="header">...</header>
When rules conflict, more specific selectors usually win: inline styles beat IDs, IDs beat classes, and classes beat element selectors. External stylesheets loaded later can also override earlier ones.
.card, .btn-primary), not appearance alonemax-width and responsive units like remstyle attributesid on multiple elements!important to fix specificity problemshref must match your folder structureSix examples from inline styles to a complete styled page. Each includes View Output and Try It Yourself.
The three ways to connect styles to HTML.
Style a single element with the style attribute:
<h1 style="color: crimson; text-align: center;">Hello World</h1>
<p style="font-size: 18px; color: #334155;">Styled with inline CSS.</p>Each declaration is written inside the style attribute. Fast for demos, hard to maintain at scale.
Rules live in a <style> block in the document head:
<head>
<style>
h1 { color: #15803d; text-align: center; }
p { font-size: 18px; color: #1e293b; }
</style>
</head>
<body>
<h1>Styled with Internal CSS</h1>
<p>Rules are in the head.</p>
</body>One <style> block can hold many rules. Great for single-page tutorials and prototypes.
Link a separate stylesheet from the HTML head. The demo HTML and CSS live in the same folder so href="styles.css" resolves correctly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Styles come from an external file.</p>
</body>
</html>body {
font-family: system-ui, sans-serif;
background-color: #f1f5f9;
margin: 0;
padding: 2rem;
color: #1e293b;
}
h1 {
color: #1e3a8a;
margin-top: 0;
}
p {
color: #475569;
line-height: 1.6;
max-width: 36rem;
}The browser fetches styles.css from the same folder as the HTML file and applies its rules. One CSS file can style every page on your site.
Target elements with classes and IDs.
<h1 class="intro">Welcome!</h1>
<p class="note">Reusable class styles.</p>.intro {
font-weight: bold;
color: #7c3aed;
}
.note {
background: #fef9c3;
padding: 0.75rem 1rem;
}A dot (.) before the name targets the class attribute. Add the same class to many elements.
<header id="header"><h1>Site Header</h1></header>
<footer id="footer">© 2026 My Site</footer>#header {
background-color: #fef08a;
padding: 1rem;
text-align: center;
}
#footer {
font-size: 0.875rem;
color: #64748b;
}A hash (#) targets an id. Each id should appear only once per page.
A full page with HTML structure and a linked external stylesheet (complete.css):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CSS Example</title>
<link rel="stylesheet" href="complete.css">
</head>
<body>
<h1 class="intro">Welcome to My Website</h1>
<p>This is a simple example of using CSS with HTML.</p>
<p>Learn more on <a href="https://example.com">Example.com</a>.</p>
</body>
</html>body {
font-family: Georgia, serif;
background-color: #f0f0f0;
margin: 0;
padding: 2rem;
color: #333;
}
h1.intro {
color: navy;
margin-bottom: 0.5rem;
}
p {
font-size: 16px;
line-height: 1.6;
max-width: 40rem;
}
a {
color: #2563eb;
}
a:hover {
text-decoration: underline;
}HTML holds content; CSS lives in complete.css. Link the stylesheet once and update the look of the whole page from that file.
Inline styles, internal <style> blocks, and external stylesheets via <link rel="stylesheet"> are supported in every modern browser and have been standard for decades.
All three methods work in Chrome, Firefox, Safari, Edge, and mobile browsers. No polyfills needed for the basics in this tutorial.
Bottom line: Write CSS once with standard syntax—it runs everywhere learners practice HTML.
CSS is essential for web design. It works hand-in-hand with HTML to create visually appealing, user-friendly pages. Understanding inline, internal, and external styles—plus basic selectors—gives you a solid foundation for any site you build.
Start with internal CSS while learning, then move to external stylesheets as your projects grow. Explore the <style> tag and <link> tag references for deeper detail.
Inline, internal, external.
Coreselector { prop: val; }
RulesReusable .classname.
SelectorsUnique #idname.
TargetingBest for real sites.
PracticeEdit & preview live.
Hands-onCSS was first proposed in 1994 by Håkon Wium Lie. The “C” stands for Cascading—when multiple rules target the same element, the browser picks the most specific one. That cascade is why load order and selector choice matter.
Open the Try It editor, tweak colors and fonts, and watch the preview update instantly.
6 people found this page helpful