الدرس 11

اختيار العناصر باستخدام اسم العنصر و class و id

مش كل مرة هنعوز نغير كل الفقرات أحيانا هنختار مجموعة محددة وأحيانا عنصر واحد

عملنا مثال تمييز العناصر في الدروس اللي فاتت بس هنفصل الشرح هنا

بدل محتوى body بالمثال ده

<p>First Paragraph</p>
<p class="special">Second Paragraph</p>
<p class="special">Third Paragraph</p>
<p id="welcome">Welcome To Our Website</p>

ابدأ بالمثال ده لوحده داخل master.css

p {
  color: green;
}

الفقرات الأربعة هتبقى خضراء لأن المحدد p بيطابقها كلها حتى لو ليها class أو id

استبدل كود التنسيق السابق بالمثال ده علشان نقارن كل محدد لوحده

.special {
  color: red;
}

الفقرتان الثانية والثالثة بس هيتغير لونهم لأن عندهم class باسم special

النقطة موجودة في محدد CSS لكن قيمة class في HTML بنكتبها من غير نقطة

استبدل كود التنسيق مرة تانية

#welcome {
  color: blue;
}

الفقرة الأخيرة بس هتبقى زرقاء لأن علامة # معناها اختيار id المطابقة

متكررش نفس id في عنصرين داخل الصفحة لانه ال ID بيكون Unique مميز وهتفهم دة كله بعدين

لكن تقدر تستخدم نفس class على عناصر كتير عادي جدا

<p class="special large-text">Learn CSS Step By Step</p>

.special {
  color: red;
}

.large-text {
  font-size: 32px;
}

دلوقتي عندنا كلاسين داخل العنصر فصلنا بيهم بمسافة يعني class-one class-two class-three وهكذا

والفقرة أخدت اللون من تنسيق ال Class الأول وخدت حجم الخط من ال Class التاني

ضيف فقرة خامسة باسم class جديد وخلي ليها لون مختلف

ثم استخدم نفس الاسم على عنوان h2 وشوف إن class مش مرتبطة بنوع عنصر واحد

آخر تعديل للدرس: 12/10/2026