หนึ่งในคุณสมบัติที่สำคัญที่สุดของสไตล์ชีทคือสามารถนำไปใช้กับสื่อได้หลากหลาย เช่น หน้า หน้าจอ เครื่องสังเคราะห์เสียงอิเล็กทรอนิกส์ เป็นต้น คุณสมบัติบางอย่างสามารถใช้ได้กับสื่อเฉพาะเท่านั้น ตัวอย่างเช่น คุณสมบัติ "ขนาดตัวอักษร" ใช้ได้เฉพาะกับประเภทสื่อที่เลื่อนได้ (หน้าจอ)
การประกาศแอตทริบิวต์สื่อสามารถนำมาใช้โดยใช้ @import หรือ @media:
นี่คือคำพูด:
@import url (loudvoice.css) คำพูด;
@media พิมพ์ {
/* สไตล์ชีตสำหรับการพิมพ์อยู่ที่นี่ */
-
สื่อยังสามารถนำมาใช้ในมาร์กอัปเอกสาร:
นี่คือคำพูด:
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
จะเห็นได้ว่าความแตกต่างระหว่าง @import และ @media คือ รูปแบบแรกแนะนำสไตล์ชีตภายนอกสำหรับประเภทสื่อ ในขณะที่รูปแบบหลังแนะนำคุณลักษณะของสื่อโดยตรง วิธีใช้ @import คือการเพิ่มที่อยู่ URL ของไฟล์สไตล์ชีตไปที่ @import จากนั้นเพิ่มประเภทสื่อสามารถแชร์สไตล์ชีตได้ และประเภทสื่อจะถูกคั่นด้วย "," ตัวคั่น การใช้งาน @media คือการใส่ประเภทสื่อไว้ก่อน และกฎอื่นๆ โดยพื้นฐานแล้วจะเหมือนกับกฎที่ตั้งไว้ สื่อประเภทต่างๆ มีดังต่อไปนี้:
SCREEN: หมายถึงหน้าจอคอมพิวเตอร์
พิมพ์: หมายถึงสื่อทึบแสงที่ใช้กับเครื่องพิมพ์
PROJECTION หมายถึง โครงการที่ใช้ในการจัดแสดง
อักษรเบรลล์: ระบบอักษรเบรลล์ หมายถึง สิ่งพิมพ์ที่มีลักษณะสัมผัส
AURAL: หมายถึงเครื่องสังเคราะห์เสียงพูดแบบอิเล็กทรอนิกส์
ทีวี: หมายถึงสื่อประเภทโทรทัศน์
HANDHELD: หมายถึง อุปกรณ์แสดงผลแบบมือถือ (จอเล็ก, ขาวดำ)
ทั้งหมด: เหมาะสำหรับสื่อทุกประเภท