What Is CSS? A Complete Guide to Styling Web Pages
Learn what CSS is, how it styles HTML, and how selectors, properties, the cascade, box model, layouts, and media queries work together to control how web pages appear.
Open a modern website and you might see a navigation bar across the top, a large heading in the centre, cards arranged neatly in columns, carefully chosen fonts, buttons with rounded corners, and a layout that changes when you open it on a phone. HTML provides the content and structure behind that page, but CSS controls how most of it looks.
CSS stands for Cascading Style Sheets. It is a language used to describe the presentation of HTML documents, including colors, typography, spacing, dimensions, positioning, and page layouts. It also allows the same HTML to adapt to different screen sizes, which is a large part of how responsive websites work.
A useful way to think about the relationship is that HTML describes what something is, while CSS describes how it should appear. An HTML element might say, “this is a heading.” CSS can then say that the heading should be 48 pixels tall, bold, dark blue, centred, and separated from the content below it by 24 pixels.
What Is the Difference Between HTML and CSS?
Consider a simple piece of HTML:
<h1>Welcome to Workshelve</h1>
<p>Practical guides for understanding technology.</p>
Without additional styling, the browser still displays both elements because browsers have their own default styles. The heading appears larger than the paragraph, for example, because the browser already knows how an <h1> normally looks.
CSS allows us to replace or extend those defaults:
h1 {
color: #1d4ed8;
font-size: 42px;
}
p {
color: #475569;
font-size: 18px;
}
The HTML has not changed. The heading is still a heading and the paragraph is still a paragraph. CSS has simply changed their presentation.
This separation is useful because the same styling rules can be applied across hundreds or thousands of HTML elements without rewriting the style information inside each one.
CSS Selectors Decide What Gets Styled
Before CSS can change an element, it needs a way to identify it. That is the job of a selector.
A selector can target an HTML element directly:
p {
color: black;
}
This selects every <p> element.
Classes provide more control:
<p class="warning">Your session is about to expire.</p>
The corresponding CSS uses a period before the class name:
.warning {
color: red;
}
An ID can also be selected using #:
#navigation {
background-color: navy;
}
Selectors can become much more specific. CSS can target elements inside other elements, elements in particular states, or elements with certain attributes. The underlying idea remains the same: the selector identifies which part of the HTML a style should affect.
Declarations, Properties, and Values
A complete CSS rule is often called a ruleset:
.card {
background-color: white;
padding: 24px;
border-radius: 8px;
}
.card is the selector.
Everything inside the braces contains the declarations.
Each declaration consists of a property and a value:
padding: 24px;
↑ ↑
property value
The property describes what should change. The value describes what it should become.
For example:
color: blue;
font-size: 18px;
margin-top: 20px;
width: 300px;
CSS contains a large collection of properties for controlling visual appearance and layout. Learning CSS is partly about learning those properties, but the more difficult part is understanding how their rules interact.
Why CSS Is Called Cascading
The “C” in CSS stands for cascading, and it describes how the browser decides which style wins when multiple rules apply to the same element.
Suppose we have:
p {
color: blue;
}
.article-text {
color: green;
}
and the HTML is:
<p class="article-text">Hello</p>
Both rules apply to the paragraph. The browser therefore needs a method for deciding which declaration should take effect.
That decision is influenced by the cascade, which considers factors including where styles come from, their importance, selector specificity, and their order.
This is why CSS can occasionally feel confusing. A declaration can be perfectly valid and still appear to do nothing because another rule has won the cascade.
Specificity Decides Which Selector Is Stronger
Specificity is part of the mechanism CSS uses to resolve competing rules. Different selectors have different levels of specificity.
An element selector such as:
p { }
is less specific than a class selector:
.article { }
and an ID selector is more specific again:
#featured-article { }
This means a more specific rule can override a less specific one even if both target the same element.
When selectors have the same specificity, their position can matter, with later declarations often taking precedence over earlier ones when the other cascade factors are equal.
Understanding specificity prevents a common beginner habit: adding increasingly aggressive CSS until something finally changes. Usually the better solution is finding which rule is winning and understanding why.
Inheritance Lets Some Styles Flow Down the HTML Tree
HTML documents form a hierarchy. Elements contain other elements, and CSS can take advantage of that through inheritance.
For example:
body {
color: #222;
font-family: Arial, sans-serif;
}
Text inside the body will generally inherit those values unless another rule overrides them.
Not every CSS property is inherited. Text-related properties such as color and font-family commonly are, while layout properties such as margin generally are not.
Inheritance reduces repetition. Instead of defining the same font on every paragraph, heading, button, and list, a broader rule can establish a default and individual components can override it when necessary.
The CSS Box Model Explains Why Elements Take Up Space
One of the most important concepts in CSS is the box model. Browsers effectively treat HTML elements as rectangular boxes made from several layers:
┌────────────── Margin ──────────────┐
│ ┌─────────── Border ───────────┐ │
│ │ ┌──────── Padding ───────┐ │ │
│ │ │ │ │ │
│ │ │ Content │ │ │
│ │ │ │ │ │
│ │ └────────────────────────┘ │ │
│ └──────────────────────────────┘ │
└────────────────────────────────────┘
Content is the actual text, image, or other material inside the element. Padding creates space between the content and its border. Border surrounds the element, while margin creates space outside it.
For example:
.card {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
margin: 16px;
}
Understanding these layers explains many common layout problems. An element can appear larger than expected because its padding and borders contribute to the space it occupies.
Developers often use:
box-sizing: border-box;
to make declared widths and heights include padding and borders, which can make sizing easier to reason about.
Colors and Typography Create the Visual Language
CSS provides several ways to represent colors. Named colors such as red work, but real projects commonly use hexadecimal, RGB, HSL, and related formats:
color: #1e293b;
background-color: rgb(248, 250, 252);
border-color: hsl(215, 20%, 65%);
Typography is controlled through properties such as:
.article {
font-family: Georgia, serif;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
}
These choices affect much more than decoration. Font size, line height, contrast, and spacing all influence whether content is comfortable to read. A page can contain excellent information and still be unpleasant to use if its typography makes every paragraph feel like work.
Spacing Gives Content Room to Breathe
Much of web design is really the careful management of empty space.
CSS provides margin, padding, gap, and other properties for controlling that space:
section {
padding: 48px 24px;
}
.card-grid {
gap: 20px;
}
h2 {
margin-bottom: 16px;
}
Spacing helps establish relationships between elements. Items placed close together appear related, while larger gaps can signal the beginning of a new section.
This is why randomly changing margins until a page “looks about right” becomes difficult to maintain. Consistent spacing creates a visual system that can be reused throughout an application.
CSS Layouts Control Where Everything Goes
Early web layouts relied heavily on techniques that were never really designed for page layout. Modern CSS provides much stronger tools, particularly Flexbox and CSS Grid.
Flexbox works well when arranging items primarily along one dimension:
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
}
CSS Grid is particularly useful for two-dimensional layouts:
.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
This creates three equal columns with space between them.
Neither tool is universally better. Flexbox is often convenient for rows, navigation, alignment, and smaller components, while Grid works naturally for page sections and layouts involving rows and columns.
Responsive Design Lets One Page Work Across Different Screens
A website designed only for a desktop monitor would be awkward on a phone. Responsive design allows layouts and styles to adapt to different screen sizes and capabilities.
Modern CSS layouts can already adapt naturally. For example:
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
The browser can adjust the number of columns according to the available space.
Sometimes more explicit changes are needed. That is where media queries become useful.
Media Queries Apply Styles Under Specific Conditions
A media query allows CSS rules to apply only when certain conditions are met.
For example:
@media (max-width: 768px) {
.navigation {
flex-direction: column;
}
.page-title {
font-size: 32px;
}
}
When the viewport is 768 pixels wide or narrower, these rules take effect.
Media queries can change layouts, spacing, typography, navigation, and other presentation details. They are one of the tools that allow the same HTML document to work across phones, tablets, laptops, and large displays rather than maintaining a completely separate page for every device.
External Stylesheets Keep CSS Separate
There are several ways to add CSS to HTML. The most common for larger sites is an external stylesheet.
The HTML references a separate .css file:
<link rel="stylesheet" href="styles.css">
The stylesheet then contains the rules:
body {
font-family: Arial, sans-serif;
}
h1 {
color: #1e40af;
}
External stylesheets keep presentation separate from document structure and allow the same CSS file to be reused across multiple pages. They are usually the easiest approach to maintain as a website grows.
Internal CSS Lives Inside the HTML Document
CSS can also be placed directly inside a <style> element:
<head>
<style>
h1 {
color: navy;
}
</style>
</head>
This is known as internal CSS.
It can be convenient for a small page or a self-contained example, but those styles only belong to that document. Once several pages need the same rules, an external stylesheet generally becomes easier to manage.
Inline CSS Styles One Element Directly
The third common approach is inline CSS:
<p style="color: red;">Important message</p>
The style is attached directly to the HTML element.
Inline styles can be useful in particular situations, especially when styles are being generated dynamically, but using them throughout a site quickly becomes difficult to maintain. Presentation gets mixed into the HTML, repeated styles become common, and global changes become harder.
The three approaches therefore differ mainly in where the CSS lives:
External CSS → separate .css file
Internal CSS → <style> inside the HTML document
Inline CSS → style attribute on an individual element
CSS Transitions and Animations Add Movement
CSS can also control how elements change over time. This is useful for hover effects, menus, buttons, loading indicators, and other interface elements that benefit from a smoother visual response.
A transition animates the change between two property values. For example:
button {
transform: scale(1);
transition: transform 0.2s;
}
button:hover {
transform: scale(1.05);
}
When the user moves the pointer over the button, the browser gradually changes its scale instead of switching instantly from one size to another.
Transitions work well when an element already has a clear starting and ending state. CSS can animate many properties this way, including opacity, transform, background-color, and color.
For more controlled movement, CSS provides keyframe animations:
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.notification {
animation: pulse 1s ease-in-out infinite;
}
The @keyframes rule defines what should happen at different points during the animation. The animation property then controls its duration, timing, and repetition.
CSS animations are useful for relatively simple visual effects because they can run without JavaScript. JavaScript may still be needed when movement depends on more complicated application logic or user interactions.
How the Browser Turns CSS Into a Page
When a browser receives a web page, it does more than simply read HTML from top to bottom and display it.
The browser parses the HTML to understand the document structure. It also parses the CSS and determines which rules apply to which elements. The cascade, specificity, and inheritance rules help resolve the final styles.
The browser then needs to calculate layout: how large elements are, where they belong, how text wraps, and how boxes relate to one another. Finally, those results are painted to the screen.
This browser rendering process is why changing CSS can affect more than appearance. Some changes require the browser to recalculate layout, while others primarily affect painting. On complex pages, the way styles are applied can therefore have performance implications as well as visual ones.
CSS Is a System of Rules, Not Just Decoration
It is easy to think of CSS as the part of web development that makes things pretty. That description misses most of what makes it interesting.
CSS decides how content is arranged, how much space elements occupy, which styles override others, how properties pass through the document, and how a page responds when the available screen changes.
Selectors determine what gets styled. Declarations combine properties with values. Rulesets package those decisions together. The cascade, specificity, and inheritance decide what happens when those rules overlap. The box model controls physical space, while layout systems and media queries determine how that space behaves across different screens.
HTML gives a web page its structure. CSS takes that structure and turns it into something people can comfortably read and use.
Once CSS makes sense as a system of interacting rules rather than a collection of visual properties, many of its supposedly strange behaviors become much easier to explain. The browser is not randomly ignoring your styles. It is following a set of rules about which style wins, what gets inherited, how boxes are sized, and where everything should eventually appear on the screen.