{"id":78662,"date":"2020-07-02T13:55:58","date_gmt":"2020-07-02T08:25:58","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78662"},"modified":"2024-07-26T13:14:07","modified_gmt":"2024-07-26T07:44:07","slug":"html-class-attribute","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/","title":{"rendered":"HTML Classes – HTML Class Attribute"},"content":{"rendered":"

Welcome to DataFlair HTML Tutorial Series<\/strong>!!!! In this article, we will learn about HTML Classes in detail. So let’s start!!<\/p>\n

\"HTML<\/a><\/p>\n

HTML Classes<\/h2>\n

HTML class attribute can be accessed by any element and is useful to identify a group of elements in an HTML document together. These elements can be styled using CSS or actions that can be performed on them using JavaScript.<\/p>\n

Classes also help in creating interactive web pages as one can group elements under a common class and can then apply JavaScript functions to enhance user interactions.<\/p>\n

For example,<\/p>\n

<!DOCTYPE html> \r\n<html>   \r\n<head> \r\n    <style> \r\n        .country {  \r\n            background-color: black; \r\n            color: white; \r\n            padding: 8px; \r\n            font-weight: bold;\r\n            font-family: monospace;\r\n        } \r\n    <\/style> \r\n<\/head> \r\n <body> \r\n    <h2 class=\"country\">DataFlair<\/h2> \r\n    <p>HTML Attributes<\/p>  \r\n    <h2 class=\"country\">Article on<\/h2>  \r\n    <h2 class=\"country\">The Class attribute<\/h2>   \r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
(Here, the class attribute is accessed with CSS using the dot operator i.e. \u2018.\u2019).
\nOutput-<\/strong><\/p>\n
\"html<\/a><\/p>\n
As seen, all the HTML elements with the same class are styled in the same manner. A period (.) is used to access the elements with the same class name in CSS.<\/p>\n
Note – <\/strong>The class name is case-sensitive.<\/p>\n
Using classes in HTML allows for consistent styling and behavior across multiple elements. It is useful in large projects where maintaining uniformity is crucial. Also, classes enhance code readability and organization, making it easier for developers to collaborate and maintain the codebase.<\/p>\n
HTML Classes Attribute on Inline Elements<\/h2>\n
Class attribute in HTML can be used on inline elements, such as the <span> element.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nspan.dataflair{\r\n  font-size: 40px;\r\n  color: red;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to <span class=\"dataflair\">DataFlair<\/span> E-Learning<\/h1>\r\n<p>This is an <span class=\"dataflair\">important<\/span>text.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
Same Class Name for Different Tags<\/h2>\n
The same class name can be used for different tags, i.e., h2, and p can use the same class name and can be styled in the same manner.
\nCode-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<style> \r\n    .dataflair { \r\n        background-color: black; \r\n        color: white; \r\n        padding: 10px; \r\n    } \r\n<\/style>   \r\n<body> \r\n  \r\n    <h2 class=\"dataflair\">DataFlair<\/h2> \r\n    <p class=\"dataflair\">We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.<\/p>  \r\n<\/body>   \r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
Multiple Classes<\/h2>\n
It is possible for HTML elements to have more than one class name, separated by spaces. For example,
\nCode-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<style> \r\n    .dataflair { \r\n        background-color: black; \r\n        color: white; \r\n        padding: 10px; \r\n    } \r\n      \r\n    .centre { \r\n        text-align: center; \r\n    } \r\n<\/style> \r\n  \r\n<body> \r\n  \r\n    <h2 class=\"dataflair centre\">Welcome<\/h2> \r\n    <h2 class=\"dataflair\">To DataFlair<\/h2> \r\n    <h2 class=\"dataflair\">E-learning<\/h2> \r\n  \r\n<\/body> \r\n  \r\n<\/html>\r\n\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
As we can see, the first heading(Welcome) is center-aligned, since it belongs to another class, centre, whose CSS property has been applied to it.<\/p>\n
Class Attribute in JavaScript<\/h2>\n
The class attribute can be used along with javascript. The getElementsByClassName() method is useful to access the elements belonging to a specific class. For example,
\nCode-<\/strong><\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<head>\r\n<style> \r\n    .dataflair { \r\n        background-color: black; \r\n        color: white; \r\n        padding: 10px; \r\n    } \r\n      \r\n    .centre { \r\n        text-align: center; \r\n    } \r\n<\/style>\r\n<script>\r\n   function myFunction() {\r\n  var x = document.getElementsByClassName(\"dataflair\");\r\n  for (var i = 0; i < x.length; i++) {\r\n    x[i].style.display = \"none\";\r\n  }\r\n}\r\n<\/script> \r\n<\/head> \r\n<body>\r\n\r\n    <button onclick=\"myFunction()\">Click Me.<\/button>\r\n    <h1>Class attribute with JavaScript<\/h1>\r\n    <h2 class=\"dataflair centre\">Welcome<\/h2> \r\n    <h2 class=\"dataflair\">To DataFlair<\/h2> \r\n    <h2 class=\"dataflair\">E-learning<\/h2> \r\n  \r\n<\/body> \r\n  \r\n<\/html>\r\n<\/pre>\n
Output-<\/strong>
\nBefore-<\/strong><\/p>\n
\"html<\/a><\/p>\n
After-<\/strong><\/p>\n
\"html<\/a><\/p>\n
As soon as we click the button, all the elements with the class name \u2018dataflair\u2019 hide.<\/p>\n
Browsers Supported by HTML Classes Attribute<\/h2>\n
    \n
  • Firefox<\/li>\n
  • Google Chrome<\/li>\n
  • Internet Explorer<\/li>\n
  • Safari<\/li>\n
  • Opera<\/li>\n<\/ul>\n
    Summary<\/h2>\n
    HTML classes are of great importance for grouping similar elements, that need to be styled using CSS or perform an action using JavaScript, together. HTML classes are defined using the class attribute and are accessed using a period(.). An HTML document can have multiple classes, and different tags can also have the same class name. We\u2019ve also discussed the styling of elements using the class element and the \u2018getElementsByClassName\u2019 method of JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Welcome to DataFlair HTML Tutorial Series!!!! In this article, we will learn about HTML Classes in detail. So let’s start!! HTML Classes HTML class attribute can be accessed by any element and is useful...<\/p>\n","protected":false},"author":10,"featured_media":78947,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[22498,22497],"class_list":["post-78662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html-class-attribute","tag-html-classes"],"yoast_head":"\nHTML Classes - HTML Class Attribute - DataFlair<\/title>\n<meta name=\"description\" content=\"HTML Classes - learn about html class attribute, class attribute on inline elements, same class & multiple classes, Class attribute in JavaScript, browsers supported\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/html-class-attribute\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Classes - HTML Class Attribute - DataFlair\" \/>\n<meta property=\"og:description\" content=\"HTML Classes - learn about html class attribute, class attribute on inline elements, same class & multiple classes, Class attribute in JavaScript, browsers supported\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-class-attribute\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-02T08:25:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-26T07:44:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Html-Classes-df.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Classes - HTML Class Attribute - DataFlair","description":"HTML Classes - learn about html class attribute, class attribute on inline elements, same class & multiple classes, Class attribute in JavaScript, browsers supported","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/","og_locale":"en_US","og_type":"article","og_title":"HTML Classes - HTML Class Attribute - DataFlair","og_description":"HTML Classes - learn about html class attribute, class attribute on inline elements, same class & multiple classes, Class attribute in JavaScript, browsers supported","og_url":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-07-02T08:25:58+00:00","article_modified_time":"2024-07-26T07:44:07+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Html-Classes-df.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML Classes – HTML Class Attribute","datePublished":"2020-07-02T08:25:58+00:00","dateModified":"2024-07-26T07:44:07+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/"},"wordCount":438,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Html-Classes-df.jpg","keywords":["html class attribute","html classes"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-class-attribute\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/","url":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/","name":"HTML Classes - HTML Class Attribute - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Html-Classes-df.jpg","datePublished":"2020-07-02T08:25:58+00:00","dateModified":"2024-07-26T07:44:07+00:00","description":"HTML Classes - learn about html class attribute, class attribute on inline elements, same class & multiple classes, Class attribute in JavaScript, browsers supported","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-class-attribute\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Html-Classes-df.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/Html-Classes-df.jpg","width":1200,"height":628,"caption":"HTML Classes"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-class-attribute\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"HTML Classes – HTML Class Attribute"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=78662"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78662\/revisions"}],"predecessor-version":[{"id":142924,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78662\/revisions\/142924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/78947"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=78662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=78662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=78662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}