Lesson Content
CSS stands for Cascading Style Sheets. It is the language that controls how HTML elements look — their colours, sizes, fonts, spacing, and layout.
Without CSS, every webpage would look like a plain text document. CSS is what transforms raw HTML structure into a visually designed experience.
Three ways to add CSS:
1. Inline — add a style attribute directly to an HTML element. Quick but hard to maintain.
2. Internal — add a <style> block inside the <head> of your HTML file. Good for single-page experiments.
3. External — create a separate .css file and link it with <link rel="stylesheet" href="styles.css">. This is the standard approach for real projects.
A CSS rule has two parts: a selector (which element to target) and a declaration block (what to change). Each declaration is a property-value pair separated by a colon.
The word "Cascading" refers to how CSS resolves conflicts — when multiple rules target the same element, the browser uses specificity and order to decide which one wins.
/* External CSS file: styles.css */
/* Target all h1 elements */
h1 {
color: #1B4F5A;
font-size: 2.5rem;
font-weight: 700;
}
/* Target elements with class "card" */
.card {
background-color: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* Target the element with id "hero" */
#hero {
background-color: #1B4F5A;
color: white;
padding: 4rem 2rem;
}Finished this lesson?
Mark it complete to track your progress through the course.
Learning Objectives
- 1Understand what CSS is and what it controls
- 2Learn the three ways to add CSS to HTML
- 3Write your first CSS rule
- 4Understand the cascade and inheritance
0 of 31 lessons done