CSS stands for Cascading Style Sheets. It is the language used to describe the presentation of a web page — including its colors, layout, fonts, and animations. While HTML defines the structure and content of a page, CSS controls how that content looks and feels.
Without CSS, every HTML page would look plain and unstyled — just black text on a white background. CSS gives web designers the power to:
CSS is applied to HTML elements using rules. A CSS rule consists of a selector and a declaration block:
/* This rule makes all <h1> elements blue and centered */
h1 {
color: blue;
text-align: center;
}| Part | Example | Description |
|---|---|---|
| Selector | h1 |
Points to the HTML element you want to style |
| Property | color |
The style attribute you want to change |
| Value | blue |
The value assigned to the property |
| Declaration | color: blue; |
A property + value pair, ending with a semicolon |
There are three ways to insert CSS into an HTML document:
The most common and recommended method. A separate .css file is linked in the <head> of your HTML:
<link rel="stylesheet" href="styles.css">CSS is written inside a <style> tag within the <head> section:
<style>
body {
background-color: #f0f0f0;
}
</style>CSS is applied directly to a single HTML element using the style attribute:
<p style="color: red; font-size: 18px;">This is a red paragraph.</p>| Year | Version |
|---|---|
| 1996 | CSS1 (W3C Recommendation) |
| 1998 | CSS2 (W3C Recommendation) |
| 2011 | CSS2.1 (revised standard) |
| 2012+ | CSS3 (modular — ongoing) |
| Present | CSS Living Standard (W3C) |
<link rel="stylesheet"> in the <head> means the page loads with zero styling — always double-check the file path.
style="..." on every element works, but scatters your design across dozens of files instead of one reusable stylesheet — it becomes a maintenance nightmare quickly.
A small external-CSS example showing a hover state — something none of the examples above covered yet:
.my-button {
background-color: #2e7d52;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
}
.my-button:hover {
background-color: #1b5e20;
}Rendered result (hover over it):
Q: Is CSS3 a completely different language from CSS?
A: No — CSS3 is the current, modular evolution of the same language. There's no separate "CSS3 syntax" to learn from scratch.
Q: Can I use external, internal, and inline CSS together on one page?
A: Yes, and browsers often will — but be aware of the cascade: inline styles override internal/external ones, and later rules of equal specificity override earlier ones.
Q: Do I need to learn CSS before JavaScript?
A: Not strictly, but most learning paths go HTML → CSS → JavaScript because JS often manipulates elements you've already learned to style. See the MDN CSS guide for the full reference as you go.