استخدام CSS و id و class - تطوير الويب

الفرق في الصفحة مع CSS وبدون CSS :

انظر للكود التالي الذي يحتوي على وسم html و body و h1 فقط بدون استخدام الـ CSS:

ثم انظر للكود التالي الذي هو نفس الكود اعلاه لكن استخدمنا CSS لجعل لون خلفية الصفحة زرقاء ولون النص أصفر:

هذا جمال الـ CSS.

قبل أن نبدأ… ما هي CSS بالضبط؟

CSS تعني Cascading Style Sheets أي "أوراق الأنماط المتتالية".

HTML = الهيكل (مثل هيكل البيت: الجدران، الأبواب، النوافذ)
CSS = الديكور والألوان (الدهان، الأثاث، الستائر، الإضاءة)

بدون CSS → موقعك سيكون أبيض وأسود وممل مثل ورقة وورد قديمة!
مع CSS → موقعك يصبح فاخر، متجاوب، ملون، ويجذب الزوار!

كيف نكتب الكود الخاص بلغة CSS ؟

لكتابة أي كود بلغة CSS نستخدم الصيغة التالية: ;القيمة:الخاصية ;property:value على سبيل المثال اذا اردنا تغيير لون الخط الى اللون الأحمر نستخدم خاصية color وتكون قيمة اللون أحمر red فيكون الكود النهائي هو : ;color:red . مثال اخر لتغغير حجم النص الى 30 بكسل يكون الكود النهائي هو ;font-size:30px ، توجد هناك العديد والعديد من الخصائص التي يمكن تغييرها بلغة CSS مثل لون وحجم النص كما ذكرنا سابقا ، أيضا هناك لون الخلفية وعرض العنصر وارتفاعه وبُعده عن هوامش الصفحة أو بُعده عن العناصر الاخرى والكثير والكثير من الخصائص التي سوف نشرحها باذن الله عن طريق الامثلة العملية لكي توضح الصورة بشكل افضل ان شاء الله.

كيف نربط CSS بـ HTML؟

3 طرق فقط:

Inline داخل السطر: باستخدام السمة ""=style
Internal داخل الهيد: داخل وسم <style> في الـ head
External ملف خارجي : ملف منفصل <"link rel="stylesheet" href="style.css> ← الأفضل!

الطريقة الأولى: داخل السطر

وذلك باستخدام المتغير <style> ويوضع داخل تاقات الـ HTML المراد تغيير تنسيقها ويكون قيمته عبارة عن كود الـ CSS كما في الكود التالي:

الطريقة الثانية: داخل الهيد HEAD

وذلك بوضع وسم جديد يسمى style داخل وسم head في ملف الـ HTML ، وهذا وسم فتح <style> و هذا وسم اغلاقه </style> ومابين وسمي الفتح والاغلاق نضع كود الـ CSS كما في الكود التالي:

الطريقة الثالثة: ملف خارجي

وذلك بكتابة كود الـ CSS في ملف جديد ويكون امتداده css. فمثلا اسم الملف مع امتداده يكون mystyle.css ، ويجب علينا ان نقوم بربط هذا الملف مع ملف html صفحة الموقع ، وذلك باستخدام وسم جديد يسمى link وهذا وسمه <link> ليس له وسم نهاية ونقوم باضافة هذا الوسم داخل وسم head في الصفحة . انظر الى كود صفحة html التي انشاناها سابقا واضفنا عليها وسم link داخل وسم head :

في السطر 3 - اضفنا العنصر link الذي يربط ملف الـ CSS الخاص تنسيق الصفحة بملف html الذي به بيانات الصفحة. لاحظ هناك متغيرين هما rel و href . المتغير href نضع داخله اسم ملف الـ CSS الذي قمنا بانشائه ويجب علينا كتابة الامتداد ايضا ، المتغير rel يقصد به علاقة هذا الملف mystyle.css بهذه الصفحة فنخبره انه عبارة عن ملف تنسيق أي stylesheet ، فهذا المتغير مع قيمته (rel="stylesheet") تكون ثابته دائما نضعها مثل ماهي. الان ننشئ ملف جديد يكون اسمه وامتداده mystyle.css ونضعه بجانب ملف الـ html أي بنفس المسار ( بنفس المجلد) وداخل هذا الملف نقوم بكتابة كود CSS على سبيل المثال الكود التالي:

كماقلنا سابقا كود الـ css عبارة عن الخاصية وقيمتها فاذا كتبنا ;color:red فهذا يعني ان لون الخط أحمر لكن اي عنصر سيكون لونه هكذا ؟ هل النص داخل h1 او النص الذي بداخل h2 او النص الذي بداخل تاق p ؟! لذلك يجب ان نحدد اي عنصر أو اي تاق سيتم تطبيق هذا التنسيق عليه ، فنذكر اسم العنصر أو التاق ثم نضع القوسين التاليين {} ومابينهما يكون كود الـ css كما في السطر في الكود اعلاه. في السطر 1 قلنا أن التاق أو العنصر body يكون محاذاة النص في منتصف الصفحة ، أي عنصر داخل عنصر body سوف يظهر في منصفح الصفحة وليس في يسارها كما راينا في المقال السابق عند عدم استخدام css. أيضا بنفس السطر قلنا أن لون الخلفية للتاق او العنصر body يكون اخضر. في السطر 2 اعطينا لون خط ابيض للعنصر أو التاق h1. في السطر 3 اعطينا لون خط اخضر ولون خلفية بيضاء للعنصر او التاق h2. في السطر 4 ذكرنا ان حجم الخط للعنصر أو التاق p يكون 30 بكسل.

لماذا نحتاج id و class؟

لأن CSS لا يعرف "أي عنصر" يريد تنسيقه إلا إذا قلنا له!

مثلًا: "غيّر لون العنوان الرئيسي فقط" → #main-title
"غيّر لون كل الأزرار" → .btn

الدرس اليوم = مفتاح CSS

بدون فهم id و class والسمات…
كل دروس CSS القادمة ستكون مثل الكلام بالهواء!

id مقابل class – احفظ هذا الجدول للأبد!

id = الاي دي

فريد 100% في الصفحة كلها
لا يُسمح بتكراره أبدًا (خطأ فادح لو كررته)
يُستخدم في CSS بـ #
يُستخدم للروابط الداخلية (#contact)
قوته أعلى من class في CSS
مثالي للعناصر الوحيدة: الهيدر، الفوتر، الـ hero

<header id="main-header">...</header>
<section id="about">من أنا</section>
<button id="submit-btn">إرسال</button>

class = الكلاس

يمكن تكراره مليار مرة
العنصر الواحد يقدر يكون له 20 كلاس
يُستخدم في CSS بـ .
أساس كل مكتبات التصميم (Tailwind, Bootstrap)
مثالي لتنسيق مجموعات

<p class="alert danger big">تحذير</p>
<div class="card shadow p-8">بطاقة</div>
<button class="btn primary large">اضغط</button>

مثال عملي: صفحة كاملة بكل السمات المهمة

تم النسخ ✓


<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>موقعي الاحترافي</title>
</head>
<body>

<header id="main-header" class="navbar fixed top-0 w-full bg-white shadow-lg">
<nav class="container mx-auto flex justify-between py-6">
<h1 id="logo" class="text-3xl font-bold">شعار</h1>
<ul class="flex gap-8">
<li><a href="#home" class="nav-link active">الرئيسية</a></li>
<li><a href="#services" class="nav-link">خدماتي</a></li>
<li><a href="#contact" class="nav-link">تواصل</a></li>
</ul>
</nav>
</header>

<section id="home" class="hero min-h-screen bg-gradient-to-b from-teal-500 to-cyan-600 text-white">
<div class="text-center pt-32">
<h2 class="text-6xl font-black">مرحبا بكم</h2>
<p class="text-2xl mt-6" title="هذه رسالة ترحيبية">أنا مبرمج ويب محترف</p>
</div>
</section>

<section id="contact" class="py-20">
<form action="" class="max-w-2xl mx-auto">
<input type="text" placeholder="اسمك" class="input-field" required>
<button type="submit" id="send-btn" class="btn-primary" data-action="send">إرسال</button>
</form>
</section>

<footer id="main-footer" class="bg-gray-900 text-white text-center py-10">
<p>© 2025 - جميع الحقوق محفوظة</p>
</footer>
</body>
</html>

✅ ملاحظة: لا تقلق من أسماء الكلاسات في المثال الآن… سنشرح تنسيقها بالتفصيل في الدروس القادمة. ركّز هنا فقط على فكرة id و class وكيف تُكتب داخل الوسوم.

تمرين اليوم: حوّل أي صفحة قديمة إلى كود احترافي

مهمتك الآن (ممنوع التأجيل!)

افتح أي صفحة عملتها من الدروس السابقة
أضف id لكل قسم رئيسي (header, main, footer, about, contact...)
أضف class لكل عنصر متشابه (كل الأزرار → btn، كل البطاقات → card)
أضف روابط داخلية في القائمة (#about، #services، #contact)
أضف title على أي صورة أو رابط
استخدم data-* على زر مثلاً data-type="submit"
مبروك! موقعك الآن جاهز 100% للـ CSS القادم ✅

خلاصة الدرس في 3 جمل فقط:

id = اسم شخصي فريد لا يتكرر أبدًا
class = فريق أو مجموعة يمكن تكرارها
بدون id و class → لا يوجد CSS ولا تنسيق أبدًا!

الدرس القادم: أساسيات CSS – ألوان، خطوط، مسافات، حدود…

استعد… موقعك سيتحول من أبيض وأسود إلى لوحة فنية خلابة!