5 min read HTML 1 views

CSS Selectors Introduction

CSS selectors are used to select HTML elements that you want to style. They help developers apply colors, fonts, backgrounds, spacing, borders, and other design properties to specific elements on a webpage.

CSS selectors are an important part of CSS because they determine which HTML elements receive particular styles.

1. What is a CSS Selector?

A CSS selector identifies the HTML element or elements that a CSS rule will apply to.

Example:

p {
    color: blue;
}

In this example:

p: CSS selector.
color: CSS property.
blue: CSS value.

This selector selects all paragraph elements and changes their text color to blue.

2. Types of CSS Selectors

CSS provides different types of selectors for selecting HTML elements in different ways.

The main types of CSS selectors are:

Simple Selectors
Combinator Selectors
Attribute Selectors
Pseudo-Class Selectors
Pseudo-Element Selectors

3. Simple CSS Selectors

Simple selectors select HTML elements based on their name, ID, class, or other characteristics.

Element Selector

The element selector selects HTML elements using their tag name.

Example:

h1 {
    color: red;
}

p {
    font-size: 18px;
}

This example selects all h1 and p elements.

ID Selector

The ID selector selects an HTML element with a specific ID. It uses the hash (#) symbol followed by the ID name.

Example:

#heading {
    color: blue;
}

HTML:

<h1 id="heading">Welcome to CodingRider</h1>

Class Selector

The class selector selects HTML elements with a particular class attribute. It uses a dot (.) followed by the class name.

Example:

.highlight {
    background-color: yellow;
    color: black;
}

HTML:

<p class="highlight">This is highlighted text.</p>

Universal Selector

The universal selector selects all HTML elements. It is represented by an asterisk (*) symbol.

Example:

* {
    margin: 0;
    padding: 0;
}

This example removes the default margin and padding from all elements.

Grouping Selector

The grouping selector allows you to apply the same CSS styles to multiple selectors. Selectors are separated by commas.

Example:

h1, h2, p {
    font-family: Arial, sans-serif;
    color: green;
}

This example applies the same font family and text color to h1, h2, and p elements.

4. CSS Selector Examples

Selector	Example	Description
Element	p	Selects all paragraph elements.
ID	#header	Selects an element with ID header.
Class	.box	Selects elements with class box.
Universal	*	Selects all HTML elements.
Grouping	h1, h2, p	Selects multiple element types.

5. Why Use CSS Selectors?

To select specific HTML elements.
To apply styles to multiple elements.
To reuse styles using class selectors.
To style unique elements using ID selectors.
To organize and maintain CSS code.
To create advanced webpage designs.

Conclusion

CSS selectors are essential for styling HTML elements. They allow developers to select elements by tag name, ID, class, and other conditions. Understanding CSS selectors is the first step toward learning advanced CSS styling.

Beginner Tip: Use element selectors for general styling, class selectors for reusable styles, and ID selectors for unique elements.

Practice Tasks

Create an element selector to make all paragraphs blue.
Create a class selector named box and add a background color.
Create an ID selector named heading and change its text color.
Use the universal selector to remove default margins.
Group h1 and h2 selectors and apply the same font color.

html Example

Run Code


<!DOCTYPE html>
<html>
<head>
    <title>CSS Selectors Introduction</title>

    <style>
        /* Element Selector */
        p {
            color: blue;
        }

        /* ID Selector */
        #main-heading {
            color: red;
        }

        /* Class Selector */
        .box {
            background-color: lightyellow;
            padding: 15px;
            border: 1px solid orange;
        }

        /* Universal Selector */
        * {
            font-family: Arial, sans-serif;
        }

        /* Grouping Selector */
        h2, h3 {
            color: green;
        }
    </style>
</head>
<body>

    <h1 id="main-heading">CSS Selectors</h1>

    <div class="box">
        <h2>Learn CSS</h2>
        <p>CSS selectors help us style HTML elements.</p>
        <h3>Welcome to CodingRider</h3>
    </div>

</body>
</html>

CSS Selectors Introduction