CSS Introduction

Add W3Buddy as a preferred source on Google

Article Summary

CSS Tutorial: Learn what CSS is, how it works, and why it’s essential for styling and designing web pages.

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

Inline CSS – inside HTML tag (not recommended for large projects)

<h1 style="color: red;">Hello</h1>

Internal CSS – within a <style> tag in the <head>

<style>
  p { font-size: 16px; }
</style>

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:

Importance (e.g. !important)
Specificity (ID > class > tag)
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

Concept	Example
Syntax	`selector { property: value; }`
Inline	`<h1 style="color:red;">`
Internal	`<style>h1 {}</style>`
External	`<link rel="stylesheet">`
File Extension	`.css`