SitesByYogi text logo
Contact
🧠 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

TypeWhere it livesBest for
InlineInside HTML tags with style=""Quick single use
InternalInside <style> in the <head>Small pages
ExternalSeparate .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

CategoryExamples
Textcolor, font-family, font-size, line-height, text-align
Boxmargin, padding, border, width, height
Backgroundbackground-color, background-image, background-size
Displaydisplay: 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

  1. Create styles.css.
  2. 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.