مقدمة تحفيزية :
“مرحباً بك في مرحلة الإبداع! هل لاحظت أن موقعك حتى الآن يبدو قديماً وأبيض وأسود؟ اليوم سنمنحك ‘فرشاة الألوان’ . لغة CSS هي المسؤول الأول عن تحويل الأكواد الجامدة إلى صفحات احترافية بألوان متناسقة ، خطوط رائعة ، وتنسيقات تبهر الزوار . هل أنت مستعد لتكون مصمم ويب حقيقياً ؟”
🏗️ 1. مفهوم CSS (Cascading Style Sheets)
تخيل أن HTML هو “الجسد”، فإن CSS هي :
• الألوان : اختيار لون الخلفية والنصوص.
• الخطوط : تغيير حجم ونوع الخط العربي ليصبح جذاباً .
• المقاسات : التحكم في عرض الصور وأماكن الأزرار .
🔗 2 . كيف نربط التصميم بالهيكل ؟ (الطريقة الاحترافية)
أفضل طريقة لربط التصميم هي إنشاء ملف منفصل .
• 1 قم بإنشاء ملف جديد داخل مجلد مشروعك MyFirstProject .
• 2 سمِّ الملف style.css .
• 3 الآن، يجب أن نخبر ملف index.html بأن يقرأ تعليمات التصميم من هذا الملف .
الكود الذي يوضع داخل وسم <head> في ملف الـ HTML :
HTML
<"link rel="stylesheet" href="style.css>
3 • أول كود CSS لك (تغيير لون العنوان)
افتح ملف style.css واكتب بداخله هذا الكود البسيط :
css
} h1
; color : #2c3e50
; text-align : center
,font-family : Arial
; sans-serif
{
• h1 : نختار العنصر الذي نريد تلوينه.
• color : اخترنا لوناً احترافياً غامقاً.
• text-align : جعلنا العنوان في منتصف الصفحة تماماً.
🎯 تحدي المصمم الصاعد:
. 1 أنشئ ملف style.css.2 .
. 2 اربطه بملف الـ HTML الخاص بك باستخدام وسم <link>.3 .
. 3 غير لون الخلفية للموقع كاملاً باستخدام هذا الكود في ملف الـ CSS :
CSS
} body
; background-color : #f0f2f5
{
🚀 ماذا بعد؟
هذه هي البداية فقط ! في الدرس الثاني ، سنتعلم “صندوق الأسرار” (The Box Model) ، وكيف نتحكم في المسافات والحدود لنجعل الأزرار تبدو مثل أزرار المواقع العالمية .