🌟 CSS: السحر الذي يحول صفحتك HTML إلى تصميم رائع!

مرحباً بك في عالم CSS! إذا كنت قد تعلمت HTML، فأنت الآن تعرف كيفية بناء هيكل الصفحة، مثل بناء الهيكل العظمي للمنزل. لكن كيف نجعل هذا الهيكل جميلاً وجذاباً؟ هنا يأتي دور CSS، وهي اللغة المسؤولة عن التنسيق والتزيين. تخيل أن CSS هي الطلاء، والديكور، والأثاث الذي يحول منزلك إلى مكان جميل للعيش فيه! 🎨

في هذا الدرس، سنتعلم معاً الخطوات الأولى لاستخدام CSS لتغيير مظهر نصوصك، ألوانك، وترتيب عناصر صفحتك ببساطة وسهولة.

ما هي CSS؟ 🤔

CSS هي اختصار لـ Cascading Style Sheets، أو "صفحات الطرز المتراصة". ببساطة شديدة، هي لغة تُخبر المتصفح كيف يجب أن تبدو عناصر HTML. بدون CSS، ستظهر جميع مواقع الويب كنص عادي على خلفية بيضاء، أشبه بصفحة ورد! CSS هي التي تضيف الألوان، تغير حجم الخطوط، تنظم العناصر بجانب بعضها، وتجعل الويب مكاناً مرئياً جميلاً.

الفكرة الأساسية: HTML للهيكل والمحتوى، CSS للمظهر والتنسيق.

كيفية إضافة CSS إلى صفحة HTML

هناك ثلاث طرق رئيسية لإضافة CSS إلى مستند HTML الخاص بك. سنركز على الطريقة الأبسط والأكثر شيوعاً للمبتدئين.

1. CSS المضمن (Inline CSS) - (ليس موصى به للاستخدام الدائم)

هنا تضيف التنسيق مباشرة داخل وسم HTML نفسه باستخدام السمة style. هذه الطريقة سريعة للتجربة ولكنها غير منظمة إذا كان لديك الكثير من التنسيقات.

<h1 style="color: blue;">مرحباً بالعالم!</h1>
<p style="font-size: 20px;">هذه فقرة بحجم خط كبير.</p>

في المثال أعلاه، قمنا بتغيير لون العنوان إلى أزرق وحجم خط الفقرة إلى 20 بكسل.

2. CSS الداخلي (Internal CSS) - (مثالي للمشاريع الصغيرة)

هنا نضع جميع قواعد التنسيق داخل وسم <style> في قسم <head> في مستند HTML. هذه الطريقة منظمة وجيدة عندما يكون لديك صفحة واحدة فقط لتنسيقها.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
        p {
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>عنوان أخضر</h1>
    <p>هذه فقرة متمركزة وبحجم خط 18px.</p>
</body>
</html>

3. CSS الخارجي (External CSS) - (الأفضل والأكثر احترافية)

هنا ننشئ ملفاً منفصلاً بامتداد .css (مثل style.css) ونربطه بصفحة HTML. هذه هي الطريقة المثالية لأنها تسمح لك بتنسيق العديد من الصفحات باستخدام ملف واحد.

الخطوة 1: أنشئ ملفاً باسم styles.css

/* هذا ملف CSS خارجي */
body {
    background-color: lightgray;
}
h1 {
    color: red;
    text-align: center;
}

الخطوة 2: أرفق ملف CSS في صفحة HTML باستخدام وسم <link> داخل <head>

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>مرحباً من ملف CSS خارجي!</h1>
    <p>خلفية هذه الصفحة رمادية فاتحة.</p>
</body>
</html>

بناء جملة CSS (Syntax)

لفهم كيفية كتابة CSS، يجب أن تعرف مكوناتها الأساسية. كل كتلة تنسيق تسمى "قاعدة" (Rule).

selector {
    property: value;
}
  • المحدد (Selector): يحدد عنصر HTML الذي نريد تنسيقه (مثل h1، p).
  • الخاصية (Property): هي الصفة التي نريد تغييرها (مثل color، font-size).
  • القيمة (Value): هي الإعداد الذي نعطيه للخاصية (مثل red، 20px).

مثال عملي:

p {
    color: blue;
    font-size: 16px;
    text-align: right;
}

التفسير: هذه القاعدة تخبر المتصفح: "جميع عناصر الفقرة (<p>) يجب أن يكون لون نصها أزرق، بحجم خط 16 بكسل، ومحاذاة لليمين".

أهم خصائص CSS للمبتدئين

لنبدأ ببعض الخصائص البسيطة والشائعة التي يمكنك تجربتها فوراً.

1. تنسيق النص

  • color: لتغيير لون النص. (color: red;)
  • font-size: لتغيير حجم الخط. (font-size: 24px;)
  • text-align: لمحاذاة النص (يمين، يسار، مركز). (text-align: center;)
  • font-family: لتغيير نوع الخط. (font-family: Arial;)

2. تنسيق الخلفية والحواف

  • background-color: لتغيير لون خلفية العنصر. (background-color: yellow;)
  • border: لإضافة حدود حول العنصر. (border: 2px solid black;)

مثال يجمع بين عدة خصائص:

<!DOCTYPE html>
<html>
<head>
    <style>
        .my-box {
            background-color: lightblue;
            color: darkred;
            font-size: 20px;
            border: 3px dashed green;
            text-align: center;
            padding: 20px; /* مسافة داخلية بين النص والحافة */
        }
    </style>
</head>
<body>
    <div class="my-box">
        هذه منطقة مخصصة بتنسيق جميل!
    </div>
</body>
</html>