Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the health-check domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/yogisv5/sitesbyyogi.com/wp-includes/functions.php on line 6260
MODULE 5: Introduction to CSS - SitesByYogi
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.