วิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เีพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยู่ในคำสั่ง style="" ดังนี้
<Tag style="property:value;">
ตัวอย่างเช่น
<html>
<body>
<h1 style="color:red; font-family:Arial">การสร้างเวบไว๖์</h1>
<p style="color:black; font-family:Arial; font-weight:bold">คำศัพท์สำคัญในการสร้างเวบไซต์ </p>
</body>
</html>
<body>
<h1 style="color:red; font-family:Arial">การสร้างเวบไว๖์</h1>
<p style="color:black; font-family:Arial; font-weight:bold">คำศัพท์สำคัญในการสร้างเวบไซต์ </p>
</body>
</html>
เราควรหลีกเลี่ยงการเขียน style=”" ฝังลงใน HTML Tag เพราะมันทำให้อ่านยาก และนำไปใช้ต่อไม่ได้ และเป็นการยากที่จะแก้ไข
2. Internal Style Sheet
วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำสั่ง Style Sheet ไว้ระหว่าง <head>...</head>
สำหรับ Web Browser รุ่นเก่าที่ไม่สนับสนุนคำสั่ง Style Sheet หรือ Disable Style Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วย เพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คำสั่งภาษา HTML
คำสั่งที่ใช้เริ่มต้น และจบ Style Sheet มีโครงสร้างดังนี้
<style type="text/css">
<!--
selector {property1: value1; property2: value2}
....
-->
</style>
<!--
selector {property1: value1; property2: value2}
....
-->
</style>
ตัวอย่าง
<html> <body> <head> <style type="text/css"> <!-- h1{color:red; font-family:Arial } p{color:black; font-family:Arial; font-weight:bold } --> </style> </head> <body> <h1>อาหารและสารอาหาร</h1> <p>อาหาร (food) คือ สิ่งที่รับประทานได้ ไม่เป็นพิษ และก่อให้เกิดประโยชน์แก่ร่างกาย ช่วยให้ร่างกายเจริญเติบโต มีภูมิต้านทานโรค เช่น ข้าว ก๋วยเตี๋ยว ไข่ดาว หมูทอดกระเทียม ขนมปัง และผลไม้ </p> <h1>สารอาหาร (nutrient) </h1> <p> สารเคมีที่เป็นส่วนประกอบของอาหาร</p> </body> </html>
3. External Style Sheet
วิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำเอาคำสั่ง Style Sheet ที่อยู่ใน <style type="text/css"> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำการผนวกไฟล์ของ Style Sheet นี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheet ชุดนี้ ไว้ในส่วน <head>...</head> โดยใช้คำสั่ง
<link rel="stylesheet" type="text/css" href="URL ไฟล์.css">
ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้
ตัวอย่าง
ในไฟล์ mystyle.css ให้เขียน code ดังนี้
h1{ color:red; font-family:Arial }
p{ color:black; font-family:Arial; font-weight:bold }
ในไฟล์ HTML page1.html เรียกใช้ style sheet จากภายนอกp{ color:black; font-family:Arial; font-weight:bold }
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>อาหารและสารอาหาร</h1> <p> สิ่งที่รับประทานได้ ไม่เป็นพิษ และก่อให้เกิดประโยชน์แก่ร่างกาย ช่วยให้ร่างกายเจริญเติบโต มีภูมิต้านทานโรค เช่น ข้าว ก๋วยเตี๋ยว ไข่ดาว หมูทอดกระเทียม ขนมปัง และผลไม้ </p> </body> </html>
ในไฟล์ HTML page4.html เรียกใช้ style sheet จากภายนอก
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>อาหารและสารอาหาร</h1> <p>สิ่งที่รับประทานได้ ไม่เป็นพิษ และก่อให้เกิดประโยชน์แก่ร่างกาย ช่วยให้ร่างกายเจริญเติบโต มีภูมิต้านทานโรค เช่น ข้าว ก๋วยเตี๋ยว ไข่ดาว หมูทอดกระเทียม ขนมปัง และผลไม้ </p> </body> </html>
การที่เราใช้งาน CSS โดยเรียกใช้จากภายนอก จะทำให้ไฟล์เวบเพจของเรามีขนาดเล็ก และการแก้ไขคำสั่ง style sheet เพียงที่เดียว จะมีผลกับเอกสารทุกหน้าได้
Cascading Order
1. กรณีที่มีการกำหนด style ด้วยชื่อ selector เดียวกันทั้งแบบ 3 แบบ Style sheet ที่จะถูกใช้คือแบบไหน
ลำดับความสำคัญ เรียงจากมากไปหาน้อย
Inline style (inside an HTML element),
Internal style sheet (inside the <head> tag)
และ External style sheet ตามลำดับ
จากลำดับความสำคัญดังกล่าว Style ที่จะถูกใช้คือแบบ Inline style
2. กรณีที่มีการเขียน style ซ้ำ selector เดิม อันที่อยู่ด้านล่าง จะถูกทำเป็นลำดับสุดท้าย
ตัวอย่าง ไฟล์ mystyle.css
p{ color:black }
p{ color:blue }
เมื่อเราเรียกใช้ <p> ใน HTML เช่น
<p>สิ่งที่รับประทานได้ ไม่เป็นพิษ และก่อให้เกิดประโยชน์แก่ร่างกาย ช่วยให้ร่างกายเจริญเติบโต มีภูมิต้านทานโรค
เช่น ข้าว ก๋วยเตี๋ยว ไข่ดาว หมูทอดกระเทียม ขนมปัง และผลไม้ <p> เป็นสีน้ำเงิน
แต่หากเรากำหนด !important ไว้ใน value เช่น
p{color:black!important}
p{color:blue}
เมื่อเขียนแบบนี้ ใน Tag <p> จะได้ตัวอักษรสีดำ
