CSS – Making Webpages Beautiful
beginner20 XP

What is CSS? Colors, Fonts & Backgrounds

Add colour, choose fonts and set backgrounds — turn your plain HTML into something beautiful!

CSS — The Fashion Designer for Webpages! 🎨

If HTML is the skeleton of a webpage, CSS is the clothing and makeup — it decides how everything looks!

How CSS Works

You write CSS rules that say: "Find this element, and make it look like THIS."

CSS
p {
  color: blue;
  font-size: 20px;
}

Read this as: "Find all <p> tags and make the text blue and 20 pixels big."

Three Ways to Add CSS

1. Inside the HTML tag (Inline — quick but messy!)

HTML
<p style="color: red; font-size: 24px;">Red text!</p>

2. In the <head> (Internal — good for one page)

HTML
<head>
  <style>
    p { color: green; }
    h1 { color: purple; }
  </style>
</head>

3. Separate CSS file (External — professional! ✅)

HTML
<!-- In your HTML file -->
<link rel="stylesheet" href="styles.css">
CSS
/* In your styles.css file */
p { color: orange; }

Colors in CSS

CSS
h1 {
  /* Color name */
  color: tomato;
  
  /* Hex code (like a secret color code!) */
  color: #FF6B6B;
  
  /* RGB (Red, Green, Blue — each 0-255) */
  color: rgb(255, 107, 107);
}

🎨 Fun fact: Hex codes like #FF0000 are the same as rgb(255, 0, 0) — both mean pure red!

Fonts

CSS
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;      /* bold or normal */
  font-style: italic;     /* italic or normal */
  line-height: 1.6;       /* space between lines */
  text-align: center;     /* left, center, right */
}

Backgrounds

CSS
body {
  background-color: #f0f8ff;   /* light blue background */
}

h1 {
  background-color: yellow;     /* yellow highlight behind text */
  color: black;
}

🌟 Complete Styled Page!

HTML
<!DOCTYPE html>
<html>
<head>
  <style>
    body { background-color: #1a1a2e; color: white; font-family: Arial; }
    h1   { color: #e94560; text-align: center; font-size: 40px; }
    p    { color: #a8dadc; font-size: 18px; line-height: 1.8; }
  </style>
</head>
<body>
  <h1>🚀 My Space Blog</h1>
  <p>Space is absolutely mind-blowing!</p>
</body>
</html>

Dark theme with pink headings — looks like a real developer site! 😎

Quick check

01/3

Which CSS property changes the colour of TEXT?