What is Selectors in CSS?
In CSS, Selectors are used to target the element in our Html web page that we wants to style.
Types of Selectors in CSS -
1. Element Selectors
2. Id Selectors
3. Class Selectors
4. Group Selectors
So, this is the defination and types of selectors in CSS which you can use to design your web page.
So, let's learn how to use this selectors in CSS.
Step-1:- As usual, 1st make the bioler plate of Html
Step-2:- Under the body tag write some paragraph, heading, footer with class and id so you can apply selectors.
Step-3:- Then under the head tag add style tag.
Step-4:- Then, under the style tag add element, id, class and group selectors that is discussed above.
Step-5:- Your web page is complete.
Here is the full coding of selectors in Html.
Thank You
In CSS, Selectors are used to target the element in our Html web page that we wants to style.
Types of Selectors in CSS -
1. Element Selectors
/* element selector */
h1{
color: blueviolet;
}
2. Id Selectors
/* id selector */
#p1{
color: blue;
border: 3px solid black;
width: 666px;
}
3. Class Selectors
/* class selector */
.p2{
color: violet;
border: 3px solid black;
width: 666px;
}
4. Group Selectors
/* group selector */
footer, span{
color: teal;
border: 3px solid black;
width: 666px;
}
So, this is the defination and types of selectors in CSS which you can use to design your web page.
So, let's learn how to use this selectors in CSS.
Step-1:- As usual, 1st make the bioler plate of Html
Step-2:- Under the body tag write some paragraph, heading, footer with class and id so you can apply selectors.
Step-3:- Then under the head tag add style tag.
Step-4:- Then, under the style tag add element, id, class and group selectors that is discussed above.
Step-5:- Your web page is complete.
Here is the full coding of selectors in Html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="selectorstyle.css">
<title>selectors</title>
<style>
/* element selector */
h1{
color: blueviolet;
}
/* id selector */
#p1{
color: blue;
border: 3px solid black;
width: 666px;
}
/* class selector */
.p2{
color: violet;
border: 3px solid black;
width: 666px;
}
/* group selector */
footer, span{
color: teal;
border: 3px solid black;
width: 666px;
}
</style>
</head>
<body>
<h1>Selectors</h1>
<p id="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. .</p>
<p class="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cumque, veniam!</p>
<p class="p2">Lorem ipsum, dolor sit amet consectetur adipisicing elit..</p>
<footer>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Explicabo, necessitatibus.</footer>
<span>Lorem ipsum dolor sit amet.</span>
</body>
</html>
I make it in Visual Studio. You can make it in any software. But, Visual Studio is very much better and it's size is very low of something 52 Mb. So you can download it and program like a proffesional coder.
Here is the link of Visual Studio
Thank You
0 Comments