Table of contents
No headings in the article.
Consider the following html code to understand examples given in the article:
<h2>
mayur's marks
</h2>
<ul>
<p> <b>subjects and marks</b> </p>
<li class="sub fav">ENGLISH-86</li>
<li class="sub">HINDI-89</li>
<li id="imp">MATHS-99.5</li>
</ul>
<div>
<p>REMARKS-mayur is an awesome student</p>
</div>
<div>
<h4 class="sub fav">sports he plays-</h4>
<ol>
<li class="sibling">basketball</li>
<li>shooting</li>
<li>badminton</li>
</ol><br>
<span >mayur's tel-9898989898</span>
</div>
</html>
##UNIVERSAL SELECTOR-it helps us to target all the elements of our html file. E.g.-if we want to change the background color of whole page,then we will use
* {
background-color: cornflowerblue;
}
##INDIVIDUAL SELECTOR-it is used when we want to select a specific element. E.g.-if we want that only the color of our heading should change and become white,then-
h1{
color: antiquewhite;
}
##CLASS AND ID SELECTOR-if we have attached class and id attributes to some elements then we can target those elements by their id(using #id name ) and class(using .class name). E.g.-if i want to give background green to hindi,english and blue to maths,
.sub{
background-color: green;
}
#imp{
background-color: blue;
}
##AND SELECTOR-what if we want that for styling css should select only those elements which should have (for example CLASS A CLASS B CLASS C) all the three classes.in this particular case AND selector is used. E.g.-lets convert the color of english to grey
li.sub.fav{
background-color: gray;
}
##COMBINED SELECTOR-this is used when we want to target all the elements and classes which we have mentioned.basically we can say its an OR selector. E.g.-for coloring both span and sports list,
span,ol,ol>li{
background-color: chartreuse;
}
##INSIDE AN ELEMENT-we use this when we want to select a specific element or group of elements inside an element.
div ol li{
color: crimson;
##DIRECT CHILD-this is somewhat similar to inside n element.it is used when we want to select an element's child.(can be chained also)
div>p{color: whitesmoke;}
##SIBLING-if we want to select the next upcoming element then we use sibling. E.g.-if we want to make shooting black
.sibling + li{
background-color: black;
}
##BEFORE AND AFTER PSEUDO SELECTORS-if we want to select an area and style it just before and after an element we use this selector.use of content=" and display=block is necessary for this element. E.g.- for the following html code:
<body>
<form action="">
<label class="label1" for="">name</label>
<input type="text"><br>
<label for="">email</label>
<input type="email" name="" id="">
</form>
</body>
If we want a circle before the label element,we can add like this:
.label1::before{
display: block;
content: '';
width: 20px;
height: 20px;
border-radius: 10px;
background-color: aqua;
}
same thing can be done if we want a circle after label element by replacing before with after in the code