ไฟล์ CSS สามารถฝังไว้ภายในได้โดยการประกาศในแท็ก <style> วิธีนี้ลดเวลาโหลดหน้าเว็บ แม้ว่า CSS แบบฝังภายในจะอนุญาตให้มีสไตล์ไดนามิกได้ แต่ควรดาวน์โหลดทุกครั้งที่ร้องขอหน้า เนื่องจาก internal CSS ไม่สามารถแคช (cached) ได้ Internal CSS ถูกประกาศในแท็ก <style> ภายในแท็ก <head>
ไวยากรณ์
ไวยากรณ์สำหรับการฝังไฟล์ CSS มีดังนี้:
<style> /*declarations*/ </style>
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการฝังไฟล์ CSS:
<!DOCTYPE html> <html> <head> <style> article { font-size: 1.3em; font-family: cursive; } div { float: left; margin-left: 20px; width: 30px; height: 30px; background-color: lightgreen; box-shadow: 8px 5px 0 2px lightcoral; } </style> </head> <body> <article>Demo text</article> <div></div> <div></div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div { float: left; margin-left: 20px; width: 60px; height: 30px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: lightgreen; box-shadow: inset 5px 0 lightcoral; } div + div { background-color: lightblue; border-top-left-radius: 50px; border-bottom-left-radius: 50px; } </style> </head> <body> <div></div> <div></div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
