Before applying Style to html element using css we can select which element we are going to apply the style.
There are mainly 3 types of selectors in css
1. Element selectors using tag name
2. Id of the element.
3. Class of the element.
Element selectors using tag name.
Here we simply mention the tag name.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background:yellow;
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>hello friends</h1>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil, quod eos ad quos magni impedit, explicabo quisquam nesciunt
soluta ipsa quaerat eum ut fugit deleniti sed excepturi ullam iure,
iusto hic necessitatibus libero? Corrupti iusto quos cumque nulla maxime praesentium,
animi alias aspernatur cum? Dignissimos iusto repudiandae ratione, id repellat eius
maiores commodi blanditiis optio asperiores error magni! Incidunt quod nihil nisi esse
quibusdam explicabo ipsa dolore recusandae consectetur, voluptas corporis a suscipit
voluptatum dolor!</P>
</body>
</html>
Note in the above program we apply style to <h1> tag using the tag name h1. Here style will apply to all h1 tag.
Select using id name.
Suppose we have more than same type of element but we want to apply style to only one tag.
Here we use id selector.
To apply style we just add # symbol before tag name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background:yellow;
color: red;
}
#para1{
text-align: justify;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color:teal;
color: white;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>hello friends</h1>
<P id="para1">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil, quod eos ad quos magni impedit, explicabo quisquam nesciunt
soluta ipsa quaerat eum ut fugit deleniti sed excepturi ullam iure,
iusto hic necessitatibus libero? Corrupti iusto quos cumque nulla maxime praesentium,
animi alias aspernatur cum? Dignissimos iusto repudiandae ratione, id repellat eius
maiores commodi blanditiis optio asperiores error magni! Incidunt quod nihil nisi esse
quibusdam explicabo ipsa dolore recusandae consectetur, voluptas corporis a suscipit
voluptatum dolor!</P>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil, quod eos ad quos magni impedit, explicabo quisquam nesciunt
soluta ipsa quaerat eum ut fugit deleniti sed excepturi ullam iure,
iusto hic necessitatibus libero? Corrupti iusto quos cumque nulla maxime praesentium,
animi alias aspernatur cum? Dignissimos iusto repudiandae ratione, id repellat eius
maiores commodi blanditiis optio asperiores error magni! Incidunt quod nihil nisi esse
quibusdam explicabo ipsa dolore recusandae consectetur, voluptas corporis a suscipit
voluptatum dolor!</P>
</body>
</html>
Output:
Note In the above program we have two paragraph elements.
Only one paragraph has id “para1”.
So we are going to apply style to paragraph element which has id “para1”/
So we add ‘#’ symbol before para1 and apply style to it
#para1{
text-align: justify;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color:teal;
color: white;
}
Class selector.
Suppose we want apply same style to more than one element we use class selector.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sty{
background:yellow;
color: red;
}
#para1{
text-align: justify;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color:teal;
color: white;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1 class="sty">hello friends</h1>
<P id="para1">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil, quod eos ad quos magni impedit, explicabo quisquam nesciunt
soluta ipsa quaerat eum ut fugit deleniti sed excepturi ullam iure,
iusto hic necessitatibus libero? Corrupti iusto quos cumque nulla maxime praesentium,
animi alias aspernatur cum? Dignissimos iusto repudiandae ratione, id repellat eius
maiores commodi blanditiis optio asperiores error magni! Incidunt quod nihil nisi esse
quibusdam explicabo ipsa dolore recusandae consectetur, voluptas corporis a suscipit
voluptatum dolor!</P>
<P class="sty">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil, quod eos ad quos magni impedit, explicabo quisquam nesciunt
soluta ipsa quaerat eum ut fugit deleniti sed excepturi ullam iure,
iusto hic necessitatibus libero? Corrupti iusto quos cumque nulla maxime praesentium,
animi alias aspernatur cum? Dignissimos iusto repudiandae ratione, id repellat eius
maiores commodi blanditiis optio asperiores error magni! Incidunt quod nihil nisi esse
quibusdam explicabo ipsa dolore recusandae consectetur, voluptas corporis a suscipit
voluptatum dolor!</P>
</body>
</html>
Output:
Here to apply css to sty class we have just added ‘.’ Symbol to class name
.sty{
background:yellow;
color: red;
}
Here one h1 tag and one p tag both have class name ‘sty’. We have applied the style using ‘.’ Symbol before ‘sty’.
Thank you:
Muthu karthikeyan,Madurai
91 96293 29142
Tamilnad, India.