What is CSS
Role on the web
Learn how CSS separates visual presentation from HTML structure.
CSS Introduction
Overview
What You’ll Learn
This page is a self-contained introduction to CSS (Cascading Style Sheets)—the language that makes web pages look good. You will understand what CSS is, how selectors and declarations work, the three ways to add CSS to HTML, how the cascade resolves conflicts, and where to go next in the topic index.
Syntax
Selector & rules
Write a rule with a selector, property, and value.
Ways to Add CSS
Inline, internal, external
Compare the three places CSS rules can live in a project.
Cascade
Specificity & order
See how the browser picks a winner when rules conflict.
Examples
Hands-on labs
Practice five snippets with View Output and Try It Yourself.
Topic Index
Full roadmap
Jump from getting started to selectors, properties, and at-rules.
Introduction
CSS (Cascading Style Sheets) is a stylesheet language used to style and format HTML and XML documents. While HTML provides structure—headings, paragraphs, links, and forms—CSS controls how those elements look on screen.
CSS lets you set layout, typography, colors, spacing, borders, shadows, animations, and responsive behavior. By separating presentation from content, you can redesign an entire site by changing one stylesheet instead of editing every HTML file.
Every modern website uses CSS. From personal blogs to Netflix and GitHub, stylesheets turn plain markup into polished, accessible interfaces that work on phones, tablets, and desktops.
Why it matters?
HTML alone looks unstyled. CSS gives you consistent branding, responsive layouts, and accessible, readable typography— across every page—without duplicating markup.
Key Highlights
Presentation Control
Colors, fonts, backgrounds, and spacing—all without touching HTML markup.
Layout Power
Flexbox and Grid arrange elements responsively across screen sizes.
Cascade & Specificity
Predictable rules decide which declaration wins when several rules match.
Open Web Standard
Free to use, maintained by the W3C, and supported by every modern browser.
In short: CSS uses selector { property: value; } rules to style HTML. Add rules inline, in a <style> block, or via an external .css file, and let the cascade decide which values win.
Background
👴 Who is the Father of CSS?
Håkon Wium Lie is widely considered the “father of CSS.” While working on the World Wide Web project at CERN in the early 1990s, he proposed a stylesheet language to separate document structure from visual design. His work with the W3C helped CSS become a core part of the open web platform.
Bert Bos co-authored CSS1 and has continued to shape the specification for decades. Today, CSS evolves through standards like CSS3 modules, Flexbox, Grid, and modern features such as custom properties (variables) and container queries.
| Milestone | Year | Notes |
|---|---|---|
| CSS proposed | 1994 | Håkon Wium Lie at CERN |
| CSS1 | 1996 | First W3C recommendation |
| CSS2 | 1998 | Positioning, media types |
| CSS2.1 | 2011 | Stable baseline for browsers |
| CSS3 modules | 2010s+ | Flexbox, Grid, animations |
| Modern CSS | 2020s | Custom properties, :has(), subgrid |
Foundation
📝 CSS Rule Structure
Every CSS rule follows the same pattern: a selector, an opening brace, one or more declarations, and a closing brace.
CSS
p {
color: #334155;
font-size: 18px;
line-height: 1.6;
}Syntax rules
| Piece | Role |
|---|---|
| Selector | Names the element(s) to style (h1, .card, #nav) |
| Property | The style you want to change (color, margin, display) |
| Value | The setting for that property (red, 16px, flex) |
| Semicolon | Ends each declaration; the last one may omit it, but including it avoids errors when you add lines |
| Comments | /* block comment */ for notes the browser ignores |
Methods
🔗 Three Ways to Add CSS to HTML
There are three common ways to connect CSS to HTML. External stylesheets are preferred for real projects; internal and inline styles are useful while learning.
| Method | Where it lives | Best for |
|---|---|---|
| Inline | style="..." on an HTML tag | Quick one-off tweaks; avoid overuse |
| Internal | <style> in <head> | Single-page demos and tutorials |
| External | Separate .css file linked with <link> | Production sites; reuse across pages |
HTML
<link rel="stylesheet" href="styles.css">Learn each method in depth on the How to Use CSS page, or paste HTML and CSS together in the Online HTML Editor to preview the result instantly.
Reference
🧰 Building Blocks: Selectors, Properties, Values & Cascade
As you continue learning CSS, these are the core ideas behind every rule. You do not need to master them all today—this overview shows the big picture.
| Concept | What it does | Tutorial |
|---|---|---|
| Selectors | Target elements by tag, class, ID, attribute, or state | Selectors |
| Properties | Declare visual styles (color, width, border-radius) | Properties |
| Values | Data assigned to a property—colors, lengths, keywords, functions | — |
| Cascade & specificity | How conflicting rules across sources and selectors are resolved | How to Use CSS |
Cheat Sheet
⚡ Quick Reference
| Concept | Example |
|---|---|
| Text color | color: #2563eb; |
| Background | background-color: #f1f5f9; |
| Font size | font-size: 1.125rem; |
| Center text | text-align: center; |
| Class selector | .btn { padding: 0.5rem 1rem; } |
| Hover state | a:hover { text-decoration: underline; } |
Compare
📋 CSS vs HTML vs JavaScript
All three make up the classic front-end trio—but each solves a different problem.
HTML
structureDefines content and meaning—headings, paragraphs, links, and forms.
CSS
presentationControls layout, color, typography, spacing, and responsive behavior.
JavaScript
behaviorAdds interactivity, data handling, and dynamic DOM updates.
Start with HTML for structure, style it with CSS on this page, then add behavior with JavaScript.
Context
When to Use CSS
Reach for CSS whenever a page needs to look and adapt a certain way.
Visual styling
Colors, fonts, backgrounds, borders, and shadows on any HTML element.
Responsive layout
Flexbox, Grid, and media queries adapt pages to phones, tablets, and desktops.
Interactive states
Style
:hover,:focus, and:activewithout any JavaScript.Animations & transitions
Smooth hover effects, loading states, and micro-interactions with pure CSS.
Not for content or logic
Use HTML for structure and JavaScript for behavior—keep CSS focused on presentation.
Key benefit: one stylesheet can restyle an entire site—change a color or font in one place instead of editing every page.
📚 CSS Topic Index
Browse CSS tutorials on CodeToFun, grouped by learning path. Start with How to Use CSS.
Getting Started
At-Rules
Media Queries
Selectors
Properties
Hands-On
Examples Gallery
Five starter snippets. Use View Output to preview here, or open Try It Yourself to edit and run live (?tryit=1 through 5).
📚 Getting Started
Start with a full styled page, then style text and reusable classes.
Example 1 — Basic styled page
Classic first demo: light blue page background, centered white heading, and readable paragraph text.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My CSS Example</title>
<style>
body {
background-color: lightblue;
margin: 0;
font-family: system-ui, sans-serif;
}
h1 {
color: white;
text-align: center;
padding-top: 2rem;
}
p {
font-family: Verdana, sans-serif;
font-size: 20px;
max-width: 36rem;
margin: 1.5rem auto;
padding: 0 1rem;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text styled with CSS.</p>
</body>
</html>How It Works
The <style> block adds internal CSS. body, h1, and p are type selectors that target every matching element on the page.
Example 2 — Text color and font size
Style a heading with a type selector, then highlight one phrase with a class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Styling</title>
<style>
h2 {
color: #1d4ed8;
font-size: 1.75rem;
}
.highlight {
color: #dc2626;
font-weight: 700;
}
</style>
</head>
<body>
<h2>CSS makes text stand out</h2>
<p>Normal paragraph text with a <span class="highlight">highlighted phrase</span> inside.</p>
</body>
</html>How It Works
h2 styles every heading of that level, while .highlight only applies where the class attribute is present— letting you reuse the same look on any element.
📈 Practical Patterns
Reuse a class for buttons, layer the box model, then add a hover state.
Example 3 — Class selector (styled button)
The .btn class selector targets any element with class="btn", so you can reuse the same style on links or divs styled as buttons.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled Button</title>
<style>
.btn {
background-color: #2563eb;
color: white;
border: none;
padding: 0.65rem 1.25rem;
border-radius: 0.5rem;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn" type="button">Click Me</button>
</body>
</html>How It Works
Class selectors start with a dot (.btn) and match every element carrying that class—the core pattern behind reusable component styling.
Example 4 — Box model (padding, border, margin)
Padding, border, and margin on a .card container—the core box model properties.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style>
.card {
background: #f8fafc;
padding: 1.25rem;
border: 2px solid #cbd5e1;
border-radius: 0.75rem;
margin: 1.5rem auto;
max-width: 20rem;
}
</style>
</head>
<body>
<div class="card">
<h3>Card title</h3>
<p>Padding adds space inside the border.</p>
</div>
</body>
</html>How It Works
padding adds space inside the border, border draws the outline, and margin pushes the whole box away from its neighbors—the three layers of the CSS box model.
Example 5 — Hover state on a link
Pseudo-classes like :hover apply styles when the user interacts with an element—essential for accessible, responsive UI feedback.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hover Link</title>
<style>
a {
color: #2563eb;
text-decoration: none;
font-weight: 600;
}
a:hover {
color: #1d4ed8;
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="#">Hover over this link</a></p>
</body>
</html>How It Works
a sets the resting style; a:hover overrides color and adds an underline only while the pointer is over the link.
Use Cases
Real-world places where CSS shows up every day on the web.
1. Marketing & Brand Sites
Landing pages that reflect a consistent visual identity.
Example: a hero section with brand colors and custom typography.
2. Web App UI
Dashboards, forms, and component libraries with consistent spacing.
Example: a settings panel built from reusable classes.
3. Responsive Design
One codebase that adapts cleanly from phone to desktop.
Example: a navigation menu that collapses on small screens.
4. Dark Mode & Theming
Custom properties swap an entire color palette instantly.
Example: a theme toggle backed by CSS variables.
5. Print Stylesheets
Hide navigation and reflow content for printer-friendly pages.
Example: an invoice page styled with @media print.
6. Design Systems
Shared classes and tokens keep large sites visually consistent.
Example: a shared button and card component library.
Pro Tip: if you find yourself repeating the same inline styles, extract them into a class—that is the moment plain HTML starts needing CSS.
Advantages
Why CSS is an essential skill for anyone building for the web.
1. Separation of Concerns
Content lives in HTML; presentation lives in CSS—each can change independently.
2. Consistent Branding
One stylesheet keeps colors, fonts, and spacing uniform across every page.
3. Small Footprint, Great Caching
Browsers cache external
.cssfiles, so repeat visits load pages faster.4. Responsive & Accessible
Media queries and relative units help pages work on any screen and meet readability standards.
5. Huge Ecosystem
Frameworks like Bootstrap and Tailwind, plus browser DevTools, speed up real projects.
Pro Tip: version-control your CSS like code—because it is text, style changes show up cleanly in Git diffs.
Usage Tips
Follow these practices for clean, maintainable CSS.
1. Use external stylesheets for real sites
Keep CSS in
.cssfiles linked with<link>so browsers can cache and reuse them.2. Prefer classes over inline styles
Classes like
.cardare reusable and easier to override thanstyle="..."attributes.3. Keep selectors simple
Short, meaningful selectors are easier to read and less likely to cause specificity conflicts.
4. Design mobile-first
Start with a small-screen layout, then add media queries for larger viewports.
5. Debug with DevTools
Inspect computed styles and the box model live in the browser before editing files.
Pro Tip: know basic HTML first—CSS selects and styles the elements HTML creates.
Common Pitfalls
Avoid these mistakes when CSS does not look or behave as expected.
1. Overusing
!importantReaching for
!importantto win specificity fights makes future overrides much harder.→ Fix the selector or source order instead of forcing priority.
2. Inline styles everywhere
style="..."on every tag is hard to maintain and cannot be reused or cached.→ Move repeated styles into a class in an internal or external stylesheet.
3. Forgetting the cascade & specificity
A later rule—or a more specific selector—can silently override styles you just wrote.
→ Check source order and specificity in DevTools before adding another rule.
4. Huge, over-qualified selectors
Selectors like
div#main .content ul li a.linkare fragile and hard to override cleanly.→ Prefer a single meaningful class per element instead of long chains.
5. Never moving to external CSS
Staying in a single internal
<style>block on every page duplicates code and skips caching.→ Extract shared rules into a linked
.cssfile once a demo becomes a real site.
Pro Tip: if a style seems to vanish, check the cascade order, selector specificity, and whether a typo broke the whole rule.
🧠 How the Browser Applies CSS
1
Load HTML
The browser parses your markup and builds the DOM tree of elements.
Parse
2
Load CSS & match selectors
Stylesheets from <link> or <style> are parsed into rules, then matched to DOM nodes.
Styles
3
Cascade & compute
Specificity and source order pick the winning declarations for every property.
Cascade
=
Paint the page
The browser computes layout and draws colors, text, and spacing on screen.
Important Notes
- Every CSS rule is
selector { property: value; }—declarations end with a semicolon. - Add CSS inline, internally in a
<style>block, or externally via<link>. - When rules conflict, the cascade uses specificity and source order to pick a winner.
- Inline styles beat internal and external rules of equal specificity—use them sparingly.
- Custom properties (
--brand-color) let you theme a site by changing one variable. - Next step: see all three CSS methods in depth in How to Use CSS.
Quick Takeaway: write selector { property: value; } rules, pick the right way to add them, and let the cascade decide which value wins when rules overlap.
Compatibility
Browser Support
CSS is a W3C web standard supported in all modern browsers — and has been for many years — for inline, internal, and external stylesheets.
CSS 2.1+
CSS
Use inline, internal, or external CSS. Selectors, the box model, cascade rules, Flexbox, and Grid work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.
100% Modern browsers
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full supportCSS Universal
Bottom line: Safe for production sites. Prefer external stylesheets for caching; no polyfill is required for current browsers.
🎉 Conclusion
CSS is a versatile, powerful language for styling the web. Its separation from content, wide browser support, and ability to restyle an entire site from one file make it essential alongside HTML and JavaScript.
By understanding selectors, declarations, the three ways to add CSS, and the cascade, you can turn plain markup into polished, responsive pages.
Practice the five examples above, then continue to How to Use CSS—inline, internal, and external styles in more depth.
Use selectors, properties, values, and the cascade—then reach for Flexbox and Grid once basic styling feels natural.
Pro Tips
💡 Best Practices
✅ Do
- Use external stylesheets for multi-page sites
- Prefer classes (
.card) over inline styles for reuse - Check color contrast for readable text
- Start mobile-friendly; add media queries as you grow
- Use browser DevTools to debug layout issues
- Keep selectors simple and meaningful
❌ Don’t
- Overuse
!importantto fix specificity wars - Style everything with inline
style="..."attributes - Memorize every property before building a small page
- Write huge, over-qualified selector chains
- Copy huge frameworks before understanding plain CSS
- Forget to test on more than one browser size
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about CSS
Style HTML with confidence using rules and the cascade.
5
Core concepts 01
Selector + Rule
property: value; pairs
Basics 02
3 Ways to Add CSS
Inline, internal, external
Structure 03
Cascade
Specificity picks a winner
Rules 04
Box Model
Padding, border, margin
Layout 05
Next: How to Use CSS
Go deeper on each method
Path❓ Frequently Asked Questions
CSS (Cascading Style Sheets) is a stylesheet language used to style and format HTML and XML documents. It controls layout, colors, typography, spacing, and other visual aspects of web pages while keeping content and presentation separate.
Yes for basics. If you already know HTML tags, you can start styling text and backgrounds in an afternoon. Mastering layout, responsive design, and the cascade takes practice, but beginners see results quickly.
Yes. CSS selects and styles HTML elements, so you need markup to apply rules to. Learn basic HTML structure first, then add CSS to make pages look polished.
HTML defines structure and content (headings, paragraphs, links). CSS defines presentation (colors, fonts, spacing, layout). Together they build modern websites.
CSS is an open web standard maintained by the W3C and WHATWG. Anyone can use it without licensing fees. Popular frameworks like Bootstrap and Tailwind CSS are also open source.
Continue to How to Use CSS at /css/how-to-use to see inline, internal, and external styles in more depth. After that, work through Editors, Comments, Flexbox/Grid, Selectors, and Properties in the sidebar.
Did you Know? 🔊
CSS rules use a selector { property: value; } pattern. Add styles inline, inside a <style> block, or with an external .css file linked via <link rel="stylesheet" href="styles.css">. Håkon Wium Lie proposed CSS at CERN in 1994, and CSS1 became a W3C recommendation in 1996—making the cascade older than most JavaScript frameworks in use today. CSS can also style SVG elements with fill and stroke, and add classes with JavaScript to trigger animations.
Continue to How to Use CSS
Go deeper on inline, internal, and external styles—the three ways to connect CSS to HTML.
About the author
9 people found this page helpful