1) Type selector
=> It is basically a tag selector. we write the name of the tag in the style.css and style them accordingly.
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Type selector</h1>
<P>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
</P>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
</div>
</body>
</html>
style.css file:
h1 {
color: red;
text-decoration: underline;
}
p {
color: darkblue;
}
div {
color: darkmagenta;
}
output:
Type selector
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
2) class selector
=> To use a class selector we give a dot(.) before the class name in the style.css and style them accordingly.
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Type selector</h1>
<P>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
</P>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
</div>
<p class="orange_color">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam reprehenderit assumenda
voluptas.</p>
</body>
</html>
style.css file:
h1 {
color: red;
text-decoration: underline;
}
p {
color: darkblue;
}
div {
color: darkmagenta;
}
.orange_color {
color: darkgreen;
text-decoration: line-through;
}
Output:
Class Selector
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam reprehenderit assumenda voluptas.
**here the p tag which has the class ="orange_color", is styled differently than the p tag type selector
3) Id selector
=> To use an id selector we write # before the id name. An id selector should be unique to a single element. Id selector overrides all the other selectors.
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ID selector</h1>
<P>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
</P>
<div id="Pink_color">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
</div>
<p class="orange_color">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam reprehenderit assumenda
voluptas.</p>
<div class="orange_color">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, sequi.</div>
</body>
</html>
style.css file:
h1 {
color: red;
text-decoration: underline;
}
p {
color: darkblue;
}
div {
color: darkmagenta;
}
.orange_color {
color: darkgreen;
text-decoration: line-through;
}
#Pink_color {
color: blueviolet;
background: pink;
}
Output:
ID selector
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam reprehenderit assumenda voluptas.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, sequi.
4) attribute selector
=> we write an attribute in a tag and use it as a selector. To use attribute selector write the attribute name in a [].
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Attribute selector</h1>
<P>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
</P>
<div align="left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
</div>
<p class="orange_color">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam reprehenderit assumenda
voluptas.</p>
<div class="orange_color">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, sequi.</div>
</body>
</html>
style.css file:
h1 {
color: red;
text-decoration: underline;
}
p {
color: darkblue;
}
div {
color: darkmagenta;
}
.orange_color {
color: darkgreen;
text-decoration: line-through;
}
[align] {
color: darkcyan;
font-weight: bold;
background-color: beige;
}
Output:
Attribute selector
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, quae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam reprehenderit assumenda voluptas.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, sequi.
Comments
Post a Comment