What CSS is and why it exists
CSS stands for Cascading Style Sheets. It is a stylesheet language: you write rules that describe how a document should be presented. HTML supplies the content and meaning of a page; CSS controls much of its appearance, including colour, fonts, spacing, borders and layout. The same HTML can look different on a phone, a desktop screen or a printed page because different CSS rules can apply.
CSS was created so authors would not have to mix every visual decision into the document markup. A shared stylesheet can keep several pages consistent, and a change to that stylesheet can update their presentation without rewriting their HTML. The “cascading” part describes how the browser resolves competing style declarations from different sources and rules.
CSS is not usually called a general-purpose programming language: its rules describe presentation rather than running an arbitrary sequence of commands. It does have sophisticated features such as calculations, variables and conditional rules, so “not programming” does not mean “simple” or “unimportant”. Developers learn CSS because structure alone does not determine whether a page is legible, usable or well laid out.
From early stylesheets to modern CSS
Håkon Wium Lie proposed a cascading style-sheet approach in 1994 while working at CERN. Bert Bos also played an important role in developing CSS. CSS Level 1 became a W3C Recommendation in December 1996. It gave web authors a way to control presentation separately from HTML at a time when the Web needed more consistent styling across pages.
CSS1 and CSS2 were broad, historical language specifications. Later work was divided into modules for areas such as colour, selectors, fonts, Grid and media queries. The W3C CSS Working Group develops these specifications, and browser makers implement individual features on their own schedules. A module might have “Level 4” in its name, but there is no single universal CSS4 release that every browser either has or lacks. Check the particular feature and target browsers rather than relying on a CSS version label.
How CSS works with HTML
A browser can show an HTML page without your stylesheet, using its built-in default styles. Add a CSS rule and the same heading, paragraph or card can gain a different colour, size or position without changing what the HTML means. JavaScript has a different job: it can respond to events and change content or behaviour. You can build a useful, styled page with HTML and CSS even when no JavaScript is needed.
For a local project, put index.html and styles.css in the same folder, then add the link element below inside the HTML head. The href path must match the filename. The browser fetches or reads that stylesheet and applies its rules to the page. Inline styles and a style element also exist, but an external file is usually easier to reuse across pages.
index.html — inside <head>
<link rel="stylesheet" href="styles.css">Reading a rule and seeing the result
A basic CSS rule has a selector followed by declarations inside braces. In .card { padding: 1rem; }, .card selects HTML elements whose class attribute contains card. The declaration sets the padding property to a value of 1rem, adding space inside their border. A semicolon ends the declaration; a rule can contain several declarations. The first interactive example below styles the sample card in its preview.
The browser parses the HTML into a document tree and parses CSS into style rules. It matches selectors to elements, resolves conflicts through the cascade, computes values, lays out boxes and paints the result. Some properties, such as color, inherit from a parent by default; others, such as margin, do not. A rule can also lose to another applicable rule, so “my CSS is not working” may mean that a selector does not match, a stylesheet did not load, or a different declaration wins.
The existing Basic Selectors and Specificity guides go deeper. For now, change one declaration in the example, run it again and compare the preview. That small experiment connects the written rule to the visible result.
Adapting to different screens and preferences
Responsive design means making a page usable across available screen sizes and input situations. Flexible widths, wrapping layouts and appropriately sized text often do much of the work. Media queries let CSS apply additional rules when a condition is true, such as when the viewport is narrow. The second example below changes a three-column grid into one column at a narrower width; resizing the preview or opening it on a phone helps reveal the difference.
CSS can also respond to user preferences, including reduced motion or a light or dark colour scheme. Those preferences are useful, but no single media query guarantees an accessible design: readable contrast, sensible text sizes and a layout that still works when zoomed all need attention.
Where CSS is useful—and its limits
CSS styles articles, navigation, forms and application interfaces on websites. It can create spacing and typography for long reading pages, align dashboard panels with Grid or Flexbox, distinguish button states, adapt a checkout form to a narrow screen and define print styles. Developers also use CSS in web-based mobile or desktop interfaces because those interfaces are rendered with web technologies.
Its strengths are separation of content from presentation, reusable rules, responsive layout and broad browser support for established features. The main difficulties are the cascade and inheritance when many rules compete, layout behaviour that depends on surrounding content, and uneven support for newer features. CSS does not replace semantic HTML or JavaScript: it cannot supply a missing heading’s meaning or implement an application’s data logic. Test the actual design at different widths and in the browsers you need to support.
A beginner path through Codectionary
If HTML is new to you, start with its introduction and first-page guide. Then write a CSS rule, connect a stylesheet to your HTML, and use the interactive examples below to see the effect. Codectionary’s Playground includes an HTML file and a CSS file; select style.css to edit styles and inspect the page preview. A CSS example opened from documentation gets sample HTML so the styles have something to affect. You do not install CSS separately.
Next, learn Basic Selectors to choose elements, the Box Model to understand space around them, Font Properties and Color Values for readable presentation, then Flexbox or Grid for layout. Finish with Media Queries and user-preference queries. These reference articles are separate so you can revisit a topic when you need it instead of memorising every property now.
Syntax
selector {
property: value;
}Examples
Style a simple card
Use class selectors and declarations to make the sample card in the preview easier to read.
.card {
max-width: 28rem;
padding: 1.5rem;
background: #eef5ff;
color: #172b4d;
border: 2px solid #2d6cdf;
border-radius: 0.75rem;
}
.card h2 {
margin-top: 0;
font-size: 1.5rem;
}
.card .btn {
padding: 0.6rem 1rem;
background: #2d6cdf;
color: white;
border: 0;
border-radius: 0.4rem;
}- The preview supplies HTML with a card class, a heading and a button. CSS changes their appearance without changing the HTML content.
- .card selects the card. max-width prevents it becoming too wide; padding adds space inside its border; background and color set the surface and text colours.
- .card h2 selects a heading inside the card, while .card .btn selects its button. Their rules adjust spacing, type size and button colours.
- Run the example, then change the background colour or padding and run it again. A reusable card rule like this can style many cards across a site.
- The card selector styles this study-plan article.
- The heading rule changes the nested heading without affecting unrelated text.
- Change the padding or border and compare the panel’s shape.
HTML used by this example
<article class="card"><h2>Weekly study plan</h2><p>Read one guide, edit its example and explain the result in your own words.</p><button class="btn">Continue learning</button></article>Make a grid adapt to a narrow viewport
Use Grid for three columns and a media query to stack the sample boxes when space is limited.
.container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.container .box {
padding: 1.25rem;
background: #dbeafe;
color: #172b4d;
border-radius: 0.5rem;
}
@media (max-width: 35rem) {
.container {
grid-template-columns: 1fr;
}
}- The preview supplies a container with three boxes. display: grid makes the container a grid, and repeat(3, minmax(0, 1fr)) creates three equal columns that can shrink without their minimum content size forcing a wider track.
- gap separates the boxes. The .container .box rule gives each box internal space and visible colours.
- The @media rule applies when the viewport width is 35rem or less. It replaces the three-column setting with one flexible column, so the boxes stack.
- Run the example and compare wide and narrow preview widths. In a real project, choose a breakpoint where your content stops fitting, rather than copying 35rem without testing.
- The three learning steps are individual grid items.
- The column definition divides available space rather than placing three fixed-width blue boxes.
- Resize the preview to activate the narrow-screen rule.
HTML used by this example
<div class="container"><div class="box">Read</div><div class="box">Experiment</div><div class="box">Explain</div></div>CSS: background & uses
- Used for
- Responsive layouts, Visual styling, Animation
- Created by
- Håkon Wium Lie and Bert Bos
- First released
- 1996 · CSS1 standard (proposed in 1994)
- Version / standard
- Evolving CSS modules
Features have separate specification levels; CSS has no single latest version.
In the real world
- GitHub: The Primer CSS design system
- GOV.UK: GOV.UK Frontend styles
- Wikimedia: The Codex interface design system
Facts checked 8 September 2026. Product links describe documented uses.
Best practices
- Use semantic HTML for meaning, then CSS for presentation.
- Keep related styles in a reusable stylesheet and give classes names that describe their role.
- Check that text remains readable, controls have visible focus states and layouts work when zoomed.
- Test newer CSS features in the browsers your audience uses rather than assuming a broad CSS version guarantees support.
Runtime & versions
Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
CSS specifications (modules)