Friday, 22 July 2016

How to apply different styles to same class name using different html elements


You can use same class name to style differently. Check the code so that you can understand more.

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style>
.heading {
color: pink;
font-size: 20px;
}

span.heading {
color: Orange;
font-size: 50px;
}

div.heading {
color: lightgreen;
font-size: 30px;
}
</style>
</head>
<body>
<span class="heading">Heading-1</span>
<div class="heading">Heading-1</div>
<p class="heading">Heading-1</p>
<span class="heading">Heading-1</span>
</body>
</html>


Output:


No comments:

Post a Comment