CSS selectors are the elements used for targeting certain part of html document for styling purposes. there are various categories and types of selectors in CSS depending on which element are to be selected for styling .
<body>
<h1>this is a heading</h1>
</body>
look at the code snippet above . inside a body tag I have a element h1 containing some text. to style this an element selector is used how? let's look at the code snippet given below inside style tag
<style>
h1{
font-size: x-large;
font-weight: bold;
margin: 20px;
padding: 20px;
background-color: black;
color: white;
}
</style>
some random properties I have given to the element selected inside style tag that leads to a different style of the h1 text when displayed on browser.
class selector-these are selectors used when a group of html elements need uniform style .
id selector-these are special class of selector which target only the concerned element none other than the element that is target is affected by it. these selectors are generally used when we want to select certain unique properties of a element to change
in order to provide more unique style.
A class selector is selected with a dot(.) prefix with class name and ID selector is selected with a hash(#) prefix with ID name.
for example
<body>
<h1 id="heading">
CSStutorial
</h1>
<p class="para">
hey there this is selectors tutorial
</p>
</body>
<style>
.para{
background-color: black;
color: white;
}
#heading{
font-size: x-large;
color: aqua;
}
</style>
CSS UNIVERSAL SELECTOR
This selector selects all the element present in html page and give them uniform styling.
this selector is used at the very beginning for giving all element some common properties at the start. which later on can be overwritten or changed . a universal selector starts with a star/asterisk(*)
*{
margin: 0;
padding: 0;
}
adding above code sequence to the style tag in the above example makes the margin and padding of every element zero.
see by yourself
there is no gap between the two elements h1 and p in the above
image after applying the universal selector.
grouping of one or more selectors
<body>
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
</body>
h1{
text-align: center;
color: blue;
}
h2{
text-align: center;
color: blue;
}
h3{
text-align: center;
color: blue;
}
the above code is very hectic and tedious job to type for that purpose instead of explicitly defining properties we are going to group all heading into one selector block separated by comma .
h1, h2, h3{
text-align: center;
color: blue;
}
Top comments (0)