Sign up and we'll send you the best freelance opportunities straight to
your inbox.
We're building the largest freelancing marketplace for people like you.
Impressionism is a 19th-century art movement
characterized by relatively small brush strokes,
emphasis on accurate depiction of light, ordinary
subject matter, and unusual visual angles.
Impressionism originated with a group of
Paris-based artists whose independent exhibitions
brought them to prominence in the 1870s and 1880s.
<style>
.main {
max-width: 500px;
background: papayawhip;
padding: 30px;
border-left: 5px solid brown;
}
</style>
<main class="main">
<p>
<b>Impressionism</b> is a 19th-century art movement
characterized by relatively small brush strokes,
emphasis on accurate depiction of light, ordinary
subject matter, and unusual visual angles.
Impressionism originated with a group of
Paris-based artists whose independent exhibitions
brought them to prominence in the 1870s and 1880s.
</p>
</main>
A class attribute styling a <main> element.
Clicking the button toggles classname that changes the background and left border color of the main.
Impressionism is a 19th-century art movement
characterized by relatively small brush strokes,
emphasis on accurate depiction of light, ordinary
subject matter, and unusual visual angles.
Impressionism originated with a group of
Paris-based artists whose independent exhibitions
brought them to prominence in the 1870s and 1880s.
<style>
.main {
max-width: 500px;
background: papayawhip;
padding: 30px;
border-left: 5px solid brown;
}
.moccasin { background: moccasin; border-left: 5px solid black; }
</style>
<main id="mymain" class="main">
<b>Impressionism</b> is a 19th-century art movement
characterized by relatively small brush strokes,
emphasis on accurate depiction of light, ordinary
subject matter, and unusual visual angles.
Impressionism originated with a group of
Paris-based artists whose independent exhibitions
brought them to prominence in the 1870s and 1880s.
</main>
<br />
<button onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let element = document.getElementById("mymain");
element.classList.toggle("moccasin");
}
</script>
Code explanation
Three CSS classes are defined in the <style> element.
The class attribute in <main> assigns two of those.
Repeatedly clicking the button toggles the third class, changing the background and left border color of the element.
Sign up and we'll send you the best freelance opportunities straight to
your inbox.
We're building the largest freelancing marketplace for people like you.