What is CSS?
HTML is the structure, CSS is the paint, colors, and decoration.
3 ways to add CSS:
Way 1: External CSS (BEST for big websites)
Create a separate .css file and link it.
HTML file (index.html):
1<head>
2 <link rel="stylesheet" href="styles.css">
3</head>CSS file (styles.css):
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4 margin: 0;
5 padding: 20px;
6}
7h1 {
8 color: blue;
9 text-align: center;
10}
11p {
12 font-size: 16px;
13 line-height: 1.6;
14}Why this is best:
One CSS file can be used on many pages
Easy to maintain (change one file, all pages update)
Browser caches the file (faster loading)
Way 2: Internal CSS ( single page)
Put CSS inside <style> tag in <head>.
1<head>
2 <style>
3 body {
4 font-family: Arial;
5 margin: 20px;
6 }
7 h1 {
8 color: red;
9 }
10 p {
11 font-size: 16px;
12 }
13 </style>
14</head>When to use: Single page website, quick testing
Way 3: Inline CSS (ONLY for one-time override)
Put CSS directly on the element using style attribute.
1<p style--"color: red; font-size: 20px;">This text is red and big</p>When to use: Rare, only for specific overrides
BEST PRACTICE: Use external CSS for professional websites. Avoid inline CSS.