CSS transforms raw HTML structure into visually coherent, responsive, and maintainable enterfaces. Without styling, web content remains functionally complete but aesthetically static—reminiscent of early web pages before design systems matured.
What Is a CSS Stylesheet?
A stylesheet is a set of declarative rules that define how HTML elements should be rendered. Each rule consists of three core components:
- Selector: Identifies which element(s) the rule applies to (e.g.,
h1,.card,#header). - Property: Specifies a visual characteristic (e.g.,
font-weight,background-color,display). - Value: Assigns a concrete setting to that property (e.g.,
bold,#333,flex).
Syntax follows this pattern:
selector {
property-name: value;
another-property: another-value;
}
Core CSS Properties Overview
Common CSS Properties and Valid Values
| Property | Purpose | Example Values |
|---|---|---|
color |
Sets foreground text color | indigo, #4a5568, rgb(74, 85, 104) |
font-size |
Controls type size | 1.25rem, 20px, clamp(1rem, 2.5vw, 1.5rem) |
font-family |
Defines typeface stack | "Inter", sans-serif, "Georgia", serif |
background-color |
Sets background fill | rgba(255, 255, 255, 0.9), hsl(210, 20%, 95%) |
margin / padding |
Controls spacing outside/inside an element | 1.5em, 0.75rem 1rem, auto |
border |
Draws outline with width, style, and color | 2px dashed #e2e8f0, 1px solid currentColor |
width / height |
Sets dimensional constraints | max-content, fit-content(300px), 100% |
text-align |
Aligns inline content horizontally | start, end, center, justify |
display |
Determines layout behavior | grid, flex, contents, none |
position |
Controls coordinate system origin | sticky, relative, absolute |
opacity |
Adjusts element transparency | 0.85, 0, 1 |
z-index |
Orders stacking context layering | 10, -1, auto |
Selector Types in Practice
Element Selectors
Target all instances of a given HTML tag. No prefix required.
<head>
<style>
h1 {
font-family: "Segoe UI", system-ui;
color: #2d3748;
margin-bottom: 0.5rem;
}
</style>
</head>
Class Selectors
Begin with a dot (.) and apply reusable styles across multiple elements via the class attribute.
<style>
.headline-primary {
font-size: clamp(1.5rem, 4vw, 2.5rem);
color: #1a202c;
}
.headline-secondary {
font-size: 1.25rem;
color: #4a5568;
font-weight: 600;
}
</style>
<h1 class="headline-primary">Main Title</h1>
<h2 class="headline-secondary">Subheading</h2>
ID Selectors
Begin with a hash (#) and uniquely target one element using its id attribute. Avoid overuse—prefer classes for styling.
<style>
#site-banner {
background: linear-gradient(135deg, #4299e1, #2b6cb0);
padding: 1.5rem;
text-align: center;
}
</style>
<header id="site-banner">
<h1>Welcome to Our Platform</h1>
</header>
Three Ways to Apply CSS
Inline Styles
Apply directly on an element using the style attribute. Useful for dynamic or one-off overrides—but not scalable.
<p style="color: #e53e3e; font-weight: bold;">Urgent notice</p>
Internal Stylesheets
Embed CSS in side a <style> block within the document’s <head>. Ideal for page-specific rules.
<head>
<style>
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
</style>
</head>
External Stylesheets
Link to a separate .css file using <link>. Enables caching, reuse, and separation of concerns.
<head>
<link rel="stylesheet" href="/assets/styles/main.css">
</head>
In main.css:
/* Resets and base typography */
* {
box-sizing: border-box;
}
body {
line-height: 1.6;
font-family: "Inter", -apple-system, system-ui;
}
.card {
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 1.25rem;
}
This approach decouples presentation from markup, enabling consistent theming, easier maintenance, and collaborative workflows.