🎨 Day 11: Introduction to CSS & Syntax

on

🎨 Day 11 — Introduction to CSS & Syntax

Welcome to Day 11! You’ve built a strong foundation with HTML — now it’s time to give your pages a visual identity. CSS (Cascading Style Sheets) is the language that brings your web pages to life with colors, layouts, spacing, and typography. By the end of this lesson, you’ll understand how CSS works, how to include it in your HTML, and how to write clean, reusable styles.

🧩 1️⃣ What is CSS?

CSS stands for Cascading Style Sheets. It defines how HTML elements are displayed on screen, paper, or other media. It helps you separate content (HTML) from presentation (styles), making your code cleaner and easier to maintain.

For example, HTML provides the structure: 

<h1>Welcome to My Website</h1>
<p>This is a simple web page.</p>

CSS defines how it looks: 

h1 {
  color: darkblue;
  text-align: center;
}
p {
  font-size: 18px;
  color: gray;
}

🧱 2️⃣ Ways to Include CSS

You can include CSS in three main ways: Inline, Internal, and External.

✨ Inline CSS

Used directly within an HTML tag using the style attribute.

<p style="color:green; font-size:20px;">This text is styled inline.</p>

Best for small, one-time changes.

✨ Internal CSS

Written inside the <style> tag within the <head> of your HTML document.

<head>
  <style>
    h1 {
      color: orange;
    }
    p {
      font-family: Arial;
    }
  </style>
</head>

Used when you want styles specific to one page.

✨ External CSS

Most commonly used method — stores styles in a separate file.

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

External CSS keeps your code organized and reusable across multiple pages.

🎨 3️⃣ CSS Syntax Explained

Every CSS rule consists of a selector and a declaration block. 

selector {
  property: value;
}

Example: 

h1 {
  color: red;
  font-size: 24px;
}
  • Selector — targets HTML elements (e.g., h1)
  • Property — the visual characteristic to change (e.g., color)
  • Value — defines how that property behaves (e.g., red)

🧩 4️⃣ CSS Selectors Basics

Selectors determine which elements the style applies to. Here are the most common ones: 

p {
  color: green;
}
#main-title {
  font-size: 28px;
}
.highlight {
  background-color: yellow;
}
  • p — Element selector (targets all <p>)
  • #main-title — ID selector (targets an element with id="main-title")
  • .highlight — Class selector (targets elements with class="highlight")

⚙️ 5️⃣ The Cascade & Specificity

When multiple styles target the same element, CSS uses a system of priority:

  1. Inline styles have the highest priority.
  2. ID selectors come next.
  3. Class selectors follow.
  4. Element selectors have the lowest priority.

If two rules conflict, the one with greater specificity (or the last one in the code) wins.

🎯 6️⃣ Comments in CSS

Use comments to describe sections or notes in your CSS file. 

/* This is a CSS comment */
body {
  background-color: #fafafa;
}

📋 7️⃣ Grouping & Nesting

h1, h2, h3 {
  color: teal;
}

You can group multiple selectors separated by commas to apply the same style to each.

🧠 8️⃣ Practice Task

  1. Create an external CSS file and link it to your HTML.
  2. Style headings and paragraphs with different colors and fonts.
  3. Add an ID selector for your main heading and a class selector for highlights.
  4. Test inline, internal, and external CSS methods to see which takes priority.

🧮 Mini Quiz

  • Q1: Which CSS inclusion method is best for large projects?
  • Q2: What’s the difference between ID and class selectors?
  • Q3: What does the “cascade” in CSS mean?

🎯 Summary

You now understand what CSS is, how it works, and the syntax behind it. CSS is the foundation of web design — it gives structure style, enhances readability, and makes your websites visually engaging. Tomorrow, we’ll explore colors, backgrounds, and gradients to bring your designs to life.

Comments

Post a Comment