css selectors
TRANSCRIPT
CSS SELECTORS
Prepared By:Parth Trivedi…ツ
TYPES OF SELECTORS
There are 6 types of selectors
1. Simple Selector
2. Class Selector
3. Generic Selector
4. Id Selector
5. Universal Selector
6. Pseudo Classes
SIMPLE SELECTOR
The Simple Selector form is a single element to which the property and value is applied For example
h1
{
font-size:20pt;
color:red;
}
CLASS SELECTOR
Using Class Selector we can assign different styles to the same element. These different styles appear on different occurrences of that element. For example
H1.RedText
{
font-size:20pt;
color:red;
}
<body><h1 class=“RedText”>Heading</h1></body>
GENERIC SELECTOR
We define the class in generalized form, that particular class can be applied to any tag. For example
.RedText
{
font-size:20pt;
color:red;
}
<body><h1 class=“RedText”>Heading</h1></body>
ID SELECTORTo define a special style for special element we can use “id Selector”. The id Selector is similar to the Class Selector.
Syntax:- #name_of_id{property:value list;} For example
#RedText
{
font-size:20pt;
color:red;
}
<body><h1 id=“RedText”>Heading</h1></body>
UNIVERSAL SELECTOR
This Selector is denoted by ”*”. This selector applied to all the elements in the document. For example
*
{
font-size:20pt;
color:red;
}
PSEUDO CLASSES
Using Pseudo classes we can give special effects on the selector. There some pseudo classes which are more commonly used• Focus • Hover• Hyperlink
Syntax:- selector:pseudo-class {property:value list;}
Thank You...ツ