CSS (Cascading Style Sheets) controls how HTML elements look on the page. While HTML provides structure and meaning, CSS handles all visual presentation: colors, fonts, spacing, and layouts.
Without CSS, every website would look like a plain text document with blue links. CSS turns that into beautiful, usable interfaces.
https://www.youtube.com/watch?v=OEV8gMkCHXQ
<aside> 💡
Info
CSS was invented by Håkon Wium Lie in 1994 to solve a simple problem: how could designers control web page appearance without mixing presentation into HTML? Before CSS, developers used messy HTML attributes and tables for layout.
</aside>
CSS follows a simple pattern: selector { property: value; }
selector {
property: value;
another-property: another-value;
}
/* Example */
h1 {
color: blue;
font-size: 24px;
margin-bottom: 16px;
}
h1) - Which elements to stylecolor, font-size) - What aspect to changeblue, 24px) - How to change it{ }Multiple selectors:
/* Same styles for multiple elements */
h1, h2, h3 {
color: #333;
font-family: Arial, sans-serif;
}
CSS directly in the HTML element using the style attribute:
<h1 style="color: red; font-size: 32px;">Heading</h1>
<p style="color: blue;">Paragraph</p>
Use for:
Quick tests, email HTML
Avoid for:
Real projects (hard to maintain, not reusable)
CSS in a <style> tag within the HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-size: 32px;
}
p {
color: blue;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
Use for:
Single-page sites, quick prototypes
Good for:
Learning CSS
CSS in a separate .css file, linked from HTML:
styles.css
h1 {
color: red;
font-size: 32px;
}
p {
color: blue;
line-height: 1.6;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
Use for: Real projects (one CSS file can style multiple HTML pages)
<aside> ⌨️
Hands On
Create an HTML file with a heading and paragraph. Add a <style> tag in the <head> and change the heading color to red and the paragraph color to blue. Open it in your browser.
</aside>
<aside> ⌨️
Hands On
styles.css in the same folder as your HTML<style> tag into styles.css<link rel="stylesheet" href="styles.css"> to your HTML <head>Selectors determine which elements receive styling.
Target all elements of a type:
/* All paragraphs */
p {
color: #333;
}
/* All links */
a {
color: blue;
text-decoration: none;
}
/* All headings */
h1 {
font-size: 32px;
}
Target elements with a specific class (most common):
<p class="intro">Introduction paragraph</p>
<p class="highlight">Important paragraph</p>
<button class="btn primary">Click me</button>
/* Starts with a dot */
.intro {
font-size: 18px;
font-weight: bold;
}
.highlight {
background-color: yellow;
padding: 10px;
}
/* Elements can have multiple classes */
.btn {
padding: 10px 20px;
border: none;
cursor: pointer;
}
.primary {
background-color: blue;
color: white;
}
Target a single unique element:
<header id="main-header">Site Header</header>
<section id="about">About section</section>
/* Starts with a hash */
#main-header {
background-color: navy;
color: white;
padding: 20px;
}
#about {
margin: 40px 0;
}
Rule: IDs must be unique on the page. Use classes for styling, IDs for JavaScript targets or page anchors.
Target elements inside other elements:
/* Paragraphs inside articles */
article p {
line-height: 1.8;
}
/* Links inside nav */
nav a {
color: white;
text-decoration: none;
}
/* Spans inside paragraphs */
p span {
font-weight: bold;
}
<aside> ⌨️
Hands On
Create an HTML file with multiple paragraphs. Give some the class "highlight" and others "important". Style each class with different colors and backgrounds. Add an id to one paragraph and give it a unique border.
</aside>
/* Different color formats */
.element {
color: red; /* Named color */
color: #ff0000; /* Hex (6 digits) */
color: #f00; /* Hex (3 digits) */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGB with transparency */
}
.text {
color: #333; /* Text color */
font-size: 16px; /* Size */
font-weight: bold; /* 100-900 or bold/normal */
font-family: Arial, sans-serif; /* Font (with fallbacks) */
line-height: 1.6; /* Space between lines */
text-align: center; /* left, center, right, justify */
text-decoration: underline; /* underline, none, line-through */
text-transform: uppercase; /* uppercase, lowercase, capitalize */
}
Spacing (Margin and Padding)
.box {
/* Padding (space inside, around content) */
padding: 20px; /* All sides */
padding: 10px 20px; /* Top/bottom, left/right */
padding: 10px 20px 15px 25px; /* Top, right, bottom, left */
padding-top: 10px; /* Individual sides */
/* Margin (space outside, pushes other elements away) */
margin: 20px; /* All sides */
margin: 10px 20px; /* Top/bottom, left/right */
margin: 10px 20px 15px 25px; /* Top, right, bottom, left */
margin-top: 10px; /* Individual sides */
}
<aside> 💡
Info
Padding adds space inside an element (between content and border). Margin adds space outside an element (between elements). Think: padding pushes inward, margin pushes outward.
</aside>
Sizing
.element {
width: 300px;
height: 200px;
max-width: 100%; /* Never wider than parent */
min-height: 500px; /* At least this tall */
}
The display property controls how elements behave in the layout.
Takes full width available, stacks vertically (default for div, p, h1, etc.):
div {
display: block;
}
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
<!-- Each takes full width, stacks vertically -->
Flows with text, only as wide as content (default for span, a, strong, etc.):