دليل CSS للمبتدئين: أساسيات تنسيق مواقع الويب

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

ما هي CSS؟ ولماذا هي مهمة؟

CSS هي اختصار لـ (Cascading Style Sheets) أو "أوراق الأنماط المتتالية"، وهي لغة توصيف تُستخدم لوصف كيفية عرض عناصر HTML على الشاشة. ببساطة، هي تقوم بفصل محتوى الصفحة (الذي تكتبه بـ HTML) عن شكلها وتصميمها.

تخيل أن لديك مستنداً في برنامج Word: HTML هو النص الذي تكتبه، بينما CSS هي كل التنسيقات التي تطبقها عليه مثل حجم الخط، ونوعه، ولونه، والمسافات بين السطور، وألوان الخلفية، والجداول، وغيرها.

كيف تعمل CSS مع HTML؟

لتطبيق التنسيقات، هناك ثلاث طرق أساسية يمكن من خلالها إضافة CSS إلى مستند HTML:

الطريقة الأولى: ملف CSS خارجي (External Stylesheet) - الأفضل دائماً

يتم كتابة كل قواعد التنسيق في ملف منفصل بامتداد .css، ثم يتم ربط هذا الملف بصفحة HTML باستخدام عنصر داخل قسم .

الطريقة الثانية: تنسيق داخلي (Internal Stylesheet)

يتم كتابة التنسيقات داخل صفحة HTML نفسها، ولكن ضمن عنصر

الطريقة الثالثة: التنسيق المباشر (Inline Styles) - غير مستحسن

يتم إضافة التنسيقات مباشرة إلى وسم HTML عبر الخاصية style.

هذا النص أحمر وغامق.

بناء جملة CSS الأساسي (قواعد التنسيق)

تتكون قواعد CSS من جزأين رئيسيين: المُحدد (Selector) و كتلة التصريحات (Declaration Block).

h1 {
  color: blue;
  font-size: 24px;
}

نموذج الصندوق (The Box Model)

كل عنصر في صفحة الويب يُعامل كصندوق مستطيل يتكون من أربع طبقات متداخلة: المحتوى (Content)، الحشوة (Padding)، الحد (Border)، والهامش الخارجي (Margin).