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

التعليقات.
المحددات.
الخصائص.
طريقة استخدام CSS في الصفحة.
الأولوية أم التتالي.
استعلامات الميديا.
التوافقية.
التعليقات
توجد طريقة واحدة لكتابة التعليقات في ملف CSS وهي كتابة التعليقات بين الرمزين /* */.

/* التعليقات تُتكتب هنا
ولا يوجد نمط لكتابة التعليق في سطر واحد سوى هذه الطريقة */
المحددات
يُستخدم المحدد في استهداف عنصر في صفحة، ويُكتَب بالطريقة التالية:

selector { property: value;
/* خصائص أخرى*/ }
لنفترض وجود العنصر التالي من نوع div في صحة ويب:

<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
تستطيع تطبيق قاعدة CSS على هذا العنصر باستخدام أحد أسماء الأصناف Classes التي ينتمي إليها في الصفحة:

.class1 { }
أو باستخدام جميع أسماء الأصناف المطبَّقة عليه:

.class1.class2 { }
أو باستخدام نوع العنصر:

div { }
أو باستخدام الرقم الخاص بالعنصر:

#anID { }
نستطيع تحدد العنصر من الصفحة في حال وجود صفة Attribute باسم معين:

[attr] { font-size:smaller; }
أو في حالة وجود صفة بقيمة معينة:

[attr='value'] { font-size:smaller; }
في حالة وجود صفة معينة في عنصر، ونريد تطبيق قاعدة على هذا العنصر بشرط وجود قيمة تبدأ منها الصفة نستخدم الطريقة التالية:

[attr^='val'] { font-size:smaller; }
أما إن كان الشرط يتعلّق بقيمة معينة تنتهي بها الصفة:

[attr$='ue'] { font-size:smaller; }
نستطيع تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها بمسافة فارغة (يوافق الشرط أدناه العناصر التي لديها صفة otherAttr تساوي “foo” أو “foo bar” أو “foo bar far” …إلخ):

[otherAttr~='foo'] { }
أو تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها برمز – كما في المثال التالي:

[otherAttr|='en'] { font-size:smaller; }
نستطيع جمع أكثر من مُحدد ببعضها للحصول على مُحدد مُركز كما في المثال التالي:

div.some-class[attr$='ue'] {