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.
A class attribute styling a <div> element.
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>
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.
<div class="classnames" >
Value | Description |
---|---|
classnames | One or more space-separated class names. |
A class attribute styling a <div> element.
Clicking the button toggles a classname that changes the background color.
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>
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.
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 |
Back to <div>