CSS selectors
CSS selectors is used to select HTML elements which you want to syle.
Id selector
- It is used to apply CSS in a particular HTML element.
- We must have use ‘id’ with a unique name to specify a single element and apply css in this.
- Id name is used in CSS with a hash character(#), after this, we can use CSS attribute in ‘{ }’.
- Id name must have no space.
- You can use only one id name in a single HTML element.
Syntax –
Id=” unique id name here ”
For example
<html>
<head>
<title>Teknowize</title>
<link rel="stylesheet" type="text/css" href="G:/style.css">
</head>
<body>
<h2> welcome to teknowize</h2>
<h2 id="kuchv"> thank you </h2>
<p> this is my website </p>
</body>
</html>
#kuchv
{
Color: red;
}
Output
Class selector
- It is used to apply CSS in a particular HTML element.
- We must have use ‘class’ with a unique name to specify a single element and apply CSS in this.
- class name is use in CSS with the punctuation character(.), after these, we can use CSS attribute in ‘ { } ’.
- class name must have no space.
- You can use one or more than one class name in a single HTML element with giving space between two class name.
Syntax –
class=" unique class name here "
For example
<html>
<head>
<title>Teknowize</title>
<link rel="stylesheet" type="text/css" href="G:/style.css">
</head>
<body>
<h2> welcome to teknowize</h2>
<h2 class="kuchv1 kuchv2 "> thank you </h2>
<p> this is my website </p>
</body>
</html>
.kuchv1
{
Color: red;
}
.kuchv2
{
font-size:1rem;
}
Output
CSS Universal Selector
- The universal selector (*) selects all HTML elements on the page.
- The CSS rule below will affect every HTML element on the page.
For example
<html>
<head>
<title>Teknowize</title>
<link rel="stylesheet" type="text/css" href="G:/style.css">
</head>
<body>
<h2> welcome to teknowize</h2>
<h2> thank you </h2>
<p> this is my website </p>
</body>
</html>
*
{
Color: red;
}
Output
CSS element Selector
- It is used to apply CSS in a particular HTML element based on the element name.
- we need to write element name only, after these, we can use CSS attribute in ‘ { } ’.
For example
<html>
<head>
<title>Teknowize</title>
<link rel="stylesheet" type="text/css" href="G:/style.css">
</head>
<body>
<h2> welcome to teknowize</h2>
<h2> thank you </h2>
<p> this is my website </p>
</body>
</html>
p
{
Color: red;
}
Output
