เมื่อคุณใช้กฎ CSS ตั้งแต่สองกฎขึ้นไปกับข้อความเดียวกัน กฎอาจขัดแย้งกันและให้ผลลัพธ์ที่ไม่คาดคิด เบราเซอร์จะใช้กฎ CSS ดังต่อไปนี้:
หากใช้กฎสองข้อกับข้อความเดียวกัน เบราเซอร์จะแสดงคุณสมบัติทั้งหมดของทั้งสองกฎ เว้นแต่คุณสมบัติเฉพาะจะขัดแย้งกัน ตัวอย่างเช่น กฎข้อหนึ่งอาจระบุว่าสีข้อความเป็นสีน้ำเงิน ในขณะที่อีกกฎหนึ่งอาจระบุว่าสีข้อความเป็นสีแดง
หากคุณสมบัติของกฎสองข้อที่ใช้กับข้อความเดียวกันขัดแย้งกัน เบราเซอร์จะแสดงคุณสมบัติของกฎที่อยู่ด้านในสุด (กฎที่ใกล้กับข้อความมากที่สุด) ดังนั้น หากทั้งสไตล์ชีตภายนอกและสไตล์อินไลน์ส่งผลต่อองค์ประกอบข้อความ ระบบจะใช้สไตล์อินไลน์
คุณสมบัติในกฎ CSS ที่กำหนดเอง (กฎที่ใช้โดยใช้แอตทริบิวต์คลาส) จะแทนที่คุณสมบัติในรูปแบบแท็ก HTML หากมีข้อขัดแย้งโดยตรง
ในตัวอย่างต่อไปนี้ สไตล์ที่กำหนดสำหรับ h1 จะระบุแบบอักษร ขนาด และสีของย่อหน้า h1 ทั้งหมด แต่กฎ CSS ที่กำหนดเอง สีน้ำเงินที่นำไปใช้กับย่อหน้านั้นจะแทนที่การตั้งค่าสีในสไตล์ h1 กฎ CSS แบบกำหนดเองอีกกฎหนึ่ง .Red จะแทนที่ .Blue เนื่องจากอยู่ในสไตล์ .Blue
<h1><span class="Blue">ย่อหน้านี้ควบคุมโดยสไตล์ที่กำหนดเองของ .Blue และ h1
รูปแบบแท็ก HTML<span class="Red">ยกเว้นประโยคนี้ถูกควบคุมโดยสไตล์ .Red</span>
ตอนนี้เรากลับมาสู่สไตล์ .Blue แล้ว</span></h1>