HTML: Class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the same class name. The class attribute specifies one or more class names for an element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.

In HTML5, the class attribute can be used on any HTML element.

Rules

  • Must begin with a letter A-Z or a-z.
  • A class name cannot start with a number.
  • Must not contain any space characters.
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens (“-“), and underscores (“_”).
  • In HTML, all values are case-insensitive.
<html>
	<head>
		<title>class tag</title>
		<style>
			.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	<h2 class=red> Heading line </h2>
	<p class =red>1st paragraph line</p>
	<p> paragraph tag </p>
	</body>
</html>

More than one class name

To specify multiple classes, separate the class names with a space. This allows you to combine several CSS classes for one HTML element. Syntax:- class=“class_name1 class_name2 class_nameN” Ex:- <p class =“red look”>I am first paragraph</p>

<html>
	<head>
		<title>class name twice or max </title>
		<style>
			p.red {color: #FF0000;}
			p.look{font-size: 100px;}
			.algn{text-align: center;}
		</style> 
	</head>
	<body>
	<h2>I am Heading</h2>
	<p class ="red look"> first paragraph</p>
	<p class="red algn">second paragraph</p>
	
	</body>
</html>

Tagged : / / / / / / /