عند تطبيق قاعدتين أو أكثر من قواعد CSS على نفس النص، يمكن أن تتعارض القواعد وتؤدي إلى نتائج غير متوقعة. يطبق المتصفح قواعد CSS كما يلي:
إذا تم تطبيق قاعدتين على نفس النص، فسيعرض المتصفح جميع خصائص كلتا القاعدتين، ما لم تتعارض خصائص معينة. على سبيل المثال، قد تحدد إحدى القواعد أن يكون لون النص باللون الأزرق، بينما قد تحدد قاعدة أخرى أن يكون لون النص باللون الأحمر.
في حالة تعارض خصائص قاعدتين تنطبقان على نفس النص، يعرض المتصفح خصائص القاعدة الأعمق (القاعدة الأقرب إلى النص نفسه). لذلك، إذا كان كل من ورقة الأنماط الخارجية والنمط المضمن يؤثران على عنصر النص، فسيتم تطبيق النمط المضمّن.
ستتجاوز الخصائص الموجودة في قواعد CSS المخصصة (القواعد المطبقة باستخدام سمة الفئة) الخصائص في أنماط علامات HTML إذا كان هناك تعارض مباشر.
في المثال التالي، يحدد النمط المحدد لـ h1 الخط والحجم واللون لجميع فقرات h1، لكن قاعدة CSS المخصصة .Blue المطبقة على تلك الفقرة ستتجاوز إعدادات اللون في نمط h1. قاعدة CSS مخصصة أخرى، .Red، ستتجاوز .Blue لأنها موجودة داخل النمط .Blue.
<h1><span class="Blue">يتم التحكم في هذه الفقرة بواسطة النمط المخصص .Blue وh1
نمط علامة HTML.<span class="Red">باستثناء أن هذه الجملة يتم التحكم فيها بواسطة النمط .Red.</span>
الآن عدنا إلى النمط .الأزرق.</span></h1>