? Introduction to CSS

⚡ Quick Overview

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. It controls the layout, colors, fonts, spacing, and overall visual design of web pages, allowing you to create visually attractive and consistent user interfaces.

With CSS, you separate content (HTML) from presentation (design), making your code cleaner, easier to maintain, and more reusable across multiple pages.

? Key Concepts

CSS relies on a few fundamental building blocks to target and style elements:

• Selector: Specifies which HTML element(s) the style should apply to (e.g. p, .btn, #header).
• Property: The visual aspect you want to change (e.g. color, font-size, margin).
• Value: The setting for the property (e.g. red, 16px, center).
• Declaration: A single property–value pair (e.g. color: blue;).
• Rule: A full block of styling for a selector, wrapped in curly braces.
• Cascading: The way CSS decides which styles “win” when multiple rules target the same element (order, specificity, inheritance).

? CSS Syntax

A standard CSS rule follows a strict structure: a selector followed by a declaration block.

/* The Selector targets the element */
selector {
  property: value; /* Property: Value pair */
}

Here:

• selector targets the HTML element(s).
• property describes what visual feature you want to style.
• value sets how that feature should look.
• Each declaration ends with a semicolon ;, and all declarations are wrapped in {}.

? Code Example

Below is a simple CSS snippet that styles the page background, headings, and paragraphs:

/* 1. Target the entire body */
body {
  background-color: #f0f0f0; /* Light grey background */
  font-family: Arial, sans-serif;
}
/* 2. Target main headings */
h1 {
  color: #007bff; /* Brand Blue */
  text-align: center;
}
/* 3. Target paragraphs */
p {
  color: #333; /* Dark grey text */
  font-size: 16px;
  line-height: 1.5;
}

? Live Output & Explanation

In this example:

• body gets a light gray background and a clean sans-serif font.
• h1 text becomes blue and centered, making the page title stand out.
• p text is set to a comfortable size and line height for better readability.

? Common CSS Properties

Some frequently used properties you'll use in almost every project: