دليل المبتدئين إلى لغة CSS | كيفية كتابتها وتعلمها واستخدامها

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

ومقال اليوم سيكون كافي لتعلم كافة أساسيات لغة CSS الذي يحتاج إليها المبتدئين، حيث سنقدم دليل خطوة بخطوة يوضح كيفية كتابة لغة CSS، ومكوناتها الرئيسية، وأهم استخداماتها، مع التطبيق العملي.

ما هي لغة CSS ؟

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

تم إصدار النسخة الأولى من لغة CSS عام 1996 م، بهدف التعديل البسيط على تصميم صفحات الويب، وتم تطويرها تدريجيًا حتى إصدار CSS4 عام 2021 م، بخيارات تخصيص أكبر على سبيل المثال إضافة الرسوم المتحركة والانتقالات الديناميكية والتدرجات اللونية وغير ذلك.

وتمتاز لغة CSS بإمكانية تطبيق الخيارات المتعددة على نفس العنصر داخل نفس الدالة، وذلك كما يوحي اسم الأنماط المتتالية، على سبيل المثال إمكانية تخصيص نوع الخط واللون وطريقة العرض والمحاذاة داخل نفس الدالة.

ما هي استخدامات لغة CSS ؟

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

على سبيل المثال، الواجهة الرئيسية لموقع عرب ووردبريس كالتالي:

ستلاحظ أن كافة العناصر مرتبة، ومنسقة، ومتوافقة مع الهوية البصرية من الألوان، والخطوط، والتنسيق العام، وغير ذلك، وذلك بالاعتماد على لغة CSS،  دعنا نجرب إيقاف أكواد CSS من الواجهة الرئيسية، ستكون النتيجة كالآتي:

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

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

الفرق بين HTML و CSS

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

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

والجدير بالذكر فهم أساسيات لغة HTML أمرًا ضروريًا حتى تستطيع تعلم لغة CSS وتطبيق النماذج العملية لها، لذلك يمكنك مراجعة مقال دليل المبتدئين الشامل إلى لغة HTML | كيفية كتابتها وتعلمها واستخدامها

 كيفية كتابة كود CSS

يتكون هيكل أكواد CSS من المحدد Selector والتصريح Declaration الذي يتكون من الخاصية Property والقيمة Value، وذلك طبقًا للنموذج التالي :

1- المحدد Selector 

تبدأ أكواد CSS دائمًا بكتابة المحدد Selector، حيث يشير المحدد إلى الجزء أو العنصر المطلوب تطبيق عليه كود CSS، وتلك الطريقة التي يربط بها المتصفح أكواد CSS مع أكواد HTML، ويظهر العناصر بالتصميم المطلوب.

يمكن أن يتم استخدام المحدد لاستهداف عنصر واحد داخل صفحة الويب، على سبيل المثال فقرة  <p>، أو عنوان <h1>، أو قسم <div>، أو غير ذلك، على سبيل المثال تخصيص لون عنوان كما موضح في الصورة التالية:

وكذلك يمكن استهداف مجموعة من العناصر بالاعتماد على المعرف id أو سمة الفئة class مباشرًا، حيث يتم تحديد المعرف عن طريق كتابة نقطة “.” ثم اسم المعرف، أما في حالة استهداف فئة يتم كتابة رمز الشباك “#” ثم سمة الفئة، وذلك كما موضح في الصورة التالية:

كما يمكنك استهداف عنصر فرعي داخل قسم، وذلك عن طريق تحديد القسم div، ثم تحديد العنصر المطلوب على سبيل المثال فقرة  <p>، أو عنوان <h1>، وذلك كما موضح في الصورة التالية:

ويمكنك تحديد أكثر من معرف على نفس كود CSS، وذلك عن طريق الفصل بينهم باستخدام الفاصلة “,”، على سبيل المثال استهداف فقرة داخل قسم بالإضافة إلى معرف كما موضح في الصورة التالية:

أما في حالة الرغبة في تحديد كافة العناصر في صفحة الويب، يتم كتابة رمز نجمة “*” في بداية كود CSS، وذلك كما موضح في الصورة التالية:

2- التصريح Declaration 

التصريح Declaration يضم خصائص كود CSS، حيث يوضح التعديلات المطلوبة للعناصر، ويكتب مباشرًا بعد تحديد المحدد ويكون داخل علامتي القوس “{ }”، ويتكون التصريح من عنصرين الخاصية Property، والقيمة Value.

ويمكن إضافة أكثر من تصريح متتاليًا بالاعتماد على علامة الفاصلة المنقوطة “;”، ولكن يفضل كتابة كل تصريح في سطر منفصل لسهولة التعامل معها وتخصيصها مستقبلًا، ويجب أن يتم تخصيص التتابع جيدًا حتى لا تتعارض أحد الخصائص مع الآخرى.

3- الخاصية Property

تعد الخاصية Property هي الجزء الأول من معرف التصريح Declaration، وتقوم بتحديد الخصائص المطلوب تعديلها على العنصر المستهدف على سبيل المثال لون العنصر، أو موقعه في صفحة الويب، أو نوع وسمك الخط، أو المحاذاة، أو غير ذلك.

ويتم توضيح الهدف من الخاصية أو النتيجة المطلوبة بواسطة القيمة Value، ويتم الفصل بين الخاصية والقيمة بواسطة نقطتين “:”.

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

4- القيمة Value

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

ويمكن أن تكون القيمة Value كلمات مباشرة على سبيل المثال Red أو Blue، ويمكن أن تكون متغيرات رقمية على سبيل المثال أيضًا #f20404، ويمكن أن تكون متغيرات ثابتة على سبيل المثال rgb(255, 0, 0)، وكافة الأمثلة السابقة تعبر عن نفس درجة اللون الأحمر، وذلك كما موضح في الصورة التالية:

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

ويمكن أن تتوالى قيم الخاصية مباشرًا في نفس الدالة بدون فواصل، على سبيل المثال عند كتابة كود تحديد هامش العناصر، يتم كتابة الأربع قيم تواليًا بداية من أعلى ويمين وأسفل ويسار، وذلك كما موضح في الصورة التالية:

عناصر كود CSS الأساسية

يضم كود CSS مجموعة كبيرة من العناصر تقدم لك خيارات تخصيص متعددة لصفحات الويب، تُعرف كافة تلك العناصر على هيئة خاصية Property ويختلف التعامل مع القيمة Value الخاص بها نسبيًا من عنصر إلى آخر، سنناقش معكم أهم تلك العناصر.

1- درجة اللون 

تستخدم خاصية Color لتحديد درجات لون كافة عناصر صفحة الويب، على سبيل المثال النصوص, الأزرار, أو غير ذلك، ويتم تعريف قيمة اللون بالاعتماد على أكثر من طريقة كالآتي:

• تحديد درجة اللون مباشرًا بالاعتماد على أسماء الألوان، والتي تضم 140 لون، على سبيل المثال Red, Blue.
• تحديد الرقم السداسي HEX المكون من 6 أرقام، وتعد أكثر دقة من تحديد اسم اللون مباشرًا، على سبيل المثال #f20404.
• تحديد درجة الألوان RGB عن طريق تحديد نسبة اللون الأحمر والأخضر والأزرق على سبيل المثال rgb(255, 87, 51)، ويمكن الاعتماد على قيم RGBA حيث يتم إضافة رقم عاشر مفصول يعبر عن درجة الشفافية، 1 يدل على شفافية 100 % و0 يدل على شفافية 0 %.

2- النصوص 

تستخدم خاصية Font للتحكم في خصائص خط العناصر في صفحة الويب، وذلك كالآتي:

• Font-Family لتحديد عائلة الخط المستخدم على سبيل المثال Arial, Helvetica, sans-serif.
• Font–Size لتحديد حجم الخط بوحدة البكسل على سبيل المثال 30px, 24px.
• Font-Weight لتحديد سمك الخط على سبيل المثال Normal، Bold.
• Letter-Spacing لتحديد مسافة التباعد بين الحروف بوحدة البكسل.
• Word-Spacing لتحديد مسافة التباعد بين الكلمات بوحدة البكسل.
•  Line-Height لتحديد ارتفاع الخط بوحدة البكسل.
• Text-Align لتحديد اتجاه محاذاة الخط، على سبيل المثال Center, Right.

على سبيل المثال لتحديد خصائص خط صفحة ويب بعائلة Arial، وحجم الخط 30px، وسمك الخط Bold، وارتفاع الخط 1.5px، ومحاذاة الكتابة في المنتصف، يتم كتابة كود CSS التالي:

 body {
  font-family: Arial;
  font-size: 30px;
  Font-Weight: bold;
  line-height: 1.5;
  color: rgb(114, 27, 253);
  text-align: center;
}

3- الخلفيات

تستخدم خاصية background لتحديد خلفية عنصر محدد أو صفحة الويب كاملةً، ويمكن الاعتماد على معرفات خاصية Color السابقة، أو تحديد رابط لصورة محددة.

على سبيل المثال لتحديد درجة لون محددة للخلفية، يتم كتابة كود CSS التالي:

 body { background-color: #f20404; }

أما في حالة تحديد صورة محددة لخلفية صفحة الويب، يتم كتابة كود CSS التالي:

 body { background-image: url('image.jpg') }

4- خصائص الصندوق

تستخدم خصائص الصندوق المختلفة لتحديد مقدار الهوامش والإطارات الخارجية والداخلية لعناصر صفحة الويب، وأهم تلك الخصائص هو الآتي:

• Border: يحدد الإطار الخارجي للعنصر، وذلك بوحدة البكسل، مع إمكانية إضافة لون الإطار بالتتابع مع خصائص Color.
• Padding: يحدد المسافة الداخلية بين المحتوى والإطار للعنصر بوحدة البكسل.
• Margin: يحدد المسافة الخارجية بين الإطار وحدود صفحة الويب، أو المسابقة بين العناصر المتجاورة.

وفي خاصية Padding وخاصية Margin يتم كتابة الأربع قيم تواليًا بداية من أعلى, يمين, أسفل, يسار، وذلك كما موضح في الصورة التالية:

5- خصائص العرض

تستخدم خاصية العرض Display في تحديد كيفية عرض العناصر في صفحة الويب، ويوجد لها العديد من القيم، وأهم تلك القيم هو الآتي:

• None: تقوم بإخفاء العناصر من صفحة الويب، وتستخدم في الأغلب لإخفاء العناصر على أجهزة تشغيل محددة.
• Inline: تقوم بحذف كافة الفواصل في بداية ونهاية العنصر، وبالتالي لا يتأثر العرض بخصائص العرض والارتفاع.
• Block: تقوم بتحديد نهاية العرض، وهذا يعني أن العنصر التالي سيبدأ من سطر جديد.
• Inline-Block: تجمع بين خاصية Inline وخاصية Block، حيث يقبل العنصر خصائص العرض والارتفاع، ويحدد نهاية العرض.

ويمكن معاينة الفرق بينهم كما موضح في الصورة التالية:

أنظمة كود CSS الأساسية

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

وتكمن المشكلة في عدم الالتزام بأنظمة كود CSS أثناء الكتابة، حيث يمكن أن يؤدي كتابة كود محدد إلى حذف كود آخر أو حذف تأثيره، وبالتالي تشعر بعدم تٌطبيق الكود على العنصر المستهدف، لذلك يجب أن تتعرف على أنظمة كتابة كود CSS قبل كتابة أكواد متداخلة، وأهم تلك الأنظمة هو الآتي:

1. التعاقب Cascade
2. التخصيص Specificity
3. الوراثة Inheritance

1- التعاقب Cascade

ينظم نظام التعاقب Cascade تطبيق أكواد CSS المتضاربة في صفحات الويب، حيث إذا تم تحديد أكثر من قيمة لنفس العنصر في صفحة الويب، يعتمد المتصفح على معالجة العنصر بقيمة CSS الأخيرة.

على سبيل المثال إذا تم تطبيق كود CSS لتحديد لون نص باللون الأخضر، وبعد ذلك تم تحديد لون نفس النص باللون الأزرق، سيعتمد متصفح الويب على اللون الأزرق في عرض النص لأنه اللون الأخير، وذلك كما موضح في الصورة التالية:

2- التخصيص Specificity

يصنف نظام التخصص Specificity أكواد CSS إلى درجات، ويقوم بإعطاء أولوية ظهور للدرجات الأعلى عن الدرجات الأقل دون النظر إلى نظام التعاقب Cascade السابق.

ويمكن تحديد أولوية نظام التخصص Specificity إلى ثلاث درجات بالترتيب:

1. المعرف Id
2. الفئة Class
3. العناصر المنفصلة، على سبيل المثال الفقرات، العناوين، وغير ذلك.

فإذا تم كتابة كود CSS لنفس العنصر بالاعتماد على المعرف والفئة والعنصر مباشرًا، سيعتمد متصفح الويب على تطبيق كود CSS الخاص بالمعرف، وإذا لم يتواجد المعرف، سيعتمد على الفئة، وبعد ذلك يعتمد على العنصر مباشرًا، وذلك دون النظر إلى الترتيب تمامًا.

على سبيل المثال عند تعريف عنوان محدد بدرجة اللون الأخضر بالاعتماد على عنصر العنوان، وبعد ذلك تعريف لون أحمر للعنوان بالاعتماد على فئة العنوان، ثم تعريف لون أزرق للعنوان بالاعتماد على معرف العنوان، ستلاحظ أن النتيجة النهائية في المتصفح هي اللون الأزرق طبقًا لنظام التخصص، وذلك كما موضح في الصورة التالية:

3- الوراثة Inheritance

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

وينطبق نظام الوراثة Inheritance على بعض العناصر الأساسية فقط والمشتركة بين كافة عناصر صفحة الويب، على سبيل المثال عائلة خط الكتابة، حيث تعتمد أغلب صفحات الويب على خط واحدة في كافة العناصر، ولكن لا تنطبق على العناصر التخصصية على سبيل المثال الهوامش أو الحدود الخارجية.

على سبيل المثال عند كتابة كود CSS لقسم رئيسي يحدد حجم الخط ولون الخط واتجاه المحاذاة والحدود الخارجية، ستلاحظ تطبيق خصائص الخط من الحجم واللون والمحاذاة على كافة الأقسام الفرعية داخل القسم الرئيسي، ولكن سيتم تطبيق الحدود الخارجية على القسم الرئيسي فقط، وذلك كما موضح في الصورة التالية:

ويمكنك الاعتماد على نظام الوراثة Inheritance في تنسيق كامل صفحات الويب مباشرًا، حيث تكتب كافة تنسيقات صفحة الويب الرئيسية على سبيل المثال عائلة الخط، حجم الخط، لون الخط، وغير ذلك، وذلك على عنصر عالي المستوى على سبيل المثال <body>.

وإذا أردت استثناء جزء محدد داخل صفحة الويب، يمكنك تخصيص معرف خاص لهذا الجزء، وتخصيص المظهر للجزء المطلوب بالاعتماد على المعرف الخاص به، وذلك طبقًا لنظام التخصص Specificity السابق.

كتابة تعليقات أكواد CSS

يمكن كتابة تعليقات داخل أكواد CSS توضح الهدف أو استخدامات الكود المحدد كدليل استرشادي، وذلك دون أن يتأثر بها المتصفح أو تؤثر على طريقة العرض تمامًا.

وذلك عن طريق كتابة رمز “*/” ثم كتابة التعليق المطلوب، وبعد ذلك كتابة رمز “/*” في نهاية التعليق، كما يمكن استخدام تلك الطريقة أيضًا في إلغاء تفعيل كود CSS محدد داخل ملف HTML، وذلك كما موضح في الصورة التالية:

ستلاحظ أن نص التعليق لم يظهر في نتيجة كود CSS، وكذلك تم إلغاء تفعيل كود CSS الخاص بالخلفية والحجم عن إضافة رمز “/*” في بداية ونهاية الكود.

إضافة كود CSS إلى HTML

تحتاج إلى ربط كود CSS بملف HTML الخاص بصفحة الويب حتى يتم تطبيق التعديل المطلوب، ويمكن إضافة كود CSS إلى ملفات HTML بواسطة 3 طرق مختلفة كالآتي:

1. ملفات CSS خارجية.
2. أكواد CSS داخلية.
3. أكواد CSS مضمنة.

1- ملفات CSS خارجية

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

بدايةً تقوم بإنشاء ملف Text جديد على جهاز الكمبيوتر وذلك عن طريق الخطوات التالية:

• النقر بزر الماوس الأيمن في مساحة فارغة على جهاز الكمبيوتر.
•  اختيار New >> Text Document.
• تسمية الملف بالاسم المناسب على سبيل المثال Style مع تحديد صيغة الملف .css بدلاً من .txt.

تقوم بعد ذلك بكتابة كود CSS المطلوب في الملف الجديد، وتقوم بحفظ الملف كما موضح في الصورة التالية:

بعد ذلك تقوم برفع الملف الجديد Style.css في نفس مجلد ملف HTML، وتقوم بالتعديل على ملف HTML وتقوم بكتابة علامة <link> داخل قسم <Head> وتحدد ملف CSS المطلوب، على سبيل المثال الكود التالي

<link rel="stylesheet" target="_blank" rel="noopener" href="style.css">

حيث تشير دالة href إلى اسم ملف CSS، وهنا اسم الملف style.css، بعد ذلك تقوم بحفظ ملف HTML، ستلاحظ تطبيق كود CSS على صفحات الويب بشكل منفصل.

2- أكواد CSS داخلية

الخيار الثاني هو تضمين أكواد CSS مباشرًا داخل ملفات HTML، وذلك بالاعتماد على الخطوات التالية:

1. التعديل على ملف HTML المطلوب.
2. إضافة علامتي <style> </style> داخل جزء <head>.
3. كتابة كود CSS المطلوب داخل علامتي <style> </style>

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

3- أكواد CSS مضمنة

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

ويعتمد هذا الخيار على تضمين أكواد CSS على هيئة سمة Style لعناصر HTML المختلفة، على سبيل المثال إضافة كود CSS لتغير لون عنوان والمحاذاة كالآتي:

<H1 style="background-color: #FD9A62; text-align: center">نص تجريبي</H1>

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

كيفية إضافة كود CSS إلى موقع ووردبريس

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

1. الدخول إلى لوحة ووردبريس الرئيسية.
2. اختيار المظهر >> تخصيص

ستظهر لك قائمة تخصيص القالب، وستجد أغلب عناصر تلك القائمة مشتركة بين كافة قوالب ووردبريس، فتقوم بالضغط على تنسيقات CSS إضافية، كما موضح في الصورة التالية:

بعد ذلك تقوم بكتابة كود CSS المطلوب، وستجد نتيجة الكود يتم تطبيقها مباشرًا على صفحة الويب أو العنصر المستهدف، وبعد الإنتهاء من التعديلات تقوم بالضغط على نشر، وذلك كما موضح في الصورة التالية:

يمكنك أيضًا إضافة أكواد CSS على ملفات القالب مباشرًا، ومعاينة كافة أكواد CSS المطبقة على القالب والتعديل عليها، وذلك عن طريق الرجوع إلى لوحة ووردبريس الرئيسية، ثم اختيار المظهر >> محرر ملف القالب، كما موضح في الصورة التالية:

تقوم بالبحث عن ملف التنسيقات Style.css ضمن ملفات القالب، وستظهر لك كافة أكواد CSS المطبقة على القالب، يمكنك التعديل على تلك الأكواد مباشرًا أو إضافة أكواد جديدة، وبعد الإنتهاء من التحديثات تقوم بالضغط على تحديث القالب، كما موضح في الصورة التالية:

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

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

أقرأ أيضًا: مقال دليل المبتدئين الشامل إلى لغة HTML | كيفية كتابتها وتعلمها واستخدامها