Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

HTML Classes

Reuse styles across many elements.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

The class attribute assigns one or more class names to an element. CSS and JavaScript use class names to select elements.

  • Many elements can share the same class.
  • One element can have several classes separated by spaces: class="card featured".
  • In CSS, select a class with a dot: .card { ... }.
  • Class names are case-sensitive.

Key Takeaways: HTML Classes

Mastering HTML Classes helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Classes Code Example

HTML 
<style>
  .city     { background: #071A2F; color: white; padding: 10px; border-radius: 8px; margin-bottom: 8px; }
  .capital  { border-left: 6px solid #14B8A6; }
</style>

<div class="city capital"><h3>Islamabad</h3><p>The capital of Pakistan.</p></div>
<div class="city"><h3>Lahore</h3><p>Famous for its food and history.</p></div>
<div class="city"><h3>Karachi</h3><p>The largest city by population.</p></div>
Free sign-in required · Google login available

HTML Classes Practice Exercises

Check what you learned in “HTML Classes”.

/ 3 solved
Fill in the blank

Give the element two classes: card and featured.

<div ="card ">Item</div>
✓ Correct! Not quite. Try again.
Multiple choice

How do you select a class named "intro" in CSS?

✓ Correct! Not quite. Try again.
Code challenge

Add the class "highlight" to the second paragraph only.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
HTML Div
Next ❯
HTML Id

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services