CSS Introduction

What is CSS?

CSS stands for Cascading Style Sheets. It’s used to style and visually format HTML elements — controlling layout, colors, fonts, spacing, animations, and more.

Think of HTML as the skeleton (structure) of your web page and CSS as the clothing and design (appearance).

💡 Why Use CSS?

  • Separate Design from Content – cleaner code.
  • Reuse styles across multiple pages.
  • Responsive design for all screen sizes.
  • Modern web design (layouts, animations, themes, etc.)

⚙️ How CSS Works

CSS targets HTML elements and applies styles using selectors and properties.

/* This is a CSS rule */
h1 {
  color: blue;
  font-size: 24px;
}

✅ h1 → Selector
✅ color and font-size → Properties
✅ blue and 24px → Values

🎯 Ways to Apply CSS

  1. Inline CSS – inside HTML tag (not recommended for large projects)
<h1 style="color: red;">Hello</h1>
  1. Internal CSS – within a <style> tag in the <head>
<style>
  p { font-size: 16px; }
</style>
  1. External CSS – preferred way (using a separate .css file)
<link rel="stylesheet" href="styles.css">

🧬 What “Cascading” Means

When multiple styles conflict, the cascade defines which one wins, based on:

  1. Importance (e.g. !important)
  2. Specificity (ID > class > tag)
  3. Source order (later style overrides earlier one)

📁 Common File Extension

  • CSS files have the .css extension
  • External stylesheets can be reused on any page

✔️ Summary Table

ConceptExample
Syntaxselector { property: value; }
Inline<h1 style="color:red;">
Internal<style>h1 {}</style>
External<link rel="stylesheet">
File Extension.css