Scribd
Upload
8 views13 pages

Selectors - Notes Lyst5656

The document provides an overview of CSS selectors, which are used to style HTML elements based on various criteria such as element name, id, and attributes. It categorizes selectors into basic and advanced types, explaining each with examples, including universal, element, class, id, and group selectors. The document emphasizes the differences between universal and element selectors and illustrates how to apply styles using these selectors effectively.

Uploaded by

policharlagurukishor1431
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views13 pages

Selectors - Notes Lyst5656

The document provides an overview of CSS selectors, which are used to style HTML elements based on various criteria such as element name, id, and attributes. It categorizes selectors into basic and advanced types, explaining each with examples, including universal, element, class, id, and group selectors. The document emphasizes the differences between universal and element selectors and illustrates how to apply styles using these selectors effectively.

Uploaded by

policharlagurukishor1431
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Front End Technologies

CSS - Day 3

Agenda
▪ CSS Selectors

CSS SELECTORS:
CSS selectors are used to select the content you want to style. CSS
Selectors are used to select HTML elements based on their element
name, id, attributes, etc. It can select one or more elements
simultaneously. There are many different types of CSS selector they
are listed below.

CSS SELECTORS

BASIC SELECTORS ADVANCED SELECTORS

✓ UNIVERSAL SELECTOR CHILD SELECTOR


✓ ELEMENT SELECTOR SIBLING SELECTOR
✓ CLASS SELECTOR ATTRIBUTE SELECTOR
✓ ID SELECTOR PSEUDO CLASS
✓ GROUP SELECTOR PSEUDO ELEMENTS

Full Stack Web Development HTML TapAcademy


General syntax of selector is
Selector
{
property : value;
property : value;
property : value;
.
.
}
Let’s explore all different type of selectors one by one
BASIC SELECTORS
➢ UNIVERSAL SELECTOR: CSS universal selectors select any
type of elements in an HTML page. It matches a single element.
An asterisk i.e. "*" is used to denote a CSS universal selector.
This will come into the picture when all the elements inside the
<body> tag should be styled. Let’s understand with an example.
index.html

Full Stack Web Development HTML TapAcademy


index.css

OUTPUT:

Full Stack Web Development HTML TapAcademy


As we can see clearly in the output all the elements present inside the
body background color and font as changed to powder-blue and cursive
so universal selector means it will select all the elements present inside
the body of the HTML page.

➢ ELEMENT SELECTOR: The element selector selects all


elements with the specified element name. let’s understand with
an example.
index.html

index.css

Full Stack Web Development HTML TapAcademy


Output:

As we can see in the output element selector selects all the elements
that matches the selector in this program it is h1 and applies the styling.
If you mention the selector as p tag it will select all the element that
matches p tag and applies styling. If we select boby element as a
selector then styling is applied to body of the html page, if we change
the css file of the above example.

Full Stack Web Development HTML TapAcademy


index.css

Output:

As we can see in the output using body element, we can style the body
of the elements, if you recollect output is similar to that of universal
selector but there is a difference between universal selector and element
selector. Now let’s understand the difference between universal
selector and element selector with an example.

Full Stack Web Development HTML TapAcademy


Using Element Selector:
index.html

index.css

Output:

Full Stack Web Development HTML TapAcademy


Using Universal Selector:
index.html

index.css

Output:

Full Stack Web Development HTML TapAcademy


As we can notice the output of element selector and universal selector,
we can change the background color of all the elements inthe body
using universal selector but using element selector it is not possible
because few elements have their own css property for example input
tag as its own css property that background color is white. This is the
main difference between element selector and universal selector.

➢ Group selector: In css group selector is used to group together


multiple selectors into one. We have to group together by
separating each element with comma. We can give the same
properties to a number of selectors without having to repeat
them, now let’s understand this with an example.

Output:

Full Stack Web Development HTML TapAcademy


As we can see from the above example using group selector we can
style multiple elements simultaneously.

➢ Class Selector: class selector is used to select all elements which


belong to a particular class attribute. To select the elements with
a particular class, use (.) character with specifying class name.
Class name is mostly used to set the CSS property to given class.
To give clear picture about class selector let’s see the example
below.

Full Stack Web Development HTML TapAcademy


Output:

As we can see from the above example using class selector we can
group different elements into a certain class and apply styling.

Full Stack Web Development HTML TapAcademy


➢ Id selector: The id selector is used to set the style of given id.
The id attribute is the unique identifier in HTML document. The
id of an element is unique within a page, so the id selector is used
to select one unique element. The id selector is used with #
character. Let’s now understand with an example.

Full Stack Web Development HTML TapAcademy


Output:

Full Stack Web Development HTML TapAcademy

You might also like