☰

📚 Introduction to CSS

Quick Navigation

What is CSS? Why CSS? Types of CSS Selectors CSS Syntax Styling Children
What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation and layout of HTML documents. It controls how elements are displayed on different devices.

CSS allows you to separate content (HTML) from presentation (styling). This separation makes your code more maintainable, reusable, and professional. With CSS, you can style colors, fonts, spacing, positioning, animations, and much more!

🎨 Styling - Control colors, fonts, sizes, and more
📐 Layout - Arrange elements using Flexbox, Grid, etc.
✨ Responsive - Create mobile-friendly designs
🎭 Animations - Add transitions and animations
Why Do We Use CSS?
CSS is essential for modern web development because it enables attractive, responsive, and user-friendly web pages.
Types of CSS
There are three ways to apply CSS to HTML documents. Each has its own advantages and use cases.

1. Inline CSS

Styles are applied directly to individual HTML elements using the style attribute.

Characteristics:
  • Applied directly in HTML tags
  • Highest specificity
  • Limited reusability
  • Not recommended for large projects
<h1 style="color: blue; font-size: 24px;">Welcome to CSS</h1> <p style="background-color: yellow; padding: 10px;">This is inline CSS</p>

2. Internal CSS

Styles are defined inside the <style> tag in the HTML document's <head> section.

Characteristics:
  • Defined in the <head> section
  • Can style multiple elements
  • Only works for that specific HTML file
  • Can override external CSS
<style> h1 { color: blue; font-size: 24px; } p { background-color: yellow; padding: 10px; } </style>

3. External CSS

Styles are defined in a separate CSS file (.css) and linked to the HTML document using the <link> tag.

Characteristics:
  • Stored in external .css files
  • Highly reusable across multiple pages
  • Better organization and maintainability
  • Best practice for professional projects
<link rel="stylesheet" href="style.css">
In style.css file:
h1 { color: blue; font-size: 24px; } p { background-color: yellow; padding: 10px; }
Comparison of CSS Types:
Type Reusability Specificity Best Use
Inline Low High Quick fixes
Internal Medium Medium Single page
External High Low Professional projects
CSS Selectors
CSS selectors are patterns used to select HTML elements that you want to style. They are the foundation of CSS styling.

1️⃣ Element Selector

Selects all HTML elements of a specific type.

Syntax: element { property: value; }
/* This selects all p tags */ p { color: blue; font-size: 16px; } /* This selects all h1 tags */ h1 { color: red; }

2️⃣ Class Selector

Selects all elements with a specific class attribute. Class names start with a dot (.) in CSS.

Key Points:
  • Class names can be reused on multiple elements
  • Multiple classes can be applied to one element
  • Not case-sensitive (but should follow conventions)
  • Lower specificity than ID selector
/* HTML */ <h1 class="title">Welcome</h1> <p class="title">This is a paragraph</p> /* CSS */ .title { color: blue; font-weight: bold; }

3️⃣ ID Selector

Selects a single element with a specific ID attribute. ID names start with a hash (#) in CSS.

Key Points:
  • IDs must be unique within a page
  • Each ID can only be used once per page
  • Higher specificity than class and element selectors
  • Case-sensitive
/* HTML */ <header id="main-header">Welcome to My Site</header> /* CSS */ #main-header { background-color: navy; color: white; padding: 20px; }
📊 Element vs Class vs ID - Comparison:
/* ELEMENT SELECTOR */ p { color: blue; } /* Affects ALL p tags */ /* CLASS SELECTOR */ .highlight { color: green; } /* Can be used multiple times */ <p class="highlight">...</p> <span class="highlight">...</span> /* ID SELECTOR */ #logo { width: 200px; } /* Used only ONCE */ <div id="logo">...</div>

4️⃣ Other Common Selectors

Universal (*)
Selects all elements
Descendant (space)
div p selects all p inside div
Child (>)
div > p selects direct p children
Attribute ([attr])
input[type="text"] selects text inputs
/* Universal Selector */ * { margin: 0; padding: 0; } /* Descendant Selector */ div p { color: blue; } /* Pseudo-classes */ a:hover { color: red; } button:active { opacity: 0.8; }
CSS Syntax
CSS syntax consists of selectors, properties, and values. Understanding this structure is fundamental to writing CSS.

Basic Syntax Structure

selector { property1: value1; property2: value2; property3: value3; }
Example:
h1 { color: blue; /* property: value */ font-size: 24px; /* property: value */ text-align: center; /* property: value */ }

Components Explained

🎯 Selector
The element(s) you want to style. Can be element name, class, or ID
🔑 Property
The aspect you want to change (color, size, position, etc.)
💎 Value
The setting for the property
📝 Declaration
Property and value together (property: value)

Multiple Selectors

Apply the same styles to multiple elements by separating selectors with commas:

h1, h2, h3 { color: navy; font-family: Arial, sans-serif; } .button, .link { text-decoration: none; cursor: pointer; }

Common Properties

Category Properties
Text color, font-size, font-weight, text-align
Background background-color, background-image
Box Model margin, padding, border, width, height
Display display, position, float, z-index
💬 Comments in CSS

Comments are used to explain your code and are ignored by the browser. Use them to document your styling decisions.

/* This is a single line comment */ /* This is a multi-line comment that spans multiple lines */ /* Header Styles */ h1 { color: blue; /* Change heading color to blue */ }
⭐ Quick Tips for CSS Beginners
🚀 What's Next?

Now that you understand the basics of CSS, you're ready to explore: