| created | 2026-05-03 23:47 | ||
|---|---|---|---|
| source | https://www.freecodecamp.org/learn/responsive-web-design-v9/lecture-html-fundamentals/what-are-ids-and-classes | ||
| tags |
|
The class attribute should be used when you want to apply a set of CSS [[styles]] to multiple [[HTML elements|elements]], because it does not require you to use unique class names.
The class attribute can use words that might be considered "reserved" in HTML, like box.
<divclass="box"></div>Multiple class names can be assigned to one class by using spaces.
<divclass="box red-box"></div>Class names also do not need to be unique, and can be assigned to different class attributes.
index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"
content="width=device-width, initial-scale=1.0" /><title>Colored boxes example</title><linkrel="stylesheet" href="./styles.css" /></head><body><divclass="box red-box"></div><divclass="box blue-box"></div><divclass="box red-box"></div><divclass="box blue-box"></div></body></html>sytles.css
.box {
width:100px;
height:100px;
}
.red-box {
background-color: red;
}
blue-box {
background-color: blue;
}