Hey Friends, in our last tutorials we have seen about CSS syntax. Now, in this tutorial, we are going to learn about CSS selectors. So let’s begin…
CSS Selectors
CSS Selectors are used to selecting the Html elements which you want to style. Selectors are select Html elements by their id, class, attributes, type, etc.
There are several different types of CSS selectors are:-
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
CSS Element Selector
In this type of CSS Selector the selector select by the name of html element. Let’s See the Example below.
Example :-
<html>
<head>
<title> CSS Elements Selector </title>
</head>
<style>
h1 {
background-color: red;
color: Yellow; }
p {
background-color: Yellow;
color : Green; }
</style>
<body>
<h1> This is a Heading. </h1>
<p> This is a Paragraph Tag. </p>
</body>
</html>
Output: -
CSS ID Selector
This type of CSS Selector selects the element by its id. It is good practice to give id or class name to each and every Html element. The main reason behind giving id and class name was you can select a particular element by its id or class name.
Example: -
<html>
<head>
<title> CSS ID Selector </title>
</head>
<style>
#heading {
background-color: red;
color: Yellow;
}
#heading2{
background-color: black;
color: white;
}
#para {
background-color: Yellow;
color: Green;
}
</style>
<body>
<h1 id="heading"> This is a Heading. </h1>
<h2 id = "heading2"> This is another heading</h2>
<p id="para"> This is a Paragraph Tag. </p>
</body>
</html>
Note:- For Selecting the Html Element by its id. Always use "#" first, then the id name.
Output: -
0 comments:
Post a Comment