Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
The class attribute assigns one or more classnames to the <span> 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 <span> element.
Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
<style>
.span-class { color: firebrick; background-color: papayawhip;}
</style>
<article>
<p>
Did you know? The Great Pyramid of Giza was the tallest building in the world
for <span class="span-class">over 3,800 years</span>,
until the construction of the Lincoln Cathedral in the UK in 1311.
</p>
</article>
Classes (i.e. classnames) are used for styling the span 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.
<span class="classnames">
Value | Description |
---|---|
classnames | One or more space-separated class names. |
A class attribute styling a <span> element.
Clicking the button toggles a classname that changes the background color.
Did you know? The Great Pyramid of Giza was the tallest building in the world for over 3,800 years, until the construction of the Lincoln Cathedral in the UK in 1311.
<style>
.bg-papayawhip { background: papayawhip; }
.bg-lightblue { background: lightblue; }
</style>
<article>
<p>
Did you know? The Great Pyramid of Giza was the tallest building in the world
for <span id="myspan" class="bg-papayawhip">over 3,800 years</span>,
until the construction of the Lincoln Cathedral in the UK in 1311.
</p>
</article>
<br />
<button onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let element = document.getElementById("myspan");
element.classList.toggle("bg-lightblue");
}
</script>
Two CSS classes are defined in the <style> element.
The class attribute in <span> assigns one classname.
Repeatedly clicking the button toggles another class, changing the background color of the <span>.
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 <span>