CSS Class Selector With Practical Examples
CSS Class Selector is use to style one or more element HTML elements share the same class name
CSS Class Selector targets element with specific class attribute.
CSS Class Selector denoted (Dot . ) class name.
CSS Class Selector With Practical Examples
Syntax
}
CSS Class Selector With Practical Examples
Examples
<!DOCTYPE html>
<html>
<head>
<title> CSS class Selector </title>
<style>
.demo{
color:cadetblue;
}
.intro{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
</style>
</head>
<body>
<div class="demo">
<h1> CSS Class Selector </h1>
<P> learn programming language css </P>
</div>
<p class="intro">
https://webdesigningtheory.blogspot.com/</p>
</body>
</html>
CSS Class Selector With Practical Examples
Explain Program
Step
1]
<!DOCTYPE html>
- This
declare the document type.
- browser
that the document is written in html
Step 2]
<html>.... .
- html is the root element of the html
page.
- Every thing inside it is part of
the webpage.
Step 3]
text tag text appears on the browser tab.
<head>
<title> CSS class Selector </title>
Step 4]
<style>
.demo{
color:cadetblue;
}
.intro{
border: 5px inset gold;
color:dodgerblue;
text-align:center;
}
</style>
.demo class Selector.
- change the text color any element with class demo to cadetblue.
.intro class selector.
- 5px gold inset border
- Text color dodger blue
- Ccentered text
closing the Tag
</style>
</head>
Step 6]
Body Section
<body>
<div class="demo">
<h1> CSS Class Selector </h1>
<P> learn programming language css </P>
</div>
<p class="intro">
https://webdesigningtheory.blogspot.com/</p>
<div> element with class demo
- all text inside color inherits
- heading and paragraph inside the demo div
- heading and paragraph appear in color cadet blue
</div> tag Close
- blue text
- center alignment
- gold inset border
Step 7]
closing the Tag
</body> </html>
CSS Class Selector With Practical Examples
Output
