HTML The class Attribute

  • HTML Classes are used to specify a style for a group of elements. Names of these classes preceded by a full stop (".").
  • We will study about the html classes in our CSS tutorial in details. For now we will show you the use of html classes with <div tag and <span tag.

Use of Html Classes with <div> tag


  • <div> tag is a block element which is used as the container for the other html elements.
  • <div> tag is basically used for applying CSS style to the group of html elements.
  • Like other block elements <div> tag also start and end with a line break at the time of execution.
  • When we use html classes with <div> tag, this makes it possible to define equal styles for equal <div> tags:
<!DOCTYPE html >
<html>
<head>
<style>
.tutorial {
background-color:yellow;
color:black;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="tutorial">
<h1>Android</h1>
<p>Android is an OS that has been developed too rapidly and gained popularity historically. In last few years, it developed so many versions and now Android is at the peak in mobile phone operating systems. It is now being used in smart TVs, Washing Machines also. </p>
</div>
<div class="tutorial">
<h1>C</h1>
<p>C is a popular general purpose programming language. C language has been designed by the Dennis Ritchie at Bell Laboratories in 1972.C language was originally created to design and support the UNIX operating system.C is a structured language so code can be written and read much easier. </p>
</div>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Use of HTML Classes with <span> tag


  • <span> tag is an inline element which is used as the container for the other html elements.
  • <span> tag is basically used for applying CSS style to the group of html elements.
  • Like other inline elements <span> tag display without line breaks at the time of execution.
  • When we use html classes with <span> tag, this makes it possible to define equal styles for equal <span> tags:
<!DOCTYPE html >
<html>
<head>
<style>
span.new {color:green;}
</style>
</head>
<body>
<h1>This <span class="new">is h1 tag</span></h1>
<h2>This <span class="new">is h2 tag</span></h2>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output