COURSE: WEBSITE 101
Lesson 2 — Styling with CSS
Beginner / Free Track
// 01. Linking the Stylesheet
Raw HTML is unstyled — plain black text on a white background. CSS tells the browser how everything should look. We link a CSS file inside the <head>.
<link rel="stylesheet" href="style.css">// 02. Selectors and Declarations
CSS targets an HTML element and declares how it should look. The target is the selector. The rules inside the curly braces are declarations.
body {
background-color: #0a0a06;
color: #e6e6e0;
font-family: monospace;
}
h1 {
color: #f5e642;
font-size: 2rem;
}
p {
line-height: 1.7;
margin-bottom: 1rem;
}// 03. The Box Model
Every HTML element is a rectangle. Understanding how space is calculated around it is the key to controlling layout.
Box Model — outside in:
• Margin — space outside, pushing other elements away.
• Border — a visible line around the element.
• Padding — space between the border and the content.
• Content — the actual text or image.
• Margin — space outside, pushing other elements away.
• Border — a visible line around the element.
• Padding — space between the border and the content.
• Content — the actual text or image.
[TRY IT NOW]
Create style.css next to your index.html. Write selectors for body, h1, and p. Change colors, font sizes, and padding. Refresh your browser after every change and watch it update.