Class Attribute in HTML5
In this article I am going to describe about the implementation and use of Class Attribute in HTML5.
Class Attribute
Class attribute is used to apply common set of font, style, size for the texts in a content. It is used for style purposes.
The class attribute specifies one or more classnames 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 a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
Note that
- It will not have an effect if it is used with the following HTML tags like base, head, html, meta, param, script, style, and title.
- It reduces the repetitive works done by a user.
- It is possible to apply multiple class in a HTML document.
- It specifies the class name for an element.
Syntax
<element class="classname">
Browser Support
Class Attribute is supported in all major browsers.
Attribute Value
| Value |
Description |
| classname |
Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
Naming rules:
- Must begin with a letter A-Z or a-z
- Can be followed by: letters (A-Z|a-z), digits (0-9), hyphens ("-"), and underscores ("_")
- In HTML, all values are case-insensitive
|
Example of Class Attribute
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.content {
font-family: Monaco, Verdana, Sans-serif;
font-size: 12px;
border: 1px solid blue;
color: #002166;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 40%;
height: 10%;
padding-top: 50px;
padding-left: 10px;
}
</style>
</head>
<body>
<h1>Implementation of Class attribute in HTML5</h1>
<h4>Flowers</h4>
<p class="content">There are about 100 types of Flowers are available</p>
</body>
</html>
Output
