Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <div> class Attribute

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

Classnames are defined in a stylesheet or in a local <style> element.

Classes, i.e. classnames, are used for styling the div 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

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

Multiple classnames are separated by a space.

JavaScript uses classes to access 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>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides