CSS (Cascading Style Sheets)

شنو هي CSS؟

الـ CSS هي اللغة المسؤولة عن تنسيق وتصميم صفحات الويب. اذا شبهنا الـ HTML بـ "الهيكل العظمي" وبناء الغرف، فالـ CSS هي "الصبغ، الديكور، وترتيب الأثاث". هي اللي تحول النصوص الجامدة الى واجهة مستخدم (UI) جذابة ومرتبة.

ليش نستخدمها؟

الغرض الأساسي من CSS هو فصل المحتوى (Content) عن التصميم (Design). هذا الشي ينطيك فوائد مهمة:

1. التحكم المركزي: تكدر تغير شكل الموقع كله بتعديل ملف CSS واحد.
2. التجاوب (Responsiveness): تخلي الموقع يشتغل بشكل حلو على الموبايل واللابتوب باستخدام الـ Media Queries.
3. سرعة التحميل: المتصفح يحمل ملف الـ CSS مرة وحدة ويطبقه على كل الصفحات.

هيكلية الكود (Syntax)

كود الـ CSS بسيط ومنطقي، يتكون من ثلاث أجزاء رئيسية تسمى (Rule Set):

1. Selector: العنصر اللي نريد نستهدفه (مثلاً h1, p, أو class معين).
2. Property: الخاصية اللي نريد نغيرها (مثلاً color, font-size, margin).
3. Value: القيمة اللي نريد ننطيها للخاصية (مثلاً red, 16px).

"""css /_ Selector / p { / Property: Value _/ color: #333; font-size: 16px; line-height: 1.5; } """

مفهوم الـ Box Model

هذا أهم مفهوم لازم تفهمه بـ CSS. كل عنصر بصفحة الويب (صورة، نص، زر) المتصفح يشوفه على شكل "صندوق" (Box). هذا الصندوق يتكون من طبقات:

1. Content: المحتوى الفعلي (النص أو الصورة).
2. Padding: المسافة الداخلية بين المحتوى والحدود (Border).
3. Border: الإطار المحيط بالعنصر.
4. Margin: المسافة الخارجية بين هذا العنصر والعناصر اللي بصفه.

طرق إضافة CSS

اكو 3 طرق حتى نربط الـ CSS بالـ HTML:

1. External (المفضل): ملف خارجي بصيغة .css نربطه بالصفحة. هذا هو الستاندر بالشغل الحقيقي.
2. Internal: نكتب الكود داخل وسم <style> بنفس صفحة الـ HTML.
3. Inline: نكتب الستايل مباشرة داخل العنصر (مثلاً <h1 style="color:red">). حاول تبتعد عن هذا النوع لأنه يسوي مشاكل بالصيانة (Maintenance).

مثال عملي

هذا مثال يجمع الأشياء اللي ذكرناها:

/* استهداف كلاس اسمه card */
.card {
  width: 300px;
  border: 1px solid #ddd; /* Border */
  padding: 20px; /* مسافة داخلية */
  margin: 10px; /* مسافة خارجية */
  background-color: white;
  border-radius: 8px; /* زوايا دائرية */
}

/* استهداف العنوان داخل الكارد */
.card h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

نصيحة

بالبداية راح تحس بالدوخة بسبب كثرة الـ Properties. لا تحفظها. ركز على فهم الـ Box Model وطريقة الـ Selectors (شلون تستهدف العناصر بدقة). باقي التفاصيل تكدر تبحث عنها وتلكاها بسهولة من تحتاجها.

شلون تتعلمها؟

اكو مصادر هواية، بس هاي الزبدة اللي تفيدك وتبديك صح:

1. Sololearn: رابط الكورس على Sololearn

2. فيديوهات يوتيوب:

   • كورس كامل (عربي): اذا تفضل فيديو واحد طويل بي كل التفاصيل، هذا الشرح من عبد الرحمن جمال يعتبر كورس كامل وشامل: رابط الفيديو على يوتيوب

   • نظرة سريعة (إنكليزي): فيديو قصير جداً (100 ثانية) من قناة Fireship يعطيك فكرة عامة وسريعة عن اللغة: رابط الفيديو على يوتيوب