available in these cities:
- Amsterdam
- London
- Paris
- Rome
- Berlin
- New York
- Houston
- Los Angeles
The class attribute assigns one or more classnames to the <aside> tag.
Classnames are defined in a stylesheet or in a local <style> element.
Classes, i.e. classnames, are used to style the aside element.
A class attribute styling an <aside> element.
The class gives the element its background color.
<style>
.azure-aside {padding: 20px;background: paleturquoise;border-radius: 10px;}
</style>
<div style="display:flex;align-items:center;">
<main>
Art appreciation classes are<br />
available in these cities:
<ul>
<li>Amsterdam</li>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
<li>Berlin</li>
<li>New York</li>
<li>Houston</li>
<li>Los Angeles</li>
</ul>
</main>
<aside class="azure-aside">
<i>For the cheapest flights<br />
please contact our travel<br />
partner KLM.</i>
</aside>
</div>
Classes (i.e. classnames) are used for styling the aside 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.
<aside class="classnames">
| Value | Description |
|---|---|
| classnames | One or more space-separated class names. |
A class attribute styling an <aside> element.
Clicking the button toggles a classname changing the background color.
<style>
.aside { padding: 20px; border-radius: 10px;}
.bg-turquoise { background: paleturquoise; }
.bg-blue { background: lightblue; }
</style>
<div style="display:flex;align-items:center;">
<main>
Art appreciation classes are<br />
available in these cities:
<ul>
<li>Amsterdam</li>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
<li>Berlin</li>
<li>New York</li>
<li>Houston</li>
<li>Los Angeles</li>
</ul>
</main>
<aside id="myaside" class="aside bg-turquoise">
<i>For the cheapest flights<br />
please contact our travel<br />
partner KLM.</i>
</aside>
</div>
<br/>
<button onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let element = document.getElementById("myaside");
element.classList.toggle("bg-blue");
}
</script>
Three CSS classes are defined in the <style> element.
The class attribute in <aside> assigns two of those classes.
Repeatedly clicking the button toggles another class that changes the background color.
Here is when class support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
11.1 | Mar 2011 |
 Safari
|
5.0 | Jun 2010 |
