تعلم CSS للمستوى مبتدئ - الدرس 1: مقدمة إلى CSS وبنيتها الأساسية

مرحباً بك في أولى خطواتك نحو عالم تصميم وتنسيق صفحات الويب. إذا كان لغة HTML تمثل الهيكل العظمي للموقع، فإن CSS هي الروح والمظهر الجمالي؛ هي المسؤولة عن الألوان، والخطوط، والمسافات، وتخطيط الصفحة بالكامل.

في هذا الدرس، سنركز بعمق على فهم ماهية CSS وكيفية كتابة أول سطر برمجي بها بشكل صحيح واحترافي.

المفهوم الأول: ما هي لغة CSS وكيف تعمل؟

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

تشريح قاعدة CSS (CSS Rule Syntax)

تتكون أي قاعدة CSS نكتبها من أجزاء رئيسية محددة يجب حفظها وفهمها:

المُحدِّد (Selector): يشير إلى عنصر الـ HTML الذي نريد استهدافه وتغيير شكله (مثل: فقرة، عنوان، زر).
كتلة التصريح (Declaration Block): تبدأ بقوس معقوف { وتنتهي بـ }، وتضم بداخلها الخصائص والقيم.
الخاصية (Property): السمة التي نريد تعديلها (مثل: لون النص، حجم الخط، لون الخلفية).
القيمة (Value): الإعداد الجديد الذي نريد تطبيقه على الخاصية، متبوعاً دائماً بفاصلة منقوطة ;.

دعنا نرى مثالاً عملياً بسيطاً لتغيير لون وحجم فقرة نصية:

p {
    color: red;
    font-size: 18px;
}

في الكود السابق: استهدفنا وسم الفقرة (p)، وجعلنا لون الخط أحمر (color: red;) وحجمه 18 بكسل (font-size: 18px;).

المفهوم الثاني: طرق ربط كود CSS بصفحة HTML

لكي يتعرف المتصفح على تنسيقات CSS التي كتبتها ويطبقها على صفحة الـ HTML، توجد ثلاث طرق رئيسية:

1. الطريقة الخارجية (External CSS) - الأفضل والأكثر استخداماً

في هذه الطريقة، نقوم بإنشاء ملف منفصل تماماً ينتهي بصيغة .css (مثلاً: style.css)، ثم نقوم بربطه داخل قسم <head> في ملف الـ HTML باستخدام الوسم <link>.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>درس CSS الأول</title>
    <!-- ربط ملف CSS الخارجي -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>أهلاً بك في عالم الويب</h1>
    <p>هذا النص يتم تنسيقه عبر ملف خارجي.</p>
</body>
</html>

2. الطريقة الداخلية (Internal CSS)

تستخدم عندما نريد كتابة تنسيقات خاصة بصفحة واحدة فقط، حيث نضع كود CSS داخل وسم <style> في رأس الصفحة <head>:

<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>

3. الطريقة المضمنة (Inline CSS)

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

<p style="color: blue; font-weight: bold;">هذا نص أزرق وغامق.</p>

تطبيق عملي خطوة بخطوة

قم بإنشاء ملفين في نفس المجلد:

ملف باسم index.html
ملف باسم style.css

محتوى ملف index.html:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>تطبيقي الأول</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>عنوان المقال التجريبي</h1>
    <p>تعلم CSS ممتع وسهل للغاية عند التطبيق المستمر.</p>
</body>
</html>

محتوى ملف style.css:

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

h1 {
    color: #2c3e50;
}

p {
    color: #555555;
    font-size: 16px;
}

افتح ملف index.html في أي متصفح لديك (Chrome أو Firefox)، وستلاحظ تحول الصفحة من مظهر أبيض وأسود بسيط إلى صفحة منسقة بالخلفية والألوان التي حددتها.

مراجع مفيدة للمتابعة والتعمق

للتعرف على تفاصيل أوسع ومطالعة الخصائص الأساسية، ننصح بزيارة توثيق CSS الرسمي على شبكة مطوري موزيلا (MDN).

تمرين الدرس الأول

للتأكد من استيعابك للمفهومين المشروحين:

أنشئ صفحة HTML تحتوي على عنوان <h2> وفقرتين <p>.
أنشئ ملف CSS خارجي، واجعل خلفية الصفحة باللون الرمادي الفاتح (#eee).
غيّر لون العنوان إلى الأزرق ولون الفقرات إلى الرمادي الداكن.

في الدرس القادم، سنتعرف بالتفصيل على المُحدِّدات (Selectors) وكيف نستهدف عناصر محددة دون غيرها باستخدام الـ Class والـ ID.