ما هي CSS وكيف تضيفها إلى صفحتك؟

إذا كانت HTML هيكل البيت، فإن CSS هي الطلاء والأثاث والإضاءة. اسمها اختصار Cascading Style Sheets أي «أوراق الأنماط المتتالية»، ووظيفتها تحديد شكل الصفحة: الألوان والخطوط والمسافات وترتيب العناصر.

شكل القاعدة

h1 {
  color: navy;
  font-size: 32px;
}

• h1 هو المحدد (Selector): أي العناصر نريد تنسيقها.
• color وfont-size خصائص، وnavy و32px قيم.
• كل سطر ينتهي بفاصلة منقوطة ;، والقواعد بين قوسين { }.

جرّب

ثلاث طرق لإضافة CSS

1. داخل الوسم (inline)

<p style="color: red;">نص أحمر</p>

سريعة لكنها سيئة للمواقع: تكرر التنسيق في كل عنصر ويصعب تعديله.

2. داخل الصفحة بوسم style

<head>
  <style>
    p { color: red; }
  </style>
</head>

مناسبة لصفحة واحدة أو للتجارب، كما في أمثلتنا.

3. ملف خارجي (الأفضل)

أنشئ ملفًا باسم style.css واربطه في head:

<link rel="stylesheet" href="style.css">

• ملف واحد ينسق كل صفحات الموقع.
• المتصفح يحفظه في الكاش، فتُفتح الصفحات التالية أسرع.
• الفصل بين البنية والشكل يجعل الكود أنظف.

التعليقات في CSS

/* هذا تعليق في CSS */

«المتتالية»: ماذا تعني؟

إذا انطبقت قاعدتان على العنصر نفسه، تفوز المكتوبة لاحقًا عند تساوي القوة:

سنفصّل قواعد «من يفوز» في الدرس التالي.

الأسئلة الشائعة

الخلاصة

• CSS تحدد شكل الصفحة: محدد ثم خاصية وقيمة.
• الملف الخارجي style.css هو الطريقة الصحيحة للمواقع.
• عند التعارض بقوة متساوية، تفوز القاعدة الأخيرة.