CSS Selector
CSS selector is used to select html element to give style
CSS simple selector
1 - Tag Name
2 -Class Name
3 - Id Name
Tag Name = Select HTML element by Tag Name
Example 01
<!--******* This is index.html file ***********-->
<body>
<h1> this is simple tag name selector</h1>
<p> simple selector are very easy to learn</p>
</body>
CSS Code
/* ************ This is style.css file *******************/
/********************* It is Tag Name selector ********************/
h1{
color:red;
font-family:cursive;
background-color:whitesmoke;
}
p{
color:blue;
font-size:18px;
}
Try above code
Class Name = select HTML element by class name
Example 02
<!--********** This is index.html file ********-->
<!-- ***** it is example of Class Name *****-->
<body>
<h1 class="head01">This is class Name selector </h1>
<h1 class="head02">This is class Name selector </h1>
<p class="demo"> More than 1 class name can same in document </p>
</body>
CSS Code
NOTE : Class Name selector are start with dot(.ClassName)
/**************** This is Class Name selector********************/
.head01{
color:red;
font-weight:16px;
background-color:black;
}
.head02{
color:blue;
font-family:sans-sarief;
background-color:tag;
}
.demo{
color:green;
font-style:cursive;
}
Try above code
Id Name =select HTML element by id
Example 03
<!-- **************This is index.html file **********-->
<!--**********This is example of id name ********-->
<body>
<p id="demo"> this is paragraph and example of id selector</p>
<h1 id="head"> this is heading with id head </h1>
</body>
CSS Code
Note : id selector start with hash (#idName)
/**** This is style.css file******/
/*********** This is id selector css code *****/
#demo{
color:pink;
border:1px solid red;
font-size:15px;
}
#head{
color:blue;
font-family:cursive;
font-style:normal;
}
Learn advance selector after complete css basic
