HTML <div> class Attribute

The class attribute on a <div> tag assigns one or more classnames to the content division element. Classes are used to style elements. Classnames are defined in a stylesheet or in a local <style> element.

Example

#

A class attribute styling a <div> element.

Impressionism

Impressionism is a 19th-century art movement characterized by relatively small, thin, yet visible brush strokes, open composition, emphasis on accurate depiction of light in its changing qualities (often accentuating the effects of the passage of time), ordinary subject matter, inclusion of movement as a crucial element of human perception and experience, and unusual visual angles.

The Impressionists faced harsh opposition from the conventional art community in France. The name of the style derives from the title of a Claude Monet work, Impression, soleil levant (Impression, Sunrise), which provoked the critic Louis Leroy to coin the term in a satirical review published in the Parisian newspaper Le Charivari.

The development of Impressionism in the visual arts was soon followed by analogous styles in other media that became known as impressionist music and impressionist literature.

<style>
  .bg-blue {background-color:aliceblue;padding:25px;}
</style>

<div class="bg-blue">
  <h3>Impressionism</h3>
  <p>
    Impressionism is a 19th-century art movement characterized 
    by relatively small, thin, yet visible brush strokes, open 
    composition, emphasis on accurate depiction of light in its 
    changing qualities (often accentuating the effects of the passage 
    of time), ordinary subject matter, inclusion of movement as a 
    crucial element of human perception and experience, and 
    unusual visual angles.
  </p>
  <p>
    The Impressionists faced harsh opposition from the conventional 
    art community in France. The name of the style derives from the 
    title of a Claude Monet work, Impression, soleil levant 
    (Impression, Sunrise), which provoked the critic Louis Leroy 
    to coin the term in a satirical review published in the 
    Parisian newspaper Le Charivari.
  </p>
  <p>
    The development of Impressionism in the visual arts was soon 
    followed by analogous styles in other media that became known 
    as impressionist music and impressionist literature.
  </p>
</div>

Using class

The class attribute assigns one or more classnames to the <div> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the div element.

JavaScript uses classes to access one or more elements by classname.

Tip:  class is a global attribute that can be applied to any HTML element.


Syntax

<div class="classnames" >

Values

#

Value Description
classnames One or more space-separated class names.


More Examples

A class attribute styling a <div> element.
Clicking the button toggles a classname that changes the background color.

Impressionism

Impressionism is a 19th-century art movement characterized by relatively small, thin, yet visible brush strokes, open composition, emphasis on accurate depiction of light in its changing qualities (often accentuating the effects of the passage of time), ordinary subject matter, inclusion of movement as a crucial element of human perception and experience, and unusual visual angles.

The Impressionists faced harsh opposition from the conventional art community in France. The name of the style derives from the title of a Claude Monet work, Impression, soleil levant (Impression, Sunrise), which provoked the critic Louis Leroy to coin the term in a satirical review published in the Parisian newspaper Le Charivari.

The development of Impressionism in the visual arts was soon followed by analogous styles in other media that became known as impressionist music and impressionist literature.


<style>
  .bg-blue {background-color:aliceblue;padding:25px;}
  .bg-moccasin {background: moccasin;}
</style>

<div class="bg-blue" id="mydiv">
  <h3>Impressionism</h3>
  <p>
    Impressionism is a 19th-century art movement characterized 
    by relatively small, thin, yet visible brush strokes, open 
    composition, emphasis on accurate depiction of light in its 
    changing qualities (often accentuating the effects of the passage 
    of time), ordinary subject matter, inclusion of movement as a 
    crucial element of human perception and experience, and 
    unusual visual angles.
  </p>
  <p>
    The Impressionists faced harsh opposition from the conventional 
    art community in France. The name of the style derives from the 
    title of a Claude Monet work, Impression, soleil levant 
    (Impression, Sunrise), which provoked the critic Louis Leroy 
    to coin the term in a satirical review published in the 
    Parisian newspaper Le Charivari.
  </p>
  <p>
    The development of Impressionism in the visual arts was soon 
    followed by analogous styles in other media that became known 
    as impressionist music and impressionist literature.
  </p>
</div>

<br />
<button onclick="toggle();">Toggle class</button>

<script>
  let toggle = () => {
    let element = document.getElementById("mydiv");
    element.classList.toggle("bg-moccasin");
  }
</script>

Code explanation

Two CSS classes are defined in the <style> element.

The class attribute on the <div> element assigns one classname.

Repeatedly clicking the button toggles another class, changing the background color.


Browser support

Here is when class support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <div>
Guides