🧠 Module 5

Introduction to CSS

Objective: Add visual style to your HTML pages using Cascading Style Sheets (CSS).

1️⃣ What is CSS?

CSS controls how HTML elements look on the page.

HTML = structure
CSS = style

<p style="color: blue;">Hello StreetGeek!</p>

💡 The style attribute changes appearance without altering content.

2️⃣ Ways to Apply CSS

Type	Where it lives	Best for
Inline	Inside HTML tags with `style=""`	Quick single use
Internal	Inside `<style>` in the `<head>`	Small pages
External	Separate `.css` file via `<link>`	Professional sites

Example (link external file)

<link rel="stylesheet" href="styles.css">

3️⃣ CSS Syntax

selector {
  property: value;
}

Example

p {
  color: #333;
  font-size: 16px;
}

Selector = which element to style
Property = what to change
Value = how to change it

4️⃣ Selectors and Specificity

/* Tag selector */
p { color: blue; }

/* Class selector */
.intro { color: green; }

/* ID selector */
#main-title { color: red; }

Order of power → Inline > ID > Class > Tag.

5️⃣ Basic Properties to Know

Category	Examples
Text	`color`, `font-family`, `font-size`, `line-height`, `text-align`
Box	`margin`, `padding`, `border`, `width`, `height`
Background	`background-color`, `background-image`, `background-size`
Display	`display: block` / `inline` / `flex` / `grid`

6️⃣ Color and Units

Colors

red
#FF0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)

Units

px, em, rem, %, vh, vw

7️⃣ Hands-On Practice — Your First Stylesheet

Create styles.css.
Link it in your HTML <head>:

<link rel="stylesheet" href="styles.css">

Add styles

body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
}
h1 {
  color: #0E477B;
  text-align: center;
}
p {
  color: #333;
  line-height: 1.5;
}

Refresh the browser and watch your page transform.

8️⃣ Grouping and Comments

/* Header styles */
header, nav, footer {
  background: #0E477B;
  color: white;
  padding: 20px;
}

✅ Use commas to style multiple elements at once.

9️⃣ Try-It Yourself Challenge

Style your previous “Resume” or “Profile” page:

Add a background color to the header and footer.
Change text colors for headings and paragraphs.
Center the main heading.
Add padding and margins for spacing.
Bonus: Use a Google Font:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
/* then */
body { font-family: 'Roboto', sans-serif; }

🔎 Quiz Time

What does CSS stand for?
Which is more specific — a class or a tag selector?
Where should you link an external stylesheet?
What does the property line-height control?
Name one unit that adjusts with the screen size.

🏁 Module 5 Summary

The three ways to apply CSS
Selectors and specificity
Common style properties
Color and unit syntax
How to create and link a stylesheet

Next up: 👉 MODULE 6: The CSS Box Model — master margins, borders, and layout spacing.