Chapter 14 | Styling Control

CSS Selectors & Colors

CSS selectors decide which HTML elements will be styled. CSS colors decide the look, mood and branding of a webpage. In this chapter, you will learn both with practical examples.

Start Learning Try Code

Element Selector

Styles all elements of a tag such as h1, p or button.

Class Selector

Styles multiple elements using reusable class names.

ID Selector

Styles one unique element using an ID.

Colors

Use names, HEX, RGB, RGBA, HSL and gradients.

Learning Objectives

After This Chapter, You Will Understand

This chapter improves your control over styling and visual identity.

Selectors

Select exact HTML elements for styling.

Class & ID

Understand when to use class and when to use ID.

Colors

Use color names, HEX, RGB, RGBA and HSL.

Gradients

Create attractive gradient backgrounds.

CSS Selectors

Basic CSS Selectors

Selectors tell CSS which HTML element or group of elements should receive styling.

1 Element Selector

It selects all HTML elements with the same tag name.

p {
color: gray;
}

Meaning: All paragraphs will become gray.

2 Class Selector

It selects elements having a specific class. It starts with a dot.

.highlight {
background: yellow;
}

Use: Reusable design for multiple elements.

3 ID Selector

It selects one unique element. It starts with a hash sign.

#main-title {
color: navy;
}

Use: Unique section or unique element styling.

Selector Type	Symbol	Example	Use
Element Selector	No symbol	h1	Selects all h1 tags
Class Selector	.	.card	Selects all elements with class="card"
ID Selector	#	#header	Selects element with id="header"

Professional Tip: Use class selectors for reusable design. Use ID selectors only for unique elements.

More Selectors

Grouping, Descendant and Universal Selectors

These selectors help write shorter and cleaner CSS.

Grouping Selector

Applies the same style to multiple selectors.

h1, h2, h3 {
color: #06285f;
}

Descendant Selector

Selects an element inside another element.

.card p {
color: #334155;
}

Universal Selector

Selects all elements on the page.

* {
box-sizing: border-box;
}

Practice Task: Create three cards and style all card paragraphs using a descendant selector.

CSS Colors

Ways to Write Colors in CSS

CSS gives many ways to define colors for text, backgrounds, borders and buttons.

Color Name

Example: red, blue, green, black

color: red;

HEX Color

Commonly used in professional web design.

color: #0d6efd;

RGB Color

Uses red, green and blue values.

rgb(0,167,181)

RGBA Color

Same as RGB but with transparency.

rgba(255,122,26,.45)

4 HSL Color

HSL means Hue, Saturation and Lightness. It is useful when you want to adjust shades systematically.

h1 {
color: hsl(220, 90%, 45%);
}

5 Common Color Properties

color: changes text color
background-color: changes background color
border-color: changes border color
outline-color: changes outline color
box-shadow: can use color values for shadow

CSS Gradients

Gradient Backgrounds

Gradients create smooth transitions between two or more colors.

Premium Gradient Banner

6 Linear Gradient

Linear gradients are commonly used in hero sections, cards, buttons and modern banners.

.banner {
background: linear-gradient(135deg, #06285f, #0d6efd);
}

Branding Tip: Use consistent brand colors across your website for a premium and memorable identity.

Try It Yourself

Practice Selectors and Colors

Edit the CSS and click Run Code to see the design change.

HTML + CSS Code Edit and run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Selectors and Colors</title>
    <style>
        body{
            font-family:Arial;
            background:#f5f9ff;
            padding:20px;
        }

h1{
            color:#06285f;
        }

p{
            color:#334155;
            line-height:1.7;
        }

.card{
            background:white;
            padding:20px;
            border-radius:16px;
            margin-bottom:15px;
            box-shadow:0 8px 20px rgba(0,0,0,.08);
        }

.highlight{
            background:#fff3cd;
            color:#7a4b00;
            padding:4px 8px;
            border-radius:8px;
        }

#main-card{
            border:3px solid #0d6efd;
        }

.card h2{
            color:#0d6efd;
        }

.btn{
            display:inline-block;
            background:linear-gradient(135deg,#06285f,#0d6efd);
            color:white;
            padding:10px 16px;
            border-radius:25px;
            text-decoration:none;
            font-weight:bold;
        }
    </style>
</head>
<body>

<h1>CSS Selectors & Colors</h1>

<div class="card" id="main-card">
        <h2>Main Course Card</h2>
        <p>This card uses class and ID selectors.</p>
        <p>CSS colors make the page <span class="highlight">attractive</span>.</p>
        <a href="#" class="btn">Learn More</a>
    </div>

<div class="card">
        <h2>Second Card</h2>
        <p>This paragraph is styled using descendant selector.</p>
    </div>

</body>
</html>

Output Preview Browser result

Practice Task: Change the button gradient, h1 color, card border color and highlight background.

Common Mistakes

Mistakes Students Should Avoid

Selectors and colors need proper symbols, spellings and consistency.

Wrong Habits

Forgetting dot before class selector
Forgetting hash before ID selector
Using same ID repeatedly on many elements
Using too many random colors
Choosing poor contrast between text and background

Correct Habits

Use dot for class selector
Use hash for ID selector
Use class for reusable design
Use limited brand colors
Maintain readable contrast

Remember: Beautiful design is not about using many colors. It is about using the right colors with balance and clarity.

Quick Revision

Remember These Points

Revise these before moving to Chapter 15.

Element Selector

Selects all elements with a specific tag name.

Class Selector

Starts with dot and is used for reusable design.

ID Selector

Starts with hash and is used for unique elements.

HEX Color

A professional color format such as #0d6efd.

RGBA Color

Allows color transparency using alpha value.

Gradient

Creates smooth color transition backgrounds.

Protected Learning Content

CSS Selectors & Colors

Element Selector

Class Selector

ID Selector

Colors

After This Chapter, You Will Understand

Selectors

Class & ID

Colors

Gradients

Basic CSS Selectors

1 Element Selector

2 Class Selector

3 ID Selector

Grouping, Descendant and Universal Selectors

Grouping Selector

Descendant Selector

Universal Selector

Ways to Write Colors in CSS

Color Name

HEX Color

RGB Color

RGBA Color

4 HSL Color

5 Common Color Properties

Gradient Backgrounds

6 Linear Gradient

Practice Selectors and Colors

Mistakes Students Should Avoid

Wrong Habits

Correct Habits

Test Your Understanding

1. Which symbol is used for class selector?

2. Which symbol is used for ID selector?

3. Which selector selects all paragraph tags?

4. Which color format supports transparency?

5. Which CSS function creates smooth color transition?

Remember These Points

Element Selector

Class Selector

ID Selector

HEX Color

RGBA Color

Gradient