CSS هي القواعد التي تحدد الشكل الذي يكون عليه كل عنصر في الصفحة. فإذا كانت HTML هيكل المبنى، فإن CSS هي الدهان والبلاط وترتيب الأثاث. وكلمة «المتتالية» (Cascading) تشير إلى أنه عندما تتعارض عدة قواعد يختار المتصفح إحداها وفق ترتيب وأولوية محددين.
مثال بسيط#
h1 {
color: #1a5fb4;
font-size: 28px;
}تقول هذه الأسطر إن كل العناوين من المستوى الأول تكون زرقاء وكبيرة. وإذا أردت يوماً تغيير اللون عدّلتَ هذا الموضع وحده فتتغير كل صفحات الموقع.
ما الذي يمكن فعله بها#
- تحديد اللون والخط والحجم والمسافات بين العناصر
- تخطيط الصفحة بأدوات مثل Flexbox وGrid
- جعل الصفحة من اليمين إلى اليسار للعربية بـ
direction: rtl - التصميم المتجاوب ليظهر الموقع جيداً على الجوال وسطح المكتب
- حركات وتأثيرات بسيطة، مثل تغيير لون الزر عند مرور الفأرة عليه
أين تصادفها#
عندما تغيّر لون الترويسة من قسم التخصيص في ووردبريس، فأنت تغيّر CSS في الحقيقة. والقوالب الجاهزة تتألف غالباً من ملف CSS كبير أو أكثر.
خطأ شائع#
كتابة الأنماط داخل كل عنصر على حدة تصعّب صيانة الموقع. الأفضل حفظ الأنماط في ملف منفصل بتسمية منظمة ليبقى تغيير المظهر بسيطاً.