Every site you have ever visited is built from the same three materials: HTML for structure, CSS for presentation, and JavaScript for behavior. Of the three, CSS is the one you notice first — before you read a single word, you have already registered the colors, the typography, the spacing, and the layout.
But CSS is used for far more than making things pretty. It decides how a page reflows on a phone, how a button responds to a hover, what a page looks like when printed, and whether a visitor who prefers reduced motion gets a calm experience. In this guide, you will see exactly what CSS is used for, with real, working examples for each one.
What CSS Is Used For: The Big Picture
It is tempting to describe CSS as “the thing that makes websites look nice.” That is true, but it undersells it. CSS is the layer that adapts a single document to dozens of different contexts: a phone in portrait, a widescreen monitor, a screen reader, a printed page, a dark room at night, or a user who has set their browser font size to 24px because they find small text hard to read.
Here is the full scope, at a glance:
Typography
Font family, size, weight, line height, letter spacing, alignment, and text decoration.
Color & background
Text color, backgrounds, gradients, images, transparency, and blend modes.
Layout
Flexbox, Grid, positioning, floats, multi-column, and how boxes flow on the page.
Spacing
Padding, margin, gaps, widths, heights, and how much room each element takes up.
Responsiveness
Media queries, container queries, and fluid units so one page fits every screen.
Motion
Transitions, keyframe animations, transforms, and scroll-driven effects.
Visual effects
Shadows, borders, rounded corners, filters, backdrop blur, and clipping.
Theming
Custom properties, dark mode, and design tokens shared across a whole project.
Print output
Hiding navigation, adjusting colors, and controlling page breaks for printing.
Accessibility
Focus indicators, contrast, scalable units, and respecting user preferences.
The same CSS file can produce a desktop layout, a mobile layout, a print layout, and a high-contrast layout. That flexibility is the real reason CSS is used everywhere.
Use 1: Styling Text and Typography
Most of the web is text, so typography is where CSS does the most work. Font size, weight, line height, letter spacing, and measure (the length of a line) together determine whether a page feels effortless to read or exhausting.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typography</title>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #f8fafc; }
h1 {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0 0 12px;
color: #0f172a;
}
p {
font-size: 1rem;
line-height: 1.7;
color: #475569;
max-width: 55ch;
}
</style>
</head>
<body>
<h1>Typography is most of web design</h1>
<p>Font size, weight, line height, and letter spacing decide how
readable a page feels. Most of what you notice on a well-designed
site is typography, not decoration.</p>
</body>
</html>
Three properties here do most of the heavy lifting. line-height: 1.7 gives
the text room to breathe. letter-spacing: -0.02em tightens large headings,
which look loose at default spacing. And max-width: 55ch keeps lines at a
comfortable reading length — roughly 45 to 75 characters is the sweet spot.
A paragraph that spans the full width of a widescreen monitor is genuinely harder to
read, because your eye has to travel further to find the start of the next line.
max-width in ch units is the simplest fix.
Use 2: Colors, Backgrounds, and Gradients
CSS controls every color on a page: text, backgrounds, borders, icons, and shadows. It supports several color formats, and each has a sensible use.
- Hex —
#0891b2. Compact and familiar, used everywhere. - rgb() —
rgb(8 145 178). Useful when you want to build a color from channels. - hsl() —
hsl(192 92% 36%). Easier to reason about: hue, saturation, lightness. - Named colors —
tomato,rebeccapurple. Convenient for quick tests.
Backgrounds go far beyond a single flat color. CSS can paint gradients, layer images, control how they repeat, and set how they scale:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color</title>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #f8fafc; }
.swatch {
height: 90px;
border-radius: 12px;
margin-bottom: 12px;
display: flex;
align-items: flex-end;
padding: 12px;
color: #fff;
font-weight: 600;
}
.solid { background: #0891b2; }
.gradient { background: linear-gradient(135deg, #06b6d4, #7c3aed); }
.transparent { background: rgba(8, 145, 178, 0.35); color: #0f172a; }
</style>
</head>
<body>
<div class="swatch solid">Solid color</div>
<div class="swatch gradient">Linear gradient</div>
<div class="swatch transparent">Semi-transparent</div>
</body>
</html>Gradients are just a kind of background image, so they can be layered, angled, and combined with transparency. That is how most modern “glass” and “glow” effects are made — no image files involved at all.
Color is also an accessibility concern. Text should meet a contrast ratio of at least 4.5:1 against its background for normal-sized text. Low-contrast gray-on-gray looks elegant in a design tool and is unreadable in daylight.
Use 3: Laying Out the Page
Layout is the most visible thing CSS does. It decides where every element sits, how wide it is, and how it responds when space runs out. For most of the web’s history this was painful; today it is one of the best parts of the language.
Flexbox — arranging items in a line
Flexbox distributes items along a single axis and is the standard tool for navigation bars, toolbars, button rows, and centering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox</title>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #f8fafc; }
.row {
display: flex;
gap: 12px;
justify-content: space-between;
}
.box {
flex: 1;
padding: 20px;
border-radius: 10px;
background: linear-gradient(135deg, #06b6d4, #7c3aed);
color: #fff;
text-align: center;
font-weight: 600;
}
</style>
</head>
<body>
<div class="row">
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
</div>
</body>
</html>Grid — arranging items in rows and columns
CSS Grid handles two dimensions at once, which makes it the right tool for page layouts, galleries, and card grids. This single declaration is enough to build a responsive grid with no media queries:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}Read it as: “create as many columns as will fit, each at least 220px wide, sharing the remaining space equally.” The grid rewraps automatically as the viewport changes.
If the items sit in one line, use Flexbox. If they form a grid of rows and columns, use Grid. Real pages use both, often in the same component.
Use 4: Controlling Spacing
Spacing is the quietest and most powerful thing CSS does. Consistent gaps between elements are what make a design feel deliberate rather than accidental, and every space on the page comes from one of four properties.
- Padding — pushes the content away from its own border. Backgrounds extend into it.
- Margin — pushes neighbouring elements away. Always transparent.
- Gap — the space between items in a flex or grid container. Cleaner than margins on children.
- Width and height — how much room the box occupies in the first place.
Nearly every project begins with one rule that makes all of this far more predictable:
* {
box-sizing: border-box;
}
With border-box, padding and border are counted inside the width you set, so a
width: 300px element is genuinely 300px wide. Without it, the same element
renders wider than you asked for, which is one of the most common sources of layout bugs.
Rather than inventing a new value for every gap, define a small scale — 4, 8, 16, 24, 32, 48px — and use only those numbers. Consistent spacing is the fastest way to make a page look professionally designed.
Use 5: Making Pages Responsive
A page will be viewed on a 360px phone, a 768px tablet, a 1440px laptop, and occasionally a 3440px ultrawide monitor. CSS is what lets one document serve all of them well.
The first requirement is the viewport meta tag, which tells mobile browsers to use the device’s actual width instead of pretending to be a desktop:
<meta name="viewport" content="width=device-width, initial-scale=1">The second is a media query — a block of CSS that only applies when a condition is met. Resize the preview below and watch the panel change at 480px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive</title>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; margin: 0; background: #f8fafc; }
.panel {
background: #0f172a;
color: #fff;
padding: 20px;
border-radius: 12px;
text-align: center;
font-weight: 600;
}
@media (min-width: 480px) {
.panel {
background: #0891b2;
padding: 36px;
font-size: 1.15rem;
}
}
</style>
</head>
<body>
<div class="panel">
Resize the preview — the styles change at 480px wide.
</div>
</body>
</html>
Media queries are not the only tool. Flexible units such as %,
rem, and vw, plus fluid functions like
clamp(), let values scale smoothly between breakpoints instead of jumping:
h1 {
/* Never smaller than 1.5rem, never larger than 3rem */
font-size: clamp(1.5rem, 4vw, 3rem);
}That single line replaces three or four media queries and adapts continuously at every width in between.
Write the small-screen styles as your default, then add min-width media
queries for larger screens. It keeps the base CSS simpler and means phones download less
unnecessary styling.
Use 6: Interaction, Hover, and Animation
CSS does not just describe a static image — it responds to what the user is doing.
Pseudo-classes like :hover, :focus, and :active let
you style elements in different states, and transitions make the change smooth instead of
instant.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interaction</title>
<style>
body { font-family: system-ui, sans-serif; padding: 40px; background: #f8fafc; }
.btn {
padding: 12px 24px;
border: 0;
border-radius: 10px;
background: #0891b2;
color: #fff;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.btn:hover {
background: #7c3aed;
transform: translateY(-2px);
box-shadow: 0 12px 24px -10px rgba(124, 58, 237, 0.6);
}
.btn:active {
transform: translateY(0);
}
</style>
</head>
<body>
<button class="btn">Hover and click me</button>
</body>
</html>
Note that transition is declared on the base state, not on
:hover. That way the animation plays in both directions — on the way in and
on the way out.
Keyframe animations
A transition moves between two states. A keyframe animation can move through as many states as you like, run automatically, and repeat:
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.7; }
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #22c55e;
animation: pulse 2s ease-in-out infinite;
}This is how loading spinners, pulsing status indicators, and skeleton screens are built — entirely in CSS, with no JavaScript and no image files.
Animating transform and opacity is cheap because the browser
can handle it on the GPU. Animating width, height,
top, or margin forces a layout recalculation on every frame
and is a common cause of janky animation.
Use 7: Visual Effects
Shadows, rounded corners, borders, and filters are all CSS. They are the reason a modern interface can look polished without a single image asset — which also means it stays sharp at any resolution and can be restyled in seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Effects</title>
<style>
body { font-family: system-ui, sans-serif; padding: 32px; background: #eef2f9; }
.card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(14px);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 18px;
padding: 24px;
max-width: 320px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05),
0 24px 48px -24px rgba(15, 23, 42, 0.35);
}
.ring {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #06b6d4, #7c3aed);
box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.15);
margin-bottom: 14px;
}
h2 { margin: 0 0 8px; font-size: 1.1rem; color: #0f172a; }
p { margin: 0; color: #64748b; font-size: 0.92rem; }
</style>
</head>
<body>
<div class="card">
<div class="ring"></div>
<h2>Glass card</h2>
<p>Backdrop blur, layered shadows, and a gradient ring — all pure CSS.</p>
</div>
</body>
</html>
Three techniques are doing the work here. backdrop-filter blurs whatever sits
behind the card. Multiple comma-separated box-shadow values create a more
natural-looking depth than a single large shadow. And the ring on the circle is actually a
box-shadow with zero blur and a spread radius, rather than a real border.
Filters
The filter property applies image-editing effects to any element — images,
text, even entire containers:
.photo {
filter: grayscale(100%) contrast(1.1);
transition: filter 0.3s ease;
}
.photo:hover {
filter: grayscale(0%) contrast(1);
}That is a common gallery pattern: images sit desaturated until the pointer passes over them, then bloom into full color.
Use 8: Theming and Design Systems
CSS custom properties — commonly called CSS variables — let you store a value once and reuse it everywhere. They are the foundation of every modern theming system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Theming</title>
<style>
:root {
--brand: #0891b2;
--brand-dark: #0e7490;
--radius: 12px;
--space: 16px;
}
body { font-family: system-ui, sans-serif; padding: 24px; background: #f8fafc; }
.panel {
background: var(--brand);
color: #fff;
border-radius: var(--radius);
padding: var(--space);
margin-bottom: var(--space);
font-weight: 600;
}
.panel--dark {
background: var(--brand-dark);
}
</style>
</head>
<body>
<div class="panel">Themed with custom properties</div>
<div class="panel panel--dark">Change --brand once, everything updates</div>
</body>
</html>The practical payoff is enormous. To rebrand a site, you change one line. To build a dark theme, you redefine the same variables under a different condition — and every component that references them updates automatically.
Dark mode in a few lines
:root {
--bg: #ffffff;
--text: #0f172a;
--panel: #f8fafc;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0b1020;
--text: #e2e8f0;
--panel: #151c33;
}
}
body {
background: var(--bg);
color: var(--text);
}Because only the variable values change, no component rule needs to be duplicated. The entire site becomes dark-mode capable from one media query.
A set of custom properties for color, spacing, radius, and typography is called a design token system. It is how teams keep a large product visually consistent, and it is the CSS-side implementation of a design system.
Use 9: Print Styles
People still print web pages — recipes, tickets, receipts, articles, directions. By default, a printed page includes the navigation, the footer, and a lot of wasted ink. CSS lets you control exactly what goes on paper.
@media print {
/* Hide things that make no sense on paper */
nav,
footer,
.ad,
.newsletter-signup {
display: none;
}
/* Print-friendly colors and sizes */
body {
background: #fff;
color: #000;
font-size: 12pt;
line-height: 1.5;
}
/* Show the destination of every link */
a::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #555;
}
/* Keep cards from being split across pages */
.card {
break-inside: avoid;
}
}
The attr(href) trick is a favourite: on screen a link is just blue text, but
on paper the reader can actually see where it points. You can test print styles in most
browsers by opening the print preview.
A small print stylesheet costs a few minutes to write and dramatically improves the experience for anyone who prints your page. It is one of the highest-value, lowest-effort things CSS can do.
Use 10: Accessibility and User Preferences
CSS plays a direct role in whether a site is usable by everyone. Four things matter most.
Visible focus indicators
Keyboard users navigate with Tab, and they need to see where they are. Never remove the focus ring without providing a better one:
:focus-visible {
outline: 2px solid #0891b2;
outline-offset: 3px;
border-radius: 4px;
}Respecting motion preferences
Some people experience dizziness or nausea from animation. Browsers expose that preference, and CSS can respond to it:
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Scalable typography
Using rem instead of px means the layout respects the user’s
browser font-size setting. Someone who sets 20px as their base size gets a page that
scales with them instead of fighting them.
Sufficient contrast
Text needs a contrast ratio of at least 4.5:1 against its background (3:1 for large text). CSS is where that is set, and where it is most often gotten wrong. Browsers also expose a high-contrast preference:
@media (prefers-contrast: more) {
.card {
border: 2px solid currentColor;
}
a {
text-decoration: underline;
}
}
display: none removes content from the accessibility tree entirely, so
screen readers skip it. If you need to hide something visually but keep it available,
use a visually-hidden utility class instead.
Where Else CSS Is Used
CSS is not only for websites. The same concepts — selectors, properties, the cascade — appear in several other places, which is one reason learning it well pays off twice.
HTML email
Newsletters are styled with a limited, old-fashioned subset of CSS, often written inline. Layout is usually done with tables because email clients are conservative.
SVG
SVG images can be styled with CSS — fill, stroke, and even hover states — so an icon set can respond to the surrounding page.
Native and desktop apps
React Native, Electron, and similar frameworks use a CSS-like styling system, so the mental model transfers directly.
There is also the tooling ecosystem built on top of the language: preprocessors such as Sass and Less, utility frameworks such as Tailwind, CSS-in-JS libraries, and design tools that export CSS. All of them ultimately produce plain CSS, which is why learning the underlying language is more valuable than learning any single tool.
Frameworks come and go on a five-year cycle. CSS has been the styling language of the web for over twenty-five years and is still growing. Time spent learning it compounds.
Real-World Example: A Complete Card Component
Everything in this guide comes together in a single component. This card uses layout, spacing, color, typography, effects, interaction, theming, and responsiveness — in about thirty lines of CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card Component</title>
<style>
:root {
--brand: #0891b2;
--radius: 16px;
--space: 20px;
}
* { box-sizing: border-box; }
body {
font-family: system-ui, sans-serif;
background: #f1f5f9;
padding: 32px;
margin: 0;
}
.card {
max-width: 340px;
background: #fff;
border-radius: var(--radius);
padding: var(--space);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
0 20px 40px -28px rgba(15, 23, 42, 0.4);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
0 28px 48px -26px rgba(8, 145, 178, 0.5);
}
.card__badge {
display: inline-block;
background: rgba(8, 145, 178, 0.12);
color: var(--brand);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.card__title {
margin: 0 0 8px;
font-size: 1.15rem;
line-height: 1.3;
color: #0f172a;
}
.card__text {
margin: 0 0 16px;
font-size: 0.92rem;
line-height: 1.65;
color: #64748b;
}
.card__button {
display: inline-block;
background: var(--brand);
color: #fff;
text-decoration: none;
font-size: 0.88rem;
font-weight: 600;
padding: 10px 18px;
border-radius: 10px;
transition: background 0.2s ease;
}
.card__button:hover {
background: #0e7490;
}
@media (min-width: 520px) {
.card { padding: 28px; }
}
</style>
</head>
<body>
<article class="card">
<span class="card__badge">Guide</span>
<h2 class="card__title">What CSS is used for</h2>
<p class="card__text">
Layout, typography, color, spacing, responsiveness,
motion, theming, print output, and accessibility.
</p>
<a class="card__button" href="#">Read more</a>
</article>
</body>
</html>
Notice how the class names describe purpose rather than appearance —
card__badge, not blue-pill. Notice also the
box-sizing reset, the custom properties at the top, the
transition on the base state, and the single media query. Those habits are
what separate a stylesheet that survives a redesign from one that has to be rewritten.
The block__element--modifier pattern used here (card, card__title,
card–featured) is called BEM. It is not required, but it keeps class names predictable
and avoids accidental collisions as a project grows.
Common Misconceptions About CSS
A few persistent myths cause people to underestimate what CSS is used for, or to give up on it too early.
“CSS is just colors and fonts”
Color and typography are a small part of it. CSS also owns layout, responsive behavior, animation, theming, print output, and a meaningful share of accessibility. Modern CSS replaces work that once required JavaScript or images.
“CSS is easy, so it isn’t real engineering”
The syntax is simple; the system is not. Managing specificity across a large codebase, keeping layouts stable across browsers, and maintaining performance on a content-heavy page are genuine engineering problems.
“You need a framework to build anything real”
Frameworks help at scale, but plain CSS now has Flexbox, Grid, custom properties,
clamp(), container queries, and nesting. A great deal of what frameworks
provided is built into the language.
“CSS can replace JavaScript”
It cannot. CSS handles presentation and some interaction feedback, but it cannot fetch data, manage state, validate a form, or perform logic. The two languages solve different problems and work together.
CSS fails silently. A typo in a property name, a missing semicolon, or a selector that matches nothing produces no error at all — the rule simply does nothing. That is why developer tools and a validator matter so much.
Best Practices
These habits make CSS easier to write, easier to change, and easier to hand to someone else.
Keep CSS external
Link one stylesheet from the head instead of scattering inline styles through the HTML.
Name by purpose
.alert survives a redesign; .red-box does not.
Keep specificity low
Favour single class selectors. Avoid IDs for styling and use !important rarely.
Set box-sizing globally
* { box-sizing: border-box; } removes an entire class of sizing bugs.
Use custom properties
Store brand colors, spacing, and radii as variables so a change happens in one place.
Prefer relative units
rem, em, %, and ch scale with user settings.
Design mobile-first
Write the small-screen styles first, then add min-width queries upward.
Animate cheap properties
Stick to transform and opacity to keep animations smooth.
Never remove focus rings
Replace them with something clearer instead. Keyboard users depend on them.
Keep CSS in its own file, name things by what they are, keep specificity low, and use custom properties for anything you might want to change later.
Frequently Asked Questions
1. What is CSS mainly used for?
CSS is mainly used to control the presentation of a web page — its colors, fonts, spacing, layout, borders, shadows, animation, and how it adapts to different screen sizes.
2. Can a website work without CSS?
Yes. A page without CSS still displays all of its content using the browser’s default styles. It is readable but plain, and any custom layout, branding, or responsive behavior is lost.
3. Is CSS used for layout?
Yes. Modern CSS handles layout with Flexbox for one-dimensional arrangements and Grid for rows and columns together. Older techniques such as floats and tables are no longer needed for layout.
4. Can CSS create animations?
Yes. CSS transitions animate a property change between two states, and CSS keyframe animations run a sequence of states automatically. Both run in the browser without JavaScript.
5. Does CSS affect SEO?
Indirectly. CSS is not a ranking factor itself, but it affects Core Web Vitals such as layout shift and interaction responsiveness, which do influence search performance.
6. Can CSS replace JavaScript?
No. CSS can handle presentation and some interaction feedback, but it cannot perform logic, fetch data, or manage application state. The two languages work together.
7. What is CSS used for in responsive design?
CSS media queries apply different styles at different viewport sizes, while flexible units and modern layout modules let content reflow. Together they make one page work on phones, tablets, and desktops.
8. Is CSS used outside websites?
Yes. CSS or CSS-like styling appears in HTML email, SVG graphics, native mobile apps through frameworks such as React Native, and desktop apps built with Electron.
9. What are CSS custom properties used for?
Custom properties, also called CSS variables, store reusable values such as brand colors or spacing. Changing one variable updates every rule that references it, which makes theming and dark mode straightforward.
10. Can CSS style printed pages?
Yes. An @media print block lets you hide navigation, switch to
print-friendly colors, adjust font sizes, and control page breaks so a web page prints
cleanly.
11. How does CSS help accessibility?
CSS supports accessible design through visible focus indicators, sufficient color
contrast, scalable relative units, and media queries such as
prefers-reduced-motion and prefers-contrast.
12. How much CSS do I need to learn?
A core set — selectors, the box model, color, typography, Flexbox, Grid, and media queries — covers the vast majority of everyday work. Everything beyond that can be looked up as needed.
Key Takeaways
- CSS controls every visual and spatial aspect of a page: type, color, layout, and spacing.
- It also handles responsiveness, motion, theming, print output, and accessibility.
- Flexbox lays out items in one dimension; Grid handles rows and columns together.
- Media queries and fluid units let one page adapt to every screen size.
- Transitions animate between two states; keyframe animations run through many.
- Custom properties make theming and dark mode a matter of changing a few values.
- An
@media printblock can hide navigation and format a page for paper. - CSS is essential to accessibility: focus rings, contrast, and reduced-motion support.
- It is also used in email, SVG, and native apps — the mental model transfers.
- Keep CSS external, name by purpose, keep specificity low, and prefer relative units.
What to Learn Next
Now that you know what CSS is used for, the next step is to go deeper on the two areas you will use most. Start with CSS Selectors Explained and The CSS Box Model.
From there, explore CSS Colors and Backgrounds, CSS Typography, and CSS Units: px, em, and rem. When you are ready to build layouts, read CSS Flexbox Guide and CSS Grid Guide, then move on to Responsive Web Design and CSS Custom Properties.
Practice Challenge
The best way to see what CSS is used for is to use it for several different jobs at once. This exercise takes about fifteen minutes and touches most of the sections above.
- Create
index.htmlandstyles.cssin the same folder, and link them with<link rel="stylesheet" href="styles.css">. - At the top of the stylesheet, add
* { box-sizing: border-box; }and a:rootblock with three custom properties: a brand color, a radius, and a spacing value. - Build a page with a heading, a paragraph, and three cards inside a container.
- Make the container a CSS Grid with
repeat(auto-fit, minmax(220px, 1fr))and a gap. - Style each card with padding, a border-radius from your variable, and a layered box-shadow.
- Set the heading with
font-size: clamp(1.5rem, 4vw, 2.5rem)and give the paragraph amax-widthinch. - Add a
:hoverstate on the cards usingtransform: translateY(-4px)and a transition. - Add a
@media printblock that hides the cards and prints the paragraph in black on white. - Add a
@media (prefers-reduced-motion: reduce)block that disables the transitions. - Open the page, resize the window, print-preview it, and inspect a card in DevTools.
If you complete those steps, you have used CSS for layout, spacing, typography, color, effects, interaction, theming, responsiveness, print output, and accessibility — which is a fairly complete answer to the question of what CSS is used for. Everything else you learn will be a refinement of these same ideas.
Inar Learn 