Introduction to CSS & How It Works
CSS (Cascading Style Sheets) is the language that transforms plain HTML into beautiful, responsive and accessible web pages. Every colour, font, layout and animation you see on the web is driven by CSS.
What is CSS?
CSS stands for Cascading Style Sheets. It is the standard language used to describe the visual presentation of web pages written in HTML. While HTML creates the structure and content, CSS controls everything you see — colours, fonts, spacing, layout, animations and responsiveness.
CSS is not a programming language. It is a style sheet language — a set of declarative rules that tell browsers how HTML elements should look. Without CSS, every web page would be plain black text on a white background.
.css file — a separate document shared
across many HTML pages for a consistent design system.HTML, CSS & JavaScript — The Web Trio
Every modern web page is built on three technologies that work together. Think of building a house: HTML is the bricks and walls, CSS is the paint and interior design, and JavaScript is the electricity that makes everything interactive.
CSS Syntax — Selectors, Properties & Values
Every CSS rule follows the same simple pattern: a selector targets an HTML element, followed by a declaration block with one or more property: value pairs in curly braces.
h1 {
color: #264de4; /* property: value; */
font-size: 2rem;
font-weight: 700;
margin-bottom: 16px;
}
p {
color: #52524a;
line-height: 1.7;
}
h1, .class, #id).
Property — what to change (color, font-size).
Value — the setting to apply (red, 16px).
A Brief History of CSS
CSS was created to solve the problem of mixing presentation with content in HTML. Here are the milestones that shaped the language:
::before and ::after.Key Features of CSS
Why is CSS the universal language of web design?
--brand: #264de4; — reusable values that
cascade through your stylesheet and can be updated by JavaScript.prefers-reduced-motion,
high-contrast modes and visible focus styles for assistive technologies.The Cascade & Specificity
When multiple CSS rules target the same element, the browser uses specificity and source order to decide which one wins. Understanding this is the key to writing predictable CSS.
!important overrides the entire cascade and makes debugging very
difficult. Use it only as a last resort.
The CSS Box Model
Every HTML element on a page is treated as a rectangular box by the browser. The box model defines four areas stacked around every element — from the innermost content outward:
box-sizing: border-box; to your CSS reset. It makes padding
and borders included inside the width — far more predictable.
What Can You Do With CSS?
CSS powers virtually every visual aspect of the web:
Three Ways to Add CSS to a Page
CSS can be applied to HTML in three different ways, each suited to different situations:
<!-- In your HTML <head> -->
<link rel="stylesheet" href="style.css">
/* In style.css */
body { font-family: sans-serif; background: #f8f8f8; }<style>
h1 { color: #264de4; }
p { font-size: 16px; }
</style><p style="color: red; font-size: 18px;">This is inline CSS.</p>Your First Styled Page
Copy this complete example, save as index.html and
open it in any browser. No setup required.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Styled Page</title>
<style>
body {
font-family: Arial, sans-serif;
background: #e8f0fe;
display: flex;
justify-content: center;
padding: 40px 20px;
}
.card {
background: #ffffff;
border-radius: 12px;
padding: 32px;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0,0,0,.10);
}
h1 { color: #264de4; margin-bottom: 12px; }
p { color: #52524a; line-height: 1.7; }
</style>
</head>
<body>
<div class="card">
<h1>Hello, CSS! 🎨</h1>
<p>This paragraph is styled with CSS. The card has a shadow, rounded corners and a white background.</p>
</div>
</body>
</html>index.html →
double-click the file. Your browser opens and you'll see your first styled web page instantly!
Try It Yourself
Edit the CSS below and watch the preview update live as you type. Click Open in Editor for a full-screen editing experience.
h1, .card). A
property is the aspect you want to change (e.g. color, font-size). A
value is the setting you apply to that property (e.g. blue, 16px). Together they form a
CSS declaration: selector { property: value; }.
.css file
linked via <link rel="stylesheet" href="style.css"> in the
<head>. Best practice for all real projects.2. Internal <style> block — CSS written inside a
<style> tag in the <head>. Useful for single-page demos.3. Inline style attribute — styles written directly on an element via
style="". Highest specificity, but hardest to maintain — avoid unless
necessary.
Content — the actual text, image, or element content.
Padding — transparent space between the content and the border.
Border — a visible line (or invisible zero-width) around the padding.
Margin — transparent space outside the border, separating the element from its neighbours.
Setting
box-sizing: border-box makes width calculations include
padding and border, which is far easier to work with.
- CSS (Cascading Style Sheets) is the language that controls the visual presentation of HTML pages — colours, fonts, layout, spacing and animations.
- CSS is a style sheet language, not a programming language. It uses declarative
property–value rules:
h1 { color: blue; }. - CSS can be added as an external file (best practice), an internal
<style>block, or an inlinestyle=""attribute. - The cascade and specificity rules determine which CSS rule wins when multiple rules target the same element.
- Every element is a box — the box model (content, padding, border, margin) is fundamental to all CSS layout.
- CSS3 added Flexbox, Grid, Animations, Custom Properties and Media Queries — the building blocks of modern responsive web design.
- CSS was proposed by Håkon Wium Lie in 1994 and first standardised by W3C as CSS1 in 1996.
Join Our Learning Community
Connect with thousands of learners, get daily tips, ask questions and stay updated with new tutorials.