COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

CSS Selectors

Learn how CSS selectors identify HTML elements and apply styles to them.

What is a CSS Selector?

A CSS selector is used to select the HTML elements that you want to style.

After selecting an element, CSS applies the specified properties and values to it.

CSS Selector Diagram

HTML Element <h1>Hello</h1>

→

CSS Selector h1

→

CSS Style color: blue;

Basic Selector Syntax

selector {
    property: value;
}

The selector identifies the HTML element, while the property and value define its style.

Example 1: Element Selector

Code

h1 {
    color: blue;
}

<h1>
    Welcome To CIIT Institute 👨‍🏫❤️..!
</h1>

Simple Explanation

The h1 selector selects all <h1> elements and changes their color to blue.

Output

Example Page

Welcome To CIIT Institute 👨‍🏫❤️..!

Example 2: Class Selector

Code

.title {
    color: green;
}

<p class="title">
    Learn CIIT Institute 👨‍🏫👀.
</p>

Simple Explanation

A class selector starts with a . symbol. It can be used to style multiple HTML elements with the same class.

Output

Example Page

Learn CIIT Institute 👨‍🏫👀.

Example 3: ID Selector

Code

#heading {
    color: red;
}

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

Simple Explanation

An ID selector starts with a # symbol. It targets the HTML element having that specific ID.

Output

Example Page

CSS Selectors

Common CSS Selectors

Element Selector
Class Selector
ID Selector
Universal Selector
Grouping Selector
Attribute Selector
Descendant Selector
Child Selector
Pseudo-Class Selector
Pseudo-Element Selector

Remember:

CSS selectors tell the browser which HTML elements should be styled. Different selectors are used for different styling requirements.

Summary

CSS selectors are used to identify HTML elements for styling. Common selectors include element, class, ID, universal, attribute, descendant, child, pseudo-class, and pseudo-element selectors.