html tutorial - class Attribute in HTML - html5 - html code - html form




Class attribute in html

Learn html - html tutorial - Class attribute in html - html examples - html programs

  • The class attribute is used to define the styles for elements with the name of the class.
  • We can define one or more class names for a single element.
  • The class attribute can be used by the style sheet or JavaScript to make changes in HTML elements.
  • The class attribute is a Global Attribute.

Syntax for class attribute in HTML:

<element class="classname">

Difference between HTML 4.01 and HTML 5 for class Attribute:

HTML 4.01

HTML 5

  • In HTML 5 the class attribute supports all HTML elements.

Applies To:

Element Attribute
All HTML elements class

class Attribute Values:

Value Description
classname classname is used to define one or more classes. For specify multiple classes for a single element by using space separated list.

Sample Coding for class Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
    <head>
        <style>
            span.page {
              font-size: 120%;
              color: orange;
              }   
        </style>
    </head>
    <body>
        <h1>My<span class="page">HTML</span>program</h1>
        <p>This is used to create<span class="page">Website</span>design.</p>
    </body>
</html>

Code Explanation for class Attribute in HTML:

class Attribute Code Explanation

  1. span.page is used to define a block of styles for a <span> element which has class name as page.
  2. class attribute is used to set class name for the <span> tag.
  3. page is a name of the class attribute that is used to get the styles for the <span> element.

Output for class Attribute in HTML:

class Attribute Output

  1. The output displays the term HTML and Website in orange color by using class attribute.

Browser Support for class Attribute in HTML:

Yes Yes Yes Yes Yes

Related Searches to class Attribute in html

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×