The Palace Museum is a national museum housed in the Forbidden City at the core of Beijing, China. It was established in 1925 after the last Emperor of China was evicted from his palace, and opened its doors to the public.
The class attribute assigns one or more classnames to the <p> tag.
Classnames are defined in a stylesheet or in a local <style> element.
Classes, i.e. classnames, are used to style elements.
A class attribute styling a <p> element.
The Palace Museum is a national museum housed in the Forbidden City at the core of Beijing, China. It was established in 1925 after the last Emperor of China was evicted from his palace, and opened its doors to the public.
<style>
.paragraph {background:moccasin; padding:15px; width:400px; }
</style>
<article>
<p class="paragraph">
The Palace Museum is a national museum housed in
the Forbidden City at the core of Beijing, China.
It was established in 1925 after the last Emperor
of China was evicted from his palace, and opened
its doors to the public.
</p>
</article>
Classes (i.e. classnames) are used for styling the p 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.
<p class="classnames">
| Value | Description |
|---|---|
| classnames | One or more space-separated class names. |
A class attribute styling a <p> element.
Clicking the button toggles a classname that changes the paragraph background color.
The Palace Museum is a national museum housed in the Forbidden City at the core of Beijing, China. It was established in 1925 after the last Emperor of China was evicted from his palace, and opened its doors to the public.
<style>
.paragraph { padding: 15px; width: 400px; }
.bg-mocassin { background: moccasin; }
.bg-cornsilk { background: cornsilk; }
</style>
<section>
<p id="myparagraph" class="paragraph bg-mocassin">
The Palace Museum is a national museum housed in
the Forbidden City at the core of Beijing, China.
It was established in 1925 after the last Emperor
of China was evicted from his palace, and opened
its doors to the public.
</p>
</section>
<br />
<button onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let element = document.getElementById("myparagraph");
element.classList.toggle("bg-cornsilk");
}
</script>
Three CSS classes are defined in the <style> element.
The class attribute in <p> assigns two of those.
Repeatedly clicking the button toggles the third class, changing the paragraph 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 <p>
