أول CSS لك: الصفحة تحصل على ألوان

تعرّف على لغة CSS، وشاهد موقعك يتوقف عن أن يبدو كأنه من 1995.

شاهد معي: ما هو CSS

HTML هو هيكل الصفحة. CSS هو ملابسها: الألوان، الخطوط، الأحجام، المسافات. يُكتب في ملف منفصل ويبدو هكذا:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

اقرأه بصوت عالٍ هكذا: “كل عنوان h1، لوّنه أزرق داكن. كل فقرة p، اجعلها 18 بكسل ورمادية داكنة.”

كل قاعدة لها ثلاثة أجزاء:

selector (h1) – ما تنطبق عليه القاعدة،
property (color) – ماذا نغيّر،
value (darkblue) – إلى ماذا نغيّره.

النقطتان تفصلان الخاصية والقيمة، وكل سطر ينتهي بفاصلة منقوطة. انتبه لتلك الفواصل – نسيان واحدة هو أكثر أخطاء CSS شيوعاً في العالم.

الربط: أخبر صفحتك عن CSS

داخل مجلد my-website، أنشئ ملفاً جديداً اسمه style.css.
أضف هذا السطر داخل <head> في كل صفحات HTML:
```
<link rel="stylesheet" href="style.css">
```
هذا يقول: “ستجد شكل هذه الصفحة في ملف style.css.”
اختبر أنه يعمل – ضع شيئاً مستحيل التفويت في style.css:
```
body {
  background-color: yellow;
}
```
احفظه، حدّث الصفحة. هل كل شيء أصفر؟ يعمل! (يمكنك حذف الأصفر الآن.)

الألوان في CSS

يمكنك كتابة الألوان ككلمات إنجليزية (red، darkblue، lightgray، tomato، gold…) أو بدقة أكبر كود يبدأ بعلامة #: #1d4ed8 أزرق، #16a34a أخضر. امزج أي كود لون تحبه على htmlcolorcodes.com.

دورك الآن 💪

زيّن موقعك بأول ألوان. في style.css، اضبط:

لون خلفية الصفحة كلها (body)،
لون عناوينك (h1, h2)،
حجم ولون فقراتك (p).

حلول – بالطبع، عدّل الألوان كما تشاء:

🏫 موقع المدرسة – الحل

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

الأزرق يناسب موقع مدرسة جيداً – يبدو موثوقاً (لهذا البنوك تستخدمه أيضاً!).

🙋 الموقع الشخصي – الحل

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

الموقع الشخصي يمكن أن يكون أجرأ – البرتقالي الدافئ يقول “هذا المكان حي”.

🌍 يوميات سفر – الحل

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

أخضر كالغابات والمروج – مثالي ليوميات سفر.

⚽ موقع النادي – الحل

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

الأفضل هو ألوان ناديك – تلعب بالأحمر؟ إذن أحمر!

⚠️

قاعدة القراءة: نص داكن على خلفية فاتحة (أو العكس). أصفر فاتح على أبيض غير مقروء. عندما لا تكون متأكداً، اسأل شخصاً: “هل تقرأ هذا براحة؟”

✅

تحقق من نفسك: موقعك له ألوانه الخاصة – ولأن CSS يعيش في ملف واحد مرتبط بكل صفحة، كل صفحاتك تلونت دفعة واحدة. ذكي، أليس كذلك؟

ما ستخرج به من هذا الدرس

CSS = الشكل. يُكتب في ملف style.css، يُربط بوسم <link> في <head>.
القاعدة: selector { property: value; } – ولا تنسَ الفواصل المنقوطة.
ملف CSS واحد يزيّن موقعك كله دفعة واحدة.