HTML Classes
Give a paragraph both notice and featured classes.
Understand the topic
The class attribute assigns one or more reusable tokens to an element. CSS class selectors begin with a dot. Several elements can share a class, and an element can have several classes separated by spaces. Use names that describe a role or purpose, so the name still makes sense when the visual design changes.
Worked example
<style>.notice { padding: 1rem; border-left: 4px solid #15803d; } .urgent { font-weight: bold; }</style>
<p class="notice">New course published.</p>
<p class="notice urgent">Applications close today.</p>Both paragraphs match .notice. The second also matches .urgent. Class tokens are separated by whitespace, not commas.
Practice
Give a paragraph both notice and featured classes.
Show a suggested answer
<p class="notice featured">Featured workshop</p>Common mistake
class="notice,featured" defines one token containing a comma rather than two classes. Use spaces between class names.