Cézanne's early work is often concerned with the figure in the landscape and includes many paintings of groups of large, heavy figures in the landscape, imaginatively painted.
The class attribute assigns one or more classnames to the <b> tag.
Classnames are defined in a stylesheet or in a local <style> element.
Classes, i.e. classnames, are used to style the b element.
A class attribute styling a <b> element.
Cézanne's early work is often concerned with the figure in the landscape and includes many paintings of groups of large, heavy figures in the landscape, imaginatively painted.
<style>
.teal {color: teal; font-size: 24px;}
</style>
<article>
<p>
Cézanne's <b class="teal">early work</b> is
often concerned with the figure in the landscape
and includes many paintings of groups of large,
heavy figures in the landscape, imaginatively painted.
</p>
</article>
Classes (i.e. classnames) are used for styling the b 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.
<b class="classnames">
| Value | Description |
|---|---|
| classnames | One or more space-separated class names. |
A class attribute styling a <b> element.
Clicking the button toggles a classname that changes the text color.
Cézanne's early work is often concerned with the figure in the landscape and includes many paintings of groups of large, heavy figures in the landscape, imaginatively painted.
<style>
.teal-text { color: teal; font-size: 24px; }
.orangered { color: orangered; }
</style>
<article>
<p>
Cézanne's <b id="early" class="teal-text">early work</b> is
often concerned with the figure in the landscape and includes
many paintings of groups of large, heavy figures in the
landscape, imaginatively painted.
</p>
</article>
<br/>
<button onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let element = document.getElementById("early");
element.classList.toggle("orangered");
}
</script>
Two CSS classes are defined in the <style> element.
The class attribute in the <b> tag assigns one classname.
Clicking the button toggles the second class, changing the element's text 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 <b>
