الكلاس يحدد عناصر HTML لتطبيق تنسيق عليها. يمكن إعطاء الكلاس نفسه لعناصر كثيرة، فتتوحد أشكالها.

<p class="note">First note</p>
<p class="note warning">Careful!</p>

.note { padding: 12px; border-radius: 8px; background: #f4f7fd; }
.warning { background: #fff4e5; }

ملاحظات

• العنصر يمكن أن يحمل أكثر من كلاس، تفصل بينها مسافة.
• اختر أسماء تصف الدور (.warning) لا الشكل (.orange-box)، فيبقى الاسم صحيحًا إذا تغير اللون.