HTML Classes
The HTML class attribute makes it possible to define same styles for elements with the same class name.
We will see how to apply this to both block elements and inline elements.
Classes in block elements:
Here we have <div> elements that points to the same class name. Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.animals {
background-color: GoldenRod ;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="animals">
<h2>Birds</h2>
<p>Birds are animals that have feathers and that are born out of hard-shelled eggs.</p>
</div>
<div class="animals">
<h2>Insects</h2>
<p>Insects are divided into two main groups: those with wings and those without. There are
nearly one million known species of insects, and more are being discovered each year!
Many people think that spiders are insects—they are not. Spiders belong to a different group of
animals called arachnids, which also includes scorpions.</p>
</div>
<div class="animals">
<h2>Mamals</h2>
<p>If an animal drinks milk when it is a baby and has hair on its body, it belongs to the mammal
class.</p>
</div>
<div class="animals">
<h2>Reptiles</h2>
<p>Reptiles are a class of animal with scaly skin. They are cold blooded and are born on land.</p>
</div>
<div class="animals">
<h2>Amphibians</h2>
<p>Amphibians are born in the water. When they are born, they breath with gills like a fish.
But when they grow up, they develop lungs and can live on land.</p>
</div>
</body>
</html>
Thus we get,
Class Attribute on Inline Elements
<!DOCTYPE html>
<html>
<head>
<style>
span.imp {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1><span class="imp">Important </span> Heading</h1>
<p>This is some <span class="imp">confidential</span> text.</p>
</body>
</html>
Important Heading
This is some confidential text.
PS: For any questions, queries, feedback, and comments feel free to write us at support@qatechhub.com and amruta@qatechhub.com
