CSS Selectors Part 2
Hey Friend, in our last tutorials we have seen about CSS selectors and different types of CSS selectors. There are 5 types of CSS Selectors are present in CSS. I have already told the first 2 selectors in our last tutorials. So you do not read it then read the last tutorial first then read this.
CSS Class Selector
This types of selector select the Html elements by their class name. You can select any class name by using “.” And style him. Let us see through an example
Important:- A Class Name should not be started from numerical value.
Example:-
<html>
<head>
<title> CSS Class Selector </title>
</head>
<style>
.marquee{
font-size: 30px;
color: red;
background-color: yellow;
}
.heading1{
color: Green;
}
.paragraph{
background-color: tomato;
border: 2px solid green;
}
</style>
<marquee class = "marquee"> Example of Selectors </marquee>
<h1 class = "heading1">
This is a Heading.
</h1>
<p class="paragraph"> This is a paragraph. </p>
</html>
Output :-
CSS Selector For Specific Elements
This type of selector selects the specific Html element. For example, If there are a lot of Html elements with the same class name but you want to style only on paragraph tag. Then you need to use CSS selector-specific tool. if you want to style a specific Html element then you need to go through this selector.
Example
<html>
<head>
<title> CSS Class Selector </title>
</head>
<style>
p.para {
Color: red;
Background-color: Yellow;
}
</style>
<body>
<h1 class="para"> This is 1st Heading. </h1>
<p class="para"> This is 1st Paragraph. </p>
<h2 class="para"> This is 2nd Heading. </h2>
<p class="para"> This is 2nd Paragraph. </p>
</html>
Output :-
Before Appling CSS Class Specific Selectors
After Appling CSS Class Specific Selectors
In this example, there are the same class names on the both heading and paragraph tag. But I want to style only paragraph tag. That’s why I use CSS class-specific selectors. First, select the specific Html element then the class name, and then the style which you want to style on that element.
0 comments:
Post a Comment