<p>This text will be normal. <span id="italicize">But this will be italicized!</span></p>

<p id="tooMuch" class="italic fancy underlined">Sometimes you can have too much class.</p>

<p id="howMany" class="bold blue italic">This paragraph element has <span id="classCount"></span> classes</p>

<button id="greeter">Click for a greeting</button>
<p id="greeting" class="hide italic">Hello!</p>

.blue { color: blue; }
.bold { font-weight: bold; }
.fancy { font-family: cursive; }
.hide { display: none; }
.italic { font-style: italic; }
.underlined { text-decoration: underline; }
// find element with id italicize, add italic class 
document.getElementById('italicize').classList.add('italic'); 

// find element with id 'tooMuch', remove the fancy class 
document.getElementById('tooMuch').classList.remove('fancy');

// find the paragraph with the id howMany and count its classes
var classCounter = document.getElementById('howMany').classList.length;
// find the element with the id classCount and set its text to show how many classes the #howMany element has 
document.getElementById('classCount').textContent = classCounter;

// when the greeter button is clicked, toggle the 'hide' class on the greeting paragraph.
var greeterButton = document.getElementById('greeter');
greeterButton.onclick = function() {
  document.getElementById('greeting').classList.toggle('hide');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.