CSS is the language that turns plain HTML structure into a designed page. HTML says what the content is; CSS decides how that content looks, where it sits, how it responds to screen size, and how it changes during interaction.
For beginners, the most important CSS ideas are selectors, declarations, the cascade, inheritance, the box model, and responsive design. Once those are clear, advanced topics like grid, flexbox, animations, and variables become much easier.
CSS Introduction needs more than a syntax memory trick. The important idea is to understand stylesheets, selectors, declarations, cascade, inheritance, browser defaults, and separation of content from presentation in the exact situation where the page topic appears, then prove the behavior with a small working example and one edge case.
CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation - colors, fonts, layout, spacing, and visual effects - of HTML documents. CSS separates content (HTML) from presentation (CSS), making websites easier to maintain and style consistently.
CSS files use the .css extension. A single CSS file can control the appearance of an entire website - change one file and every page updates automatically.
| Version | Year | Key Features |
|---|---|---|
| CSS 1 | 1996 | Basic fonts, colors, text alignment |
| CSS 2 | 1998 | Positioning, z-index, media types |
| CSS 2.1 | 2011 | Bug fixes and clarifications |
| CSS 3 | 2011+ | Modules: Flexbox, Grid, Animations, Transitions, Custom Properties, etc. |
CSS keeps design decisions separate from document meaning. That separation lets the same HTML be styled differently for mobile, desktop, print, dark mode, and future redesigns.
Inline CSS is written directly on an HTML element using the style attribute. It has the highest specificity and overrides all other styles, but it is the hardest to maintain - you have to update every element individually. Avoid for large projects.
<!-- Inline CSS - style attribute directly on element -->
<!-- Highest specificity, hardest to maintain -->
<h1 style="color: blue; text-align: center;">Hello World</h1>
<p style="font-size: 16px; color: #333; margin-bottom: 10px;">
This paragraph has inline styles applied.
</p>
<!-- Problem: to change the color, you must update every element -->
<p style="color: blue;">Paragraph 1</p>
<p style="color: blue;">Paragraph 2</p>
<p style="color: blue;">Paragraph 3</p>
<!-- Changing to red requires editing all 3 lines -->Internal CSS is written inside a <style> tag in the <head> section of an HTML document. It applies styles to that page only - not reusable across multiple pages. Good for single-page styles or quick prototyping.
<!DOCTYPE html>
<html>
<head>
<!-- Internal CSS - styles only apply to this page -->
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: #333;
line-height: 1.6;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This paragraph uses internal CSS.</p>
<p class="highlight">This one is highlighted.</p>
</body>
</html>External CSS is written in a separate .css file and linked to HTML pages using a <link> tag. This is the recommended approach for all real projects because:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- Link to external CSS file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World</h1>
<p>This page uses an external stylesheet.</p>
<p class="highlight">This one is highlighted.</p>
</body>
</html>
<!-- Multiple pages can share the same stylesheet -->
<!-- about.html, contact.html, etc. all link to styles.css -->/* styles.css - shared across all pages */
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: #333;
line-height: 1.6;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
/* Change color here -> updates every page instantly */| Method | Where written | Scope | Reusable | Recommended |
|---|---|---|---|---|
| Inline | style="" attribute | Single element | No | Avoid |
| Internal | <style> in <head> | Single page | No | Prototyping only |
| External | Separate .css file | Entire website | Yes | Always |
A CSS rule has two parts: a selector (which elements to style) and a declaration block (what styles to apply).
/*
* CSS Rule Structure:
*
* selector {
* property: value; -> declaration
* property: value;
* }
*/
/* Element selector */
h1 {
color: #2c3e50; /* text color */
font-size: 2rem; /* font size */
text-align: center; /* alignment */
margin-bottom: 20px; /* spacing below */
}
/* Class selector */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* ID selector */
#header {
background-color: #3498db;
padding: 20px;
}
/* Multiple selectors - same styles */
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}
/* Comments in CSS */
/* This is a single-line comment */
/*
* This is a
* multi-line comment
*/The "C" in CSS stands for Cascading. When multiple CSS rules target the same element, the browser resolves conflicts using three factors in order:
CSS controls presentation while HTML describes structure. A heading remains a heading in HTML, but CSS decides its size, color, spacing, alignment, and responsive behavior. This separation lets one HTML document adapt to different screens and designs without changing the meaning of the content.
The first CSS ideas to understand are selectors, declarations, cascade, inheritance, and browser defaults. The browser already gives elements default styles; your stylesheet modifies or replaces those defaults. When two rules target the same element, the cascade decides which value wins based on importance, specificity, source order, and inheritance.
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
h1 {
color: #1f2937;
}Putting most styles inline on individual HTML elements.
Use external stylesheets for reusable and maintainable styling.
Changing random CSS values without knowing which rule wins.
Use DevTools to inspect the winning selector and cascade order.
Designing only on a desktop viewport.
Check mobile, tablet, and desktop widths while building.
Thinking CSS changes the meaning of the HTML element.
Use HTML for meaning and CSS for visual presentation.
CSS is a stylesheet language. It describes presentation rules rather than general program logic.
Because multiple rules can apply to the same element, and the browser cascades through importance, specificity, and source order to choose the winner.
Inline CSS is okay for tiny experiments, but external CSS is better for real pages.
Learn the box model, flexbox, grid, responsive design, and browser DevTools debugging.
Yes, HTML can still display content, but CSS is needed for layout, branding, spacing, responsiveness, and polished presentation.
Explore 500+ free tutorials across 20+ languages and frameworks.