The HTML class attribute is used to specify one or more class names for an element. Commonly, the class attribute points to a class in a style sheet. The class name is case sensitive.<\/p>\n\n\n\n
This attribute can also be used by\u00a0JavaScript\u00a0via the HTML DOM to make certain changes to HTML elements with a specified class name.<\/p>\n\n\n\n
In\u00a0HTML5, you can use the\u00a0class\u00a0attribute for any HTML element.<\/p>\n\n\n\n
In HTML 4.01, the\u00a0class\u00a0attribute cannot be used with the following elements:\u00a0<head>,\u00a0<html>,\u00a0<base>,\u00a0<basefont>,\u00a0<param>,\u00a0<style>,\u00a0<meta>,\u00a0<script>, and\u00a0<title>.<\/p>\n\n\n\n
Although there aren\u2019t specific requirements for the name of classes, it\u2019s better to use names describing the semantic purpose of the element, and not its presentation. The name should begin with a letter a-z or A-Z, and it can be followed by letters, digits (0-9), underscores (“_”), and hyphens (“-“).<\/p>\n\n\n\n
<tag class=\"classname\"><\/tag><\/code><\/pre>\n\n\n\nExample of the HTML class attribute:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n .red {\n color: red;\n }\n .orange {\n color: orange;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Example of the HTML class attribute<\/h1>\n <p class=\"red\">It is a some red paragraph.<\/p>\n <p>This is a some text.<\/p>\n <p class=\"orange\">It is a some yellow paragraph.<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nIn\u00a0CSS, if you want to select elements with a specific class, use a period (.) character followed by the class name.<\/p>\n\n\n\n
Example of the HTML class attribute used with CSS:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n .title {\n background-color: #1c87c9;\n color: #ffffff;\n padding: 20px;\n }\n <\/style>\n <\/head>\n <body>\n <h1>Example of the class attribute<\/h1>\n <h2 class=\"title\">Heading<\/h2>\n <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.<\/p>\n <h2 class=\"title\">Heading<\/h2>\n <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.<\/p>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nHTML elements can also have more than one class name. Each of them must be separated by a space.<\/p>\n\n\n\n
Example of the HTML class attribute with multiple class names:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n .title {\n background-color: #202131;\n color: #dddddd;\n padding: 15px 25px;\n }\n .text-right {\n text-align: right;\n }\n <\/style>\n <body>\n <h1>Example of multiple classes<\/h1>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <h2 class=\"title\">London<\/h2>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <h2 class=\"title text-right\">Paris<\/h2>\n <p>\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <h2 class=\"title\">Tokyo<\/h2>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nDifferent tags, such as\u00a0<h2>\u00a0and\u00a0<p>\u00a0can have the same class name and the same style.<\/p>\n\n\n\n
Example of the HTML class attribute with the <h2> and <p> elements:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <style>\n .grey-text {\n color: #808080;\n }\n <\/style>\n <body>\n <h1>Example of the class attribute <\/h1>\n <h2 class=\"grey-text\">Heading<\/h2>\n <p class=\"grey-text\">\n Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.\n <\/p>\n <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"The HTML class attribute is used to specify one or more class names for an element. Commonly, the class attribute points to a class in a style sheet. The class name is case sensitive. This attribute can also be used by\u00a0JavaScript\u00a0via the HTML DOM to make certain changes to HTML elements with a specified class name. In\u00a0HTML5, you can […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[582],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9325"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9325"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9325\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}