📚 CSS Introduction, Syntax & Selectors

Learn the fundamentals of CSS and master the art of selecting elements

← Back to Content Next Topic: CSS Id & Class →

🎯 What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS controls the layout, colors, fonts, and overall visual appearance of web pages.

Why Use CSS?

  • ✅ Separates content (HTML) from presentation (CSS)
  • ✅ Makes websites more maintainable and organized
  • ✅ Enables responsive design for different devices
  • ✅ Improves page loading speed through external stylesheets
  • ✅ Provides powerful styling capabilities

📝 CSS Syntax

A CSS rule consists of a selector and a declaration block: 

selector {
    property: value;
    property: value;
}

Example:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Explanation:

  • h1 - Selector (targets all <h1> elements)
  • color: blue; - Declaration (property: value)
  • Each declaration ends with a semicolon

🎯 CSS Selectors

Selectors are used to target HTML elements that you want to style.

1. Element Selector

Selects all elements of a specific type.

p {
    color: green;
}
/* Selects all <p> elements */

2. Class Selector

Selects elements with a specific class attribute (uses a dot).

.highlight {
    background-color: yellow;
}
/* Selects all elements with class="highlight" */

3. ID Selector

Selects a unique element with a specific ID (uses a hash).

#header {
    font-size: 32px;
}
/* Selects the element with id="header" */

4. Universal Selector

Selects all elements on the page.

* {
    margin: 0;
    padding: 0;
}
/* Selects all elements */

5. Grouping Selector

Applies the same styles to multiple selectors.

h1, h2, h3 {
    color: navy;
    font-family: Arial;
}
/* Selects all h1, h2, and h3 elements */

📋 Three Ways to Add CSS

1. Inline CSS

Applied directly to an HTML element using the style attribute.

<p style="color: red; font-size: 18px;">This is inline CSS</p>

2. Internal CSS

Placed inside a <style> tag in the HTML document's <head>. 

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

3. External CSS

Stored in a separate .css file and linked to HTML.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

🎨 Live Example

Hello, CSS!

This paragraph is styled with CSS properties.

This uses a class selector.

📝 Test Your Knowledge - MCQ

Q1: What does CSS stand for?

Q2: Which selector is used to select elements with a specific class?

Q3: What is the correct CSS syntax?

Q4: Which is the correct way to select an element with id="demo"?

Q5: Which CSS property is used to change text color?

💪 Practice Questions

  1. Create a CSS rule to make all paragraphs have blue text and 16px font size.
  2. Write CSS to select all elements with class "container" and give them a red border.
  3. Select the element with id "main" and center-align its text.
  4. Create a grouped selector to make all h1, h2, and h3 elements use Arial font.
  5. Write an inline style to make a div have a yellow background and 20px padding.

📌 Summary

  • CSS stands for Cascading Style Sheets and is used to style HTML documents
  • CSS Syntax: selector { property: value; }
  • Element Selector: Targets elements by tag name (e.g., p)
  • Class Selector: Uses a dot (e.g., .classname)
  • ID Selector: Uses a hash (e.g., #idname)
  • Universal Selector: Uses asterisk * to select all elements
  • Three ways to add CSS: Inline, Internal, and External
  • Best Practice: Use external CSS for better maintainability
← Back to Content Next Topic: CSS Id & Class →