🎨 Introduction to CSS

📖 What is CSS?

CSS (Cascading Style Sheets) is the language used to style HTML pages. It lets you control layout, colors, fonts, spacing — basically, how everything looks on your webpage.

📝 How to Apply CSS

Inline CSS: Directly inside an HTML tag using style attribute.
Internal CSS: Inside a <style> tag in the page's head.
External CSS: In a separate .css file linked to the HTML page.

🖥️ Basic CSS Syntax

selector {
  property: value;
}

Example:

p {
  color: red;
}

🎯 CSS Selectors

Element Selector: Targets elements by tag name (e.g., p, h1).
Class Selector: Targets elements by class (e.g., .myClass).
ID Selector: Targets elements by unique ID (e.g., #myId).

💅 Styling Text and Boxes

color: Text color.
background-color: Background color.
font-size: Text size.
border: Adds a border.
padding: Space inside the element.
margin: Space outside the element.

Styled Box Example

This box is styled using CSS properties.

📦 The CSS Box Model

Content: The actual text, images, etc.
Padding: Space around content.
Border: Surrounds the padding (optional).
Margin: Space around the outside of the border.

📝 CSS Quick Quiz

1. What is CSS used for?

Adding interactivity. Styling and designing HTML elements. Managing server-side logic.

2. Correct CSS syntax for setting paragraph text color?

p { color: blue; } color: p blue; p: color blue;

3. What does the margin property do?

Adds space inside an element. Adds space outside an element. Adds a border around an element.

💡 Pro Tip: Organizing your CSS into external files keeps your code clean, easy to maintain, and fast to update!