1. ما هي CSS ولماذا نحتاج إليها؟

CSS هي اختصار لـ Cascading Style Sheets (أوراق الأنماط المتتالية). وهي اللغة التي نستخدمها لتنسيق مستند HTML. بينما يوفر HTML الهيكل (العظام)، توفر CSS المظهر (الجلد والملابس والزينة).

فصل المهام (Separation of Concerns)

في تطوير الويب الحديث، نسعى دائماً لمبدأ "فصل المهام":

HTML: الهيكل والمحتوى.
CSS: العرض والتنسيق.
JavaScript: السلوك والتفاعل.

بدون CSS، ستكون صفحة الويب مجرد نص أسود على خلفية بيضاء، وتبدو رتيبة وغير منظمة. تسمح لك CSS بتحديد الألوان، والخطوط، والتخطيطات، والرسوم المتحركة، وغير ذلك الكثير.

ميزات CSS الرئيسية

التحكم في التخطيط (Layout): تموضع العناصر بدقة (على سبيل المثال، باستخدام Flexbox أو Grid).
الجماليات: تحديد الألوان والخلفيات والحدود والظلال.
التجاوب (Responsiveness): تكييف التخطيط بناءً على حجم شاشة المستخدم (مثل الهاتف، الجهاز اللوحي، أو الحاسوب).

مثال بسيط

تخيل أن لديك عنواناً في HTML:

html

Welcome to CSS

باستخدام CSS، يمكنك جعله يبدو كالتالي:

css h1 { color: blue; /* الخاصية (Property): القيمة (Value) */ font-size: 24px; }

سوف نتعمق في تشريح هذه القواعد في الدرس القادم!