CSS Selector
What is CSS Selector?
Selector: It is an HTML tag. The style will be applied to the tag. CSS Selectors is based on their element name, id,
and class etc.
There are various ways to represent selectors. These are given below.
The Element or Type Selectors
The element selectors select elements based on the element name. You can select all <h1> elements on a
page. Let us consider an example.
Example of Element selector
|
1 2 3 4 |
h1{ Color:white; Background-color:red; } |
The Universal Selector
The universal selectors relatively match the name of any element type. Let us consider an example.
Example of Universal selector
|
1 2 3 |
* { Color:#8BC34A; } |
The Id Selector
You can use id selector by using the id attribute of an HTML. The id an element should be unique define. (#) character is used to represent the Id of the element. Let us consider an example.
Example of Id selector
|
1 2 3 4 |
#divid{ Border:2px solid black; Background-color:#ff82ab } |
The class Selector
The class selector selects elements with a specific class attribute. You must have to use (.) character while using class. Let us consider an example.
Example of the class selector
|
1 2 3 4 |
#divclass{ Border:1px solid black; Background-color:#8b2252 } |
The Grouping Selector
Grouping selector is used to select multiple selectors. You must have to use the separator (,) character between the element. Let us consider an example.
Example of Grouping selector
|
1 2 3 4 5 |
P, h1 { Border:1px solid black; Background-color:#00c5cd; Text-align:center; } |
Property: It is a type of attribute of HTML. The HTML attributes are covered into CSS properties. Like color, border, margin etc.
Value: It is assigned to properties. Like #8BC34A, #fff etc.
The given above example, you can define a headline background color as follows.
|
1 |
h1{background-color:#8BC34A;} |
Here h1(headline) is a selector, background-color is a property and #8BC34A is the value of that property.
