วิธีเขียน CSS แยก และเรียกใช้งานบนเว็บไซต์

สอนวิธีเขียน CSS แยก และเรียกใช้งานบนเว็บไซต์ โดยวิธีนี้จะเป็นการเขียนโค้ดภาษา CSS ไว้ในไฟล์ที่มีนามสกุล .css จากนั้นในเว็บไซต์เช่น HTML จะใช้แท็ก link เพื่อโหลดไฟล์ CSS เข้ามาใช้งาน โดยมีรายละเอียดดังนี้

ตัวอย่าง วิธีเขียน CSS แยก และเรียกใช้งานบนเว็บไซต์

1. ที่ไฟล์ index.html มี div ที่จะใส่ขนาดความกว้าง x สูง และสีจากไฟล์ css

<div></div>

2. สร้างไฟล์ default.css (เปลี่ยนชื่อตามต้องการ แต่ต้องอ้างชื่อไฟล์ให้ถูก) และเขียนโค้ดดังนี้

.box {
    width: 100px;
    height: 100px;
    background-color: green;
}

3. ที่ไฟล์ index.html โหลดไฟล์ default.css และเรียกใช้งาน class box กับ div

<link rel="stylesheet" type="text/css" href="default.css" />
<div class="box"></div>

จากโค้ดด้านบนใช้แท็ก link เพื่อโหลดไฟล์ default.css เข้ามาใช้งาน และนำ class box ไปใช้กับ div เพื่อจัดรูปแบบ ความกว้าง ความสูง และสีพื้นหลังของ div