إنشاء أنماط مخصصة Custom SAtyles

تعلمنا فيما سبق كيفية تغيير التنسيقات الافتراضية لبعض العلامات Tages في لغة HTML، ولكن ماذا لو أردنا إنشاء مجموعة من الأنماط Style  المختلفة في نفس الصفحة؟ فمثلاً لنفترض أننا أنشأنا ثلاثة جداول في نفس الصفحة ونريد أن نقوم بتصميم ثلاثة أنماط Styles  مختلفة للفكل جدول، فإذا قمنا بتغيير التنسيق العام للعلامة <TABLE>- كما فعلنا في الأمثلة السابقة- فسيتم تطبيق التغيير على جميع الجداول ولن نحقق هدفنا، إذن ما الحل؟.

الحل يكمن ببساطة في إنشاء نمط مخصص Custom Style، ويتم إنشاؤه في ملف CSS بنفس الطريقة السابق شرحها في الأمثلة السابقة، ولكنه يختلف في أن اسم النمط Stylr لا يكون بنفس اسم علامة من علامات لغة HTML، ولكن يمكنك تسميته بأي اسم تشاء، ولكن حتى تتم التفرقة بين النمط المخصص Custom Style والنمط العادي، فإن اسم النمط المخصص Custom Style يجب أن يبدأ بنقطة (.) مثل الأمثلة التالية:

يتضح لنا من هذه الأمثلة أن أسماء الأنماط Style لا علاقة لها بعلامات Tag لغة HTML وجميعها يبدأ بنقطة (0).

الخطوة الثانية تكمن في ملف HTML حتى يمكننا استخدام أي من الأنماط المخصصة Custom Style السابقة، حيث يمكننا استخدام أي من علامات Tage لغة HTML مع الصفة CLASS ثم تحديد القيمة Value لتكون اسم أي من الأنماط المخصصة Custom Style السابق إنشاؤها في الملف معت ملاحظة عدم كتابة النقطة (0) لأنها مستخدمة أساساً لتمييز النمط المخصص Custom Style وليست فعلياً جزءاً من اسم النمط المخصص Custom Style فمثلا:

حيث استخدمنا العلامة <TABLE> في السطر الأول ويليها الصفة CLASS مع تحديد القيمة لتكون a (وهو اسم النمط المخصص Custom Style بدون النقطة)، وبالمثل بالنسبة للسطر الثاني.