مقدمة عن CSS (Cascading Style Sheets) أو ما يُعرف بـ "أوراق الأنماط المتتالية":

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

لماذا نستخدم CSS؟

  • فصل المحتوى عن التصميم: قبل CSS، كان يتم تضمين تنسيقات التصميم داخل كود HTML نفسه، مما يجعل الكود مُعقدًا وصعب الصيانة. CSS فصلت التصميم عن المحتوى، مما سهّل عملية التعديل والتحديث.
  • توحيد التصميم: يُمكن استخدام ملف CSS واحد لتصميم جميع صفحات موقع ويب، مما يضمن مظهرًا مُوحّدًا وسهولة التعديل على التصميم في مكان واحد.
  • تحسين تجربة المستخدم: تُساعد CSS في إنشاء صفحات ويب جذابة وسهلة الاستخدام، مما يُحسن تجربة المستخدم.
  • التوافق مع الأجهزة المختلفة: تُمكن CSS من تصميم صفحات ويب تتكيف مع أحجام الشاشات المختلفة (مثل الهواتف والأجهزة اللوحية والحواسيب)، ما يُعرف بـ "التصميم المتجاوب" (Responsive Design).
  • توفير الوقت والجهد: بدلاً من تكرار أكواد التصميم في كل صفحة HTML، يُمكن كتابة التصميم مرة واحدة في ملف CSS وتطبيقه على جميع الصفحات.

كيف تعمل CSS؟

تعتمد CSS على مفهوم "القواعد" (Rules). كل قاعدة تتكون من جزأين رئيسيين:

  1. المُحدّد (Selector): يُحدد العنصر أو العناصر في HTML التي سيتم تطبيق التصميم عليها (مثل h1 للعناوين الرئيسية، p للفقرات، div لأقسام الصفحة).
  2. التصريح (Declaration): يُحدد الخصائص التي سيتم تغييرها والقيم الجديدة لهذه الخصائص (مثل color: blue; لتغيير لون النص إلى الأزرق، font-size: 16px; لتحديد حجم الخط).

مثال بسيط:

HTML
<!DOCTYPE html>
<html>
<head>
  <title>مثال CSS</title>
  <style>
    h1 {
      color: red;
      text-align: center;
    }
    p {
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>هذا عنوان رئيسي</h1>
  <p>هذه فقرة نصية.</p>
</body>
</html>

في هذا المثال:

  • المُحدّد h1 يُحدد جميع عناصر <h1> في الصفحة.
  • التصريح color: red; يُغيّر لون النص داخل <h1> إلى الأحمر.
  • التصريح text-align: center; يُوسّط النص داخل <h1>.
  • المُحدّد p يُحدد جميع عناصر <p> في الصفحة.
  • التصريح font-size: 14px; يُحدد حجم الخط داخل <p> إلى 14 بكسل.

طرق إضافة CSS إلى HTML:

هناك ثلاث طرق رئيسية لإضافة CSS إلى HTML:

  1. الأنماط المُضمّنة (Inline Styles): كتابة التصميم مباشرةً داخل عنصر HTML باستخدام السمة style. (لا يُفضل استخدامها كثيرًا لأنها تُقلل من إمكانية إعادة استخدام الكود).
  2. الأنماط الداخلية (Internal Styles): كتابة التصميم داخل عنصر <style> في قسم <head> من ملف HTML.
  3. الأنماط الخارجية (External Styles): كتابة التصميم في ملف CSS منفصل (بامتداد .css) ثم ربطه بملف HTML باستخدام العنصر <link>. (هذه هي الطريقة المُفضلة والأكثر استخدامًا).

مُلخص:

CSS هي أداة قوية وضرورية لتصميم صفحات ويب جذابة واحترافية. فهم أساسياتها يُساعد في إنشاء مواقع ويب سهلة الاستخدام ومتوافقة مع مختلف الأجهزة.