การรีเซ็ตคุณสมบัติ CSS ทั้งหมดด้วย all property

คุณสมบัติ all เป็น shorthand ที่ใช้รีเซ็ตคุณสมบัติ CSS ทั้งหมด (ยกเว้น unicode-bidi และ direction) ให้กลับสู่ค่าเริ่มต้น การสืบทอด หรือไม่ระบุ

ค่าที่ใช้ได้

• initial: ตั้งค่าทุกคุณสมบัติเป็นค่าเริ่มต้น (initial value) ของแต่ละคุณสมบัติ
• inherit: บังคับให้สืบทอดค่าจาก parent element ทุกคุณสมบัติ
• unset: ถ้าคุณสมบัตินั้นสืบทอดได้ ให้ทำเหมือน inherit มิฉะนั้นทำเหมือน initial
• revert (ใหม่): คืนค่าเป็น user-agent stylesheet (browser default) หรือ user stylesheet
• revert-layer (ใหม่กว่า): คืนค่าเป็นค่าของ cascade layer ก่อนหน้า

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      color: blue;
    }
    #demo {
      background-color: yellow;
      color: red;
      all: inherit;  /* สืบทอด color: blue จาก html, background จะกลายเป็น transparent (initial) */
    }
  </style>
</head>
<body>
  <h2>CSS all property</h2>
  <div id="demo">This is demo text.</div>
</body>
</html>

คำอธิบาย: #demo มี color: red และ background-color: yellow แต่ all: inherit ทำให้มันสืบทอด color: blue จาก html ส่วน background-color ไม่ได้ถูกสืบทอด (initial คือ transparent) จึงหายไป

กรณีใช้งาน: รีเซ็ตสไตล์ของ widget/component ที่ถูกฝังในหน้าที่มี CSS เพียบเพื่อไม่ให้สไตล์ภายนอกซ้ำซ้อน