Classes & IDs for Styling — Free HTML Tutorial
Learn Classes & IDs for Styling in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
TL;DR: Learn Classes & IDs for Styling in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated
Classes & IDs for Styling in HTML
class attribute: reusable, multiple per element, styled with .classname. id attribute: unique, one per element, styled with #idname.
Use classes for repeated styles (buttons, cards). Use ids for unique elements (main content, nav). Specificity: id > class > tag.
CSS selectors: .class { }, #id { }, element.class { }, #id .child { }, .class1.class2 { } (both classes).
Classes & IDs for Styling — Syntax
<h1 id="hero">Main Title</h1>
<p class="intro">Introduction paragraph</p>
<button class="btn btn-primary">Click Me</button>
<style>
#hero { color: blue; }
.intro { font-size: 16px; }
.btn { padding: 10px; }
.btn-primary { background: blue; }
</style>
Learn Classes & IDs for Styling step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →