لغة CSS: كساء موقعك وتخطيطه

صفحة المشروع التي كتبتها في مقال HTML تعمل، لكنّ كلّ ما تراه فيها من اختيار المتصفّح: خطّه الافتراضيّ، وخلفيّته البيضاء، وروابطه الزرقاء التي تحتها خطّ، والقائمة نقاطٌ في عمود. وفي هذا المقال تكتب لها ملفًّا ثانيًا اسمه style.css، أقلّ من خمسين سطرًا، فيتغيّر مظهر الصفحة كلّها من غير أن تلمس سطرًا واحدًا من HTML.

ستعرف هنا ما لغة CSS ومن أين جاءت، وكيف تُكتب القاعدة، وكيف يختار المتصفّح بين قاعدتين تتعارضان، ثمّ نموذج الصندوق والوحدات وأداتي التخطيط Flexbox وGrid. وستتعلّم أيضًا ما تتركه أكثر الشروح العربيّة: كيف تكتب CSS لصفحةٍ تُقرأ من اليمين، بخصائص لا تعرف اليسار ولا اليمين أصلًا.

ما هي CSS؟

تعرّف موسوعة MDN لغة CSS بأنّها «لغة أوراق أنماط»، وظيفتها أن تصف كيف يعرض المتصفّح عناصر HTML على الشاشة.^[1] فملفّ HTML يقول ما في الصفحة: هذا عنوان، وهذه فقرة، وهذا رابط. وملفّ CSS يقول كيف يبدو كلّ ذلك: بأيّ لون، وبأيّ خطّ، وعلى أيّ بعدٍ من جاره.

والاسم الكامل Cascading Style Sheets، أي أوراق الأنماط الانسيابيّة، فهي «أوراق» لأنّها تُكتب عادةً في ملفّاتٍ مستقلّة بامتداد ‎.css، وهي «أنماط» لأنّها تحمل قرارات المظهر كلّها. أمّا كلمة «الانسيابيّة» فهي قلب اللغة، وستعود إليها في قسمٍ كامل، لأنّها تجيب عن سؤالٍ يواجهك في أوّل يوم: ماذا يحدث حين تقول قاعدتان شيئين مختلفين عن العنصر نفسه؟

وفصل المحتوى عن المظهر هو الفكرة التي تقوم عليها اللغة كلّها. تخيّل موقعًا فيه خمسمئة صفحة، روابطها كلّها زرقاء، وقرّرت أن تجعلها حمراء. إن كان اللون مكتوبًا داخل كلّ صفحة فأمامك خمسمئة ملفّ تعدّلها واحدًا واحدًا، وإن كان في ملفّ CSS واحد تربطه الصفحات كلّها فأمامك سطرٌ واحد. ويستطيع المتصفّح أيضًا أن يحفظ الملفّ المشترك في ذاكرته المؤقّتة بعد أوّل زيارة، فلا ينزّله من جديدٍ مع كلّ صفحةٍ ينتقل إليها الزائر.

من أين جاءت CSS

في سنوات الويب الأولى كان المظهر يُكتب داخل HTML نفسها، بوسومٍ مثل <font> لتغيير الخطّ واللون و<center> لتوسيط النصّ. فكان تغيير لون العناوين في موقعٍ كبير يعني فتح كلّ صفحةٍ فيه، وكانت الشيفرة تخلط المعنى بالزينة في كلّ سطر. واليوم تضع مواصفة HTML هذين الوسمين في قائمة الميزات المتروكة، وتقول إنّ البديل عناصر مناسبة أو CSS.^[2]

وفي 10 تشرين الأوّل 1994 نشر الباحث النرويجيّ هاكون ويوم لي أوّل مسوّدةٍ لما سمّاه «Cascading HTML Style Sheets»، وكان يعمل يومها في مختبر CERN حيث وُلد الويب نفسه. وجاءت المسوّدة قبل ثلاثة أيّامٍ فقط من إعلان Netscape عن أوّل نسخةٍ تجريبيّة من متصفّحها، في زمنٍ كانت الشركات تتسابق فيه إلى وسوم عرضٍ خاصّة بها.^[3][4] وهذه صورته في مؤتمرٍ بعد ذلك بخمسة عشر عامًا.^[5]

وكان من أوّل من ردّ على المسوّدة الهولنديّ بيرت بوس، الذي كان يبني متصفّحًا يدعم أوراق الأنماط، فقرّر أن يضمّ جهده إلى جهد هاكون، وكتبا اللغة معًا.^[3] ونشر اتّحاد W3C توصية CSS1 في 17 كانون الأوّل 1996، ثمّ CSS2 في 12 أيّار 1998، وفيها أدواتٌ أقوى لتحديد مواضع العناصر.^[4]

وبعد ذلك تغيّرت طريقة التطوير نفسها، فبدل إصدارٍ كبير كلّ بضع سنوات، قُسّمت اللغة إلى وحداتٍ مستقلّة، للألوان وحدة، وللخطوط وحدة، وللتخطيط وحدات، ولكلّ وحدةٍ مستواها الذي يتقدّم بسرعته. ولهذا تقرأ في لقطة W3C لسنة 2026، المنشورة في 22 حزيران، جملةً صريحة: لا يوجد CSS Level 4. فالوحدات تبلغ المستوى الرابع وما بعده، أمّا اللغة نفسها فلم تعد لها مستويات.^[6] وحين تقرأ عن «CSS3» فهو اسمٌ يفرّقها عن الإصدارات القديمة لا أكثر.

تشريح القاعدة

تتكوّن CSS من قواعد، وكلّ قاعدةٍ تقول للمتصفّح شيئين: أيّ العناصر تقصد، وماذا تفعل بها. وهذه قاعدةٌ كاملة:

h2 {
  color: navy;
  font-size: 24px;
}

الكلمة الأولى h2 هي المحدِّد، وتعني كلّ عناصر العنوان من المستوى الثاني في الصفحة. وما بين القوسين المعقوفين كتلة التصريحات، وفيها تصريحان، كلّ تصريحٍ خاصّيّةٌ تريد تغييرها ثمّ نقطتان ثمّ القيمة التي تعطيها لها، ثمّ فاصلةٌ منقوطة تُنهيه. فالقاعدة تقول: اجعل لون نصّ كلّ h2 كحليًّا، وحجم خطّه 24 بكسلًا.

شكل 1

وإن نسيت الفاصلة المنقوطة بين تصريحين قرأهما المتصفّح قيمةً واحدة غير مفهومة، فأسقط التصريح الذي يليها بصمت، من غير رسالة خطأ. وهذا من طباع CSS التي تحسن أن تعرفها مبكّرًا: المتصفّح يتجاوز ما لم يفهمه ويكمل، فيبدو لك أنّ القاعدة «لا تعمل»، وهي في الحقيقة مكسورة في موضعٍ واحد.

وتكتب التعليقات بين /* و*/، فيتجاهلها المتصفّح، وتشرح بها أقسام ملفّك أو تعطّل بها تصريحًا مؤقّتًا لتجرّب الصفحة من دونه. وهذه الصيغة وحدها للتعليق في CSS، سطرًا واحدًا كان أو أسطرًا، ولا يدخل تعليقٌ في تعليق، فأوّل */ يُغلق التعليق كلّه.^[7] والصورة التالية القاعدة نفسها مكتوبةً في محرّر VS Code، وبين تصريحاتها تعليقاتٌ تسمّي كلّ جزء.

أين تكتب CSS؟

في الصورة السابقة كُتبت القاعدة داخل وسم <style> في رأس الصفحة، وهذه واحدةٌ من ثلاث طرق. والطريقة التي تعتمدها في كلّ مشروعٍ حقيقيّ هي الملفّ الخارجيّ: تكتب القواعد كلّها في ملفٍّ مثل style.css، وتربطه بالصفحة بسطرٍ واحد داخل head:

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

بهذا السطر تحصل على كلّ ما سبق: ملفٌّ واحد تربطه صفحاتك كلّها، ويحفظه المتصفّح بعد أوّل زيارة، ويبقى فيه المظهر منفصلًا عن المحتوى. أمّا وسم style الداخليّ فيفيد في صفحةٍ وحيدة أو في تجربةٍ سريعة، لأنّ قواعده لا تتجاوز الصفحة التي كُتب فيها.

والطريقة الثالثة هي السمة style على العنصر نفسه، مثل <p style="color: red;">. وأنصحك بتجنّبها إلّا لسببٍ واضح، فهي تعيدك إلى خلط المظهر بالمحتوى، وهي أقوى من أيّ محدِّد تكتبه في ملفّك، فلا يغلبها إلّا تصريحٌ عليه الوسم !important.^[8] وستفهم لماذا يسبّب هذا الصداع حين تصل إلى الخصوصيّة بعد قليل.

المحدِّدات: كيف تصل إلى العنصر

أبسط المحدِّدات اسم الوسم، فـp يصيب كلّ فقرات الصفحة. وأدقّ منه محدِّد الصنف، نقطةٌ يليها اسم صنفٍ وضعته في سمة class، مثل .note، فيصيب كلّ عنصرٍ يحمل هذا الصنف أيًّا كان وسمه. ثمّ محدِّد المعرّف، علامة # يليها قيمة سمة id، مثل #logo، ويصيب عنصرًا واحدًا فقط، لأنّ المعرّف لا يتكرّر في الصفحة.

وتستطيع أن تجمع المحدِّدات. فمسافةٌ بين اسمين، مثل nav a، تعني الروابط التي داخل شريط التنقّل وحدها، وتترك روابط المقالة على حالها. وفاصلةٌ بين أسماء، مثل h1, h2, h3، تطبّق القاعدة نفسها على الثلاثة معًا، فلا تكرّرها ثلاث مرّات.

وللعنصر أيضًا حالاتٌ تتغيّر وأنت تستعمل الصفحة، وتصل إليها بالأصناف الزائفة، وهي كلمةٌ تسبقها نقطتان. أشهرها :hover، وتعمل حين يمرّ مؤشّر الفأرة فوق العنصر. والمقطع التالي صندوقٌ يتحوّل إلى الأحمر حين يمرّ المؤشّر فوقه، بقاعدة .box:hover وحدها، من غير أيّ سطر JavaScript.

وفي آخر المقطع قاعدةٌ تبدأ بـ@media (min-width: 768px)، وهي استعلام وسائط يغيّر المظهر حين تتّسع الشاشة، ومكان شرحه المقال التالي. لكن انتبه إلى حدود ‎:hover. فالهاتف لا مؤشّر فيه يمرّ فوق شيء، وتقول MDN صراحةً إنّ هذه الحالة إشكاليّة على الشاشات اللمسيّة، فلا تخبّئ معلومةً أو زرًّا لا يظهر إلّا عند التمرير.^[9]

والحالة الأهمّ لمن يتنقّل بلوحة المفاتيح هي :focus، وتعمل حين يقف التركيز على رابطٍ أو حقل. ويرسم المتصفّح حول العنصر المركَّز إطارًا يدلّ عليه، وكثيرٌ من المبتدئين يحذفونه لأنّه لا يعجبهم. وتحذّر MDN من ذلك بوضوح: لا تحذف مؤشّر التركيز أبدًا من غير أن تضع بديلًا واضحًا يستوفي معايير الوصول.^[9] وإن أردت أن يظهر المؤشّر لمستخدم لوحة المفاتيح وحده، فاستعمل :focus-visible، وهي مدعومةٌ في المتصفّحات الحديثة على نطاقٍ واسع.

حين تتعارض قاعدتان

في ملفٍّ صغير لا تتعارض القواعد كثيرًا، لكنّ الملفّ يكبر، وتأتي يومًا قاعدةٌ تجعل الفقرة زرقاء وأخرى تجعلها خضراء. هنا يعمل الانسياب، وهو الترتيب الذي يحسم به المتصفّح التعارض. وأوّل ما ينظر إليه الخصوصيّة، أي مدى دقّة المحدِّد في وصف العنصر: فالمحدِّد الأدقّ يفوز، وإن تساوت الدقّة فالقاعدة المكتوبة أخيرًا في الملفّ تفوز.

وتصف MDN الخصوصيّة بثلاثة أعمدة، تكتبها بالترتيب ID-CLASS-TYPE. في العمود الأوّل عدد محدِّدات المعرّف، وفي الثاني عدد الأصناف والأصناف الزائفة والسمات، وفي الثالث عدد أسماء الوسوم.^[8] فـp وحده قيمته 0-0-1، و.highlight قيمته 0-1-0، و#special قيمته 1-0-0.

وفي تعليقات الصورة حسابٌ شائع في الدروس: الوسم بنقطة، والصنف بعشر، والمعرّف بمئة. وهو يصحّ في هذا المثال، لكنّه يخطئ عند أوّل حالةٍ كبيرة. فبحسابه تغلب أحد عشر صنفًا معرّفًا واحدًا، مئةً وعشرة مقابل مئة. أمّا المتصفّح فيقارن الأعمدة من اليسار إلى اليمين، ولا ينظر إلى العمود الثاني إلّا إذا تساوى الأوّل، فيفوز المعرّف الواحد مهما كثرت الأصناف.^[8] وفوق هذه الأعمدة كلّها السمة style، كما رأيت في الفقرة الحمراء.

والمبدأ الثاني الذي يكمل الصورة هو الوراثة. فبعض الخصائص تنتقل من العنصر إلى ما بداخله تلقائيًّا، ومثالها الأوضح color: تضعه على body فترثه كلّ فقرةٍ وعنوانٍ في الصفحة، ما لم تكتب له قاعدةٌ أخصّ. وخصائص أخرى لا تُورَّث، مثل الحدود والهوامش، وإلّا لورث كلّ عنصرٍ إطار أبيه.^[10] ولهذا تضبط الخطّ واللون مرّةً واحدة في الأعلى.

وحين تكتب قاعدةً ولا ترى أثرها، فلا تخمّن. افتح أدوات المطوّر التي تعرّفت إليها في مقال المتصفّح، وانقر العنصر بالزرّ الأيمن واختر «فحص»، فترى كلّ القواعد التي تصيبه، والقاعدة الخاسرة منها مشطوبٌ عليها بخطّ. وتستطيع أن تعدّل القيم هناك مباشرةً وترى النتيجة قبل أن تكتبها في ملفّك.

نموذج الصندوق

يعامل المتصفّح كلّ عنصرٍ في الصفحة صندوقًا مستطيلًا، عنوانًا كان أو فقرةً أو صورة. وفي الصندوق أربع طبقات من الداخل إلى الخارج. أوّلها المحتوى نفسه، ثمّ الحشوة padding، وهي فراغٌ بين المحتوى وإطاره، ثمّ الحدّ border وهو الإطار. وآخرها الهامش margin، وهو فراغٌ خارج الإطار يبعد العنصر عن جيرانه.

وهنا فخٌّ يقع فيه كلّ مبتدئ. فحين تكتب width: 300px لصندوقٍ فيه حشوةٌ عشرون بكسلًا وحدٌّ بكسلان، يصير عرضه على الشاشة 344 بكسلًا، لأنّ القيمة الافتراضيّة للخاصّيّة box-sizing هي content-box، والعرض فيها للمحتوى وحده. وإن كتبت box-sizing: border-box دخلت الحشوة والحدّ في العرض الذي كتبته، وبقي الهامش خارجه،^[11] ولهذا يبدأ كثيرٌ من المطوّرين ملفّاتهم بقاعدةٍ صغيرة تجعل border-box لكلّ العناصر.

الوحدات والألوان

كلّ قيمةٍ مقاسيّة تحتاج وحدة. والبكسل px وحدةٌ مطلقة، فـ16px تبقى 16px مهما تغيّر ما حولها. أمّا rem فوحدةٌ نسبيّة إلى حجم خطّ العنصر الجذر، أي html.^[12] فإن كبّر الزائر الخطّ الافتراضيّ في متصفّحه لأنّ نظره يحتاج ذلك، كبرت معه كلّ القيم المكتوبة بـrem، وبقيت المكتوبة بالبكسل على حالها. ولهذا اكتب أحجام الخطوط والمسافات بـrem، واترك البكسل للحدود الرفيعة.

وبينهما وحداتٌ أخرى تلتقيها كثيرًا: النسبة المئويّة، وهي من حجم العنصر الأب، وvw وvh، وهما جزءٌ من مئة من عرض النافذة وارتفاعها. ولكلّ وحدةٍ موضعها، والخطأ الشائع أن تكتب كلّ شيءٍ بالبكسل لأنّه أوّل ما تعلّمته، ثمّ تكتشف أنّ صفحتك لا تتّسع ولا تضيق كما تريد.

وللون طرقٌ كثيرة في الكتابة، كلّها تصف الشيء نفسه. أبسطها الأسماء الجاهزة مثل navy وred، وأشيعها الترميز الستّ عشريّ مثل #aa4b3b. ثمّ الدالّة rgb() التي تمزج الأحمر والأخضر والأزرق، والدالّة hsl() التي تصف اللون بدرجته وتشبّعه وإضاءته، فيسهل بها تفتيح اللون أو تغميقه برقمٍ واحد.

وحين يتكرّر لونٌ في ملفّك عشر مرّات، فاكتبه مرّةً واحدة في خاصّيّةٍ مخصّصة، تعرّفها باسمٍ يبدأ بشرطتين داخل :root وتقرؤها في أيّ مكانٍ بالدالّة var().^[13] وهذا ما يفعله مشروع هذا المقال في أوّل سطوره:

:root {
  --accent: #aa4b3b;
}

nav a {
  color: var(--accent);
}

فإن قرّرت غدًا لونًا آخر، غيّرت سطرًا واحدًا في :root، وتغيّر اللون في كلّ موضعٍ يقرؤه.

التخطيط: Flexbox وGrid

ترتيب العناصر جنبًا إلى جنب كان سنواتٍ أصعب ما في CSS، واستعمل المطوّرون له حيلًا لم تُصمَّم لهذا الغرض، مثل تعويم العناصر بخاصّيّة float، بل وجداول HTML أحيانًا. ثمّ جاءت أداتان صُمّمتا للتخطيط فعلًا، وهما اليوم أساس كلّ تخطيطٍ تراه على الويب تقريبًا.

الأولى Flexbox، وتفرّق MDN بينها وبين الثانية بجملةٍ واحدة: صُمّمت Flexbox للتخطيط في بُعدٍ واحد، صفًّا أو عمودًا، وصُمّم Grid للصفوف والأعمدة معًا.^[14] تكتب display: flex على العنصر الحاوي، فيصفّ أبناءه في سطرٍ واحد، وتوزّع المسافة بينهم بخاصّيّة gap، وتحاذيهم بخاصّيّتين أو ثلاث. وهي الأداة الطبيعيّة لشريط تنقّل، أو لصفّ بطاقات، أو لتوسيط عنصرٍ في مساحته.

وفي هذا خبرٌ جيّد لمن يكتب بالعربيّة. فالصفّ في Flexbox يجري في اتّجاه السطر، وتقول MDN إنّ بداية المحور الرئيس في العربيّة على اليمين ونهايته على اليسار.^[15] فإن أعلنت صفحتك dir="rtl" كما فعلت في مقال HTML، وقف العنصر الأوّل على اليمين من تلقاء نفسه.

شكل 2

والثانية Grid، وتكتبها display: grid، ثمّ ترسم بها شبكةً من صفوفٍ وأعمدة وتضع كلّ عنصرٍ في خانته. وهي الأداة الطبيعيّة لهيكل الصفحة كلّه، ترويسةً ومحتوًى وشريطًا جانبيًّا وتذييلًا، ولمعارض الصور. والقاعدة العمليّة في الاختيار بينهما بسيطة: إن كنت ترتّب في اتّجاهٍ واحد فابدأ بـFlexbox، وإن احتجت الصفوف والأعمدة معًا فابدأ بـGrid.

وإلى جانبهما خاصّيّة position، وتُخرج العنصر من مجراه الطبيعيّ. فالقيمة relative تزيحه قليلًا عن مكانه، وabsolute تضعه بدقّةٍ داخل أقرب أبٍ محدَّد الموضع. أمّا fixed فتثبّته بالنسبة إلى النافذة، فيبقى مكانه وأنت تمرّر الصفحة، وsticky تجعله يلتصق عند نقطةٍ معيّنة أثناء التمرير، ولا تحتاجها كلّها الآن، فأكثر التخطيط اليوم يُبنى بالأداتين السابقتين.

الخصائص المنطقيّة: CSS لصفحةٍ عربيّة

أكثر دروس CSS مكتوبةٌ لصفحاتٍ إنكليزيّة، فتعلّمك margin-left وpadding-right وborder-left. وهذه خصائص فيزيائيّة، تعني اليسار واليمين على الشاشة مهما كانت لغة الصفحة. فإن كتبت border-left لتزيّن بداية اقتباسٍ في صفحةٍ عربيّة، ظهر الخطّ في آخر النصّ لا في أوّله.

والحلّ في وحدة الخصائص المنطقيّة، وتعرّفها MDN بأنّها خصائص تتبع اتّجاه الكتابة بدل الاتّجاه الفيزيائيّ، فيظهر المحتوى المترجم إلى لغةٍ أخرى كما يجب.^[16] فبدل اليسار واليمين تقول البداية والنهاية: inline-start هي حيث يبدأ السطر، أي اليمين في العربيّة واليسار في الإنكليزيّة، وblock-start هي أعلى الكتلة.

فيصير margin-left في صفحتك margin-inline-end، ويصير padding-right ‏padding-inline-start، ويصير margin-top ‏margin-block-start. ولمحاذاة النصّ اكتب text-align: start بدل left أو right. وهذه ميزةٌ مستقرّة منذ سنوات، فخاصّيّة margin-inline-start مثلًا متاحةٌ في المتصفّحات كلّها منذ كانون الثاني 2020.^[17]

وتعرف كم تكلّف الخصائص الفيزيائيّة من إطار Bootstrap نفسه. ففي الإصدار 5.3 يوزّع ملفًّا كاملًا منفصلًا للصفحات العربيّة وأمثالها، اسمه bootstrap.rtl.min.css، يولّده بأداةٍ اسمها RTLCSS تقلب كلّ يسارٍ إلى يمين، ويشترط dir="rtl" على وسم html. وأعاد الإطار تسمية أصنافه الاتّجاهيّة إلى start وend، أي إلى المنطق نفسه، فإن كتبت ملفّك منطقيًّا من أوّل سطر لم تحتج إلى نسخةٍ ثانية منه أبدًا.^[18]

لغة CSS في 2026

كثيرٌ ممّا كان يحتاج أدواتٍ خارجيّة صار في CSS نفسها، وصار متاحًا في المتصفّحات كلّها بحسب تصنيف Baseline في MDN.^[19] فالتداخل، أي أن تكتب قاعدةً داخل قاعدة بالرمز &، متاحٌ منذ كانون الأوّل 2023. والمحدِّد :has()، الذي يصيب العنصر بحسب ما فيه، مثل article:has(img) لكلّ مقالةٍ فيها صورة، متاحٌ منذ الشهر نفسه.

واستعلامات الحاوية @container، التي تغيّر مظهر المكوّن بحسب عرض المساحة التي وُضع فيها لا عرض الشاشة، متاحةٌ منذ شباط 2023. والطبقات @layer، التي تنظّم ترتيب الانسياب بين ملفّاتك وملفّات المكتبات، متاحةٌ منذ آذار 2022. لا تحتاج شيئًا من هذا في صفحتك الأولى، لكنّك ستقرؤه في كلّ شيفرةٍ حديثة، فاعرف أسماءه.

ولهذا ضعفت حاجة المشروعات الصغيرة إلى المعالجات المسبقة مثل Sass، وهي لغةٌ تُترجم إلى CSS عاديّة، اشتهرت لأنّها قدّمت المتغيّرات والتداخل قبل أن تصل إلى CSS. وستلتقي أيضًا أطر العمل، مثل Bootstrap الذي يعطيك مكوّناتٍ جاهزة كالأزرار والقوائم، وTailwind الذي يعطيك أصنافًا صغيرة تركّب بها تصميمك داخل HTML. تعلّم CSS نفسها أوّلًا، فكلّ إطارٍ مكتوبٌ بها.

التطبيق: كسوة صفحة المشروع

افتح مجلّد my-first-site الذي فيه index.html، وأنشئ بجانبه ملفًّا اسمه style.css. ثمّ أضف سطر الربط داخل head في index.html، تحت سطر العنوان مباشرةً، والصق في style.css هذه القواعد:

:root {
  --ink: #1a1a1a;
  --paper: #f5f1e8;
  --accent: #aa4b3b;
}

body {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: 1.5rem;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
}

header {
  border-block-end: 2px solid var(--accent);
  margin-block-end: 2rem;
}

nav ul {
  display: flex;
  gap: 1.5rem;
  padding: 0;
  list-style: none;
}

nav a {
  color: var(--accent);
  font-weight: 600;
}

nav a:hover,
nav a:focus-visible {
  text-decoration: none;
}

footer {
  margin-block-start: 3rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid #ccc;
  font-size: 0.875rem;
}

القسم الأوّل يعرّف ثلاثة ألوان في :root، ثمّ تقرؤها بقيّة القواعد. وقاعدة body تحدّ عرض المحتوى بـ46rem، أي عمودًا مريحًا للقراءة، وتوسّطه بـmargin-inline: auto، وتضع الخطّ واللون والخلفيّة مرّةً واحدة فترثها الصفحة كلّها.

وقاعدة nav ul هي Flexbox في أبسط صوره: تصفّ روابط القائمة في سطرٍ واحد بفراغٍ ثابت بينها، وتحذف نقاط القائمة. وقاعدة الروابط تلوّنها بلون الموقع، وتزيل خطّها السفليّ عند التمرير وعند تركيز لوحة المفاتيح معًا، فلا يحصل مستخدم الفأرة على شيءٍ يُحرم منه غيره. واحفظ الملفّين ثمّ حدّث الصفحة في المتصفّح.

وابحث في الملفّ عن كلمة left أو right، فلن تجدها. فكلّ مسافةٍ وكلّ حدٍّ فيه منطقيّ، ولذلك تقف الروابط من اليمين، ويقع خطّ الترويسة تحتها، والتذييل في مكانه. ولو ترجمت الصفحة غدًا إلى الإنكليزيّة وغيّرت dir وحده، انقلب التخطيط كلّه صحيحًا من غير أن تلمس هذا الملفّ.

وفي مقال JavaScript ستضيف إلى الصفحة زرًّا يضع صنفًا على body أو يزيله، فيتغيّر مظهرها كلّه بقاعدةٍ جاهزة في هذا الملفّ. فالشيفرة تبدّل الأصناف وحدها، والقواعد التي تغيّر المظهر مكتوبةٌ مسبقًا في ملفّ CSS.

خلاصة عمليّة

اكتب CSS في ملفٍّ خارجيّ تربطه بسطر link، واترك السمة style للضرورة. ابدأ بمحدِّدات الوسوم والأصناف، واحفظ المعرّف لعنصرٍ لا يتكرّر، وتذكّر أنّ الخصوصيّة أعمدةٌ تُقارن بالترتيب لا نقاطٌ تُجمع. ضع الخطّ واللون على body ودعهما يُورَّثان، واستعمل border-box وrem، ورتّب في اتّجاهٍ واحد بـFlexbox وفي اتّجاهين بـGrid. ولصفحةٍ عربيّة اكتب البداية والنهاية بدل اليسار واليمين، ولا تحذف مؤشّر التركيز من غير بديل.

وصفحتك الآن مكسوّة، لكنّها صُمّمت على شاشةٍ واحدة. افتحها على هاتفك وسترى ما بقي من العمل، وهو موضوع مقال التصميم المتجاوب.

المصادر

1. موسوعة MDN، «What is CSS?»: CSS لغة أوراق أنماط تحدّد مظهر المستندات، وتصف كيف يعرض المتصفّح عناصر HTML.
2. مجموعة WHATWG، «HTML Living Standard: Obsolete features»: الوسوم basefont وbig وblink وcenter وfont وmarquee وغيرها متروكة، والبديل عناصر مناسبة أو CSS.
3. هاكون ويوم لي وبيرت بوس، «The CSS saga»، الفصل 20 من كتاب Cascading Style Sheets, designing for the Web (الطبعة الثانية، 1999)، على موقع W3C: المسوّدة الأولى «Cascading HTML Style Sheets» قبل إعلان Netscape عن متصفّحها بثلاثة أيّام، وعمل أحد المؤلّفَين في CERN، وانضمام بيرت بوس بعد ردّه على المسوّدة.
4. اتّحاد W3C، «CSS 20 years»: رسالة هاكون إلى قائمة www-talk في 10 تشرين الأوّل 1994، وتوصية CSS1 في 17 كانون الأوّل 1996، وتوصية CSS2 في 12 أيّار 1998.
5. صورة «Håkon Wium Lie 2009» لمارتن بيكيلوند (Friprog)، برخصة CC BY-SA 2.0، وشعار CSS على غلاف المقال من مشروع CSS-Next برخصة CC0.
6. اتّحاد W3C، «CSS Snapshot 2026»، مذكّرة مجموعة العمل في 22 حزيران 2026: لا يوجد CSS Level 4، فالوحدات المستقلّة تبلغ المستوى 4 وما بعده، أمّا اللغة نفسها فلم تعد لها مستويات.
7. موسوعة MDN، «Comments»: الصيغة ‎/* */‎ للتعليق في سطرٍ واحد وفي أسطر، ولا طريقة غيرها في أوراق الأنماط الخارجيّة، ولا تتداخل التعليقات.
8. موسوعة MDN، «Specificity»: الخصوصيّة قيمةٌ من ثلاثة أعمدة ID-CLASS-TYPE تُقارن من اليسار إلى اليمين، والنمط السطريّ أقوى منها كلّها، ولا يغلبه إلّا ‎!important.
9. موسوعة MDN، «:hover» و«:focus» و«:focus-visible»: ‎:hover إشكاليّ على الشاشات اللمسيّة، ولا تحذف مؤشّر التركيز من غير بديلٍ يستوفي WCAG، و‎:focus-visible مدعومٌ على نطاقٍ واسع.
10. موسوعة MDN، «Inheritance»: الخصائص الموروثة تأخذ قيمة العنصر الأب، ومثالها color، وغير الموروثة تبدأ من قيمتها الأولى.
11. موسوعة MDN، «box-sizing»: القيمة الافتراضيّة content-box، ومع border-box يدخل في العرض والارتفاع المحتوى والحشوة والحدّ، ولا يدخل الهامش.
12. موسوعة MDN، «CSS values and units»: rem نسبةٌ إلى حجم خطّ العنصر الجذر، والبكسل وحدةٌ مطلقة.
13. موسوعة MDN، «Using CSS custom properties (variables)»: تعريف الخاصّيّة المخصّصة بشرطتين وقراءتها بالدالّة var().
14. موسوعة MDN، «Relationship of grid layout to other layout methods»: صُمّم Flexbox للتخطيط في بُعدٍ واحد، صفًّا أو عمودًا، وصُمّم Grid للصفوف والأعمدة معًا.
15. موسوعة MDN، «Basic concepts of flexbox»: المحور الرئيس للصفّ يجري في اتّجاه السطر، وفي العربيّة تكون بدايته على اليمين ونهايته على اليسار.
16. موسوعة MDN، «CSS logical properties and values»: خصائص تتبع اتّجاه الكتابة بدل الاتّجاه الفيزيائيّ، فيظهر المحتوى المترجم إلى لغةٍ أخرى كما يجب.
17. موسوعة MDN، «margin-inline-start»: متاحةٌ في المتصفّحات كلّها منذ كانون الثاني 2020.
18. إطار Bootstrap، «RTL»، الإصدار 5.3: ملفٌّ منفصل هو bootstrap.rtl.min.css مبنيٌّ بمشروع RTLCSS، مع dir="rtl" على وسم html، وأصنافٌ اتّجاهيّة أُعيدت تسميتها إلى start وend.
19. موسوعة MDN، «& nesting selector» و«:has()» (متاحان منذ كانون الأوّل 2023)، و«@container» (منذ شباط 2023)، و«@layer» (منذ آذار 2022)، كلّها بتصنيف Baseline Widely available.