HTML — CSS
What is CSS and why you need it?
CSS stands for Cascading Style Sheets.
It tells the browser how things should look.
Think of HTML as the skeleton and CSS as the clothing.
With CSS you can change colors, sizes, spacing, and much more.
Adding CSS to a page
There are three common ways to attach CSS to an HTML document.
- Inline – put the style directly on an element.
- Internal – put a
<style>block in the<head>. - External – link to a separate
.cssfile.
Example: Inline style
<p style="color: teal; font-size: 18px;">I am styled inline.</p>
What the browser displays
The paragraph appears in teal text, slightly larger than normal.
Example: Internal style sheet
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Internal CSS Demo</title>
<style>
h1 { color: darkgreen; text-align: center; }
p { line-height: 1.6; }
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This paragraph uses the internal style sheet.</p>
</body>
</html>
What the browser displays
The heading is centered and dark‑green; the paragraph has a comfortable line height.
Example: External style sheet
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>External CSS Demo</title>
</head>
<body>
<h2>External CSS works!</h2>
<p>Look at the styling applied from another file.</p>
</body>
</html>
/* styles.css */
h2 { color: navy; margin-bottom: 10px; }
p { color: #555; font-family: Arial, sans-serif; }
What the browser displays
The heading is navy blue with a small gap below it; the paragraph is dark gray and uses Arial.
Selectors basics
A selector tells CSS which element(s) to style.
The simplest selector is the element name itself: p, h1, ul, etc.
You can also select by class (.myClass) or id (#myId).
Example: Class selector
<div class="card">Card content</div>
<style>
.card {
background: #f9f9f9;
border: 1px solid #ddd;
padding: 12px;
}
</style>
What the browser displays
A light gray box with a thin border and some inner space.
Example: ID selector
<h3 id="main-title">Main Title</h3>
<style>
#main-title {
color: maroon;
font-size: 24px;
}
</style>
What the browser displays
The heading appears in maroon color and is larger than normal text.
Styling text
You can change font family, size, weight, style, and decoration.
Font family
<p style="font-family: 'Courier New', monospace;">Monospaced text.</p>
What the browser displays
The paragraph uses a typewriter‑like font.
Font weight and style
<p style="font-weight: bold;">Bold text.</p>
<p style="font-style: italic;">Italic text.</p>
<p style="font-weight: 300;">Light weight text.</p>
What the browser displays
First line is thick, second line leans right, third line looks thin.
Box model basics
Every element is a rectangular box.
The box has content, padding, border, and margin in that order.
Example: Adding padding and margin
<div style="background:#e0f7fa; padding:20px; margin:30px;">
Box with padding and margin.
</div>
What the browser displays
A light‑blue rectangle with space inside (padding) and space outside (margin).
Colors revisited with CSS
You already learned color names and hex codes.
CSS lets you apply them to any property, not just text.
Example: Background color and opacity
<div style="background: rgba(255,0,0,0.3); width:150px; height:80px;">
Semi‑transparent red box
</div>
What the browser displays
A red rectangle that you can see through a little.
Using classes and IDs together
Combining classes and IDs gives you fine‑grained control.
Example: Multiple classes
<p class="intro highlight">Important intro text.</p>
<style>
.intro { font-size: 18px; }
.highlight { background: yellow; }
</style>
What the browser displays
The sentence is slightly larger and has a yellow background.
Combining selectors
You can target elements that meet several conditions.
Example: Descendant selector
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
<style>
.menu li a { color: teal; text-decoration: none; }
</style>
What the browser displays
Links inside the list appear teal and without underlines.
Good to know: You can chain selectors without commas to narrow the scope.
Quick reference table
| Selector type | Syntax example | Typical use |
|---|---|---|
| Element | p | Style all paragraphs |
| Class | .card | Reuse a style on many elements |
| ID | #header | Target a single, unique element |
| Descendant | .nav li a | Style links inside a navigation list |
| Grouped | h1, h2, h3 | Apply same rules to several tags |
Common mistake: Forgetting the dot (
.) before a class name makes the rule apply to a tag named “card”, which usually does not exist.
Common mistakes checklist
- Did you include the leading
.for class selectors? - Did you include the leading
#for ID selectors? - Are you mixing up
margin(outside) andpadding(inside)? - Did you close every
{with a}? - Are you using the correct file name in the
<link>tag?
Mini Practice
- Create an HTML file that uses an internal
<style>block to make all<h1>headings blue and centered. - Add a paragraph with class
noteand style the class to have a light yellow background and a left padding of 15 px. - Build a small navigation bar using a
<ul>and<li>list. Use a descendant selector to make the links green and remove the underline. - Write an external CSS file that gives a
<div>a dark gray border, 10 px padding, and a margin of 20 px. Link it to your HTML. - Experiment: change the
rgbabackground of a box torgba(0,0,255,0.5)and describe what you see.
Related Topics
Frequently Asked Questions about CSS
What is CSS in HTML?
CSS is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.
How do I learn CSS?
Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn CSS.
Why is CSS important in HTML?
CSS is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.