CSS แยกไฟล์คืออะไร ต่างยังไงกับการเขียนลงในแท็ก HTML

บทความนี้สอน CSS แยกไฟล์คืออะไร และเขียน CSS ในแท็ก HTML คืออะไร เริ่มที่ CSS แยกไฟล์ คือการสร้างไฟล์ .css และเขียนโค้ดลงไปในไฟล์ดังกล่าว และเรียกใช้งานที่เว็บไซต์ ส่วนการเขียน CSS ในแท็ก HTML คือการเขียน CSS ผ่านแท็ก style โดยมีรายละเอียดดังนี้

ตัวอย่างที่ 1 CSS แยกไฟล์

1. default.css

.box {
    width: 50px;
    height: 50px;
    background-color: blue;
}

2. index.html

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

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

ตัวอย่างที่ 2 เขียน CSS ในแท็ก HTML

<div class="box" style="width:50px; height:50px; background-color:blue;">1</div>
<br/>
<div class="box" style="width:50px; height:50px; background-color:blue;">2</div>

โค้ดด้านบนเขียนคำสั่ง CSS แทรกลงไปในแท็ก HTML ผ่าน attribute style 

1. ตัวอย่างที่ 1 จะลดความซ้ำซ้อนของการเขียนโค้ด CSS ได้เมื่อเปรียบเทียบกับ ตัวอย่างที่ 2

2. ตัวอย่างที่ 1 จะแก้ไข และจัดการโค้ด CSS ได้ง่ายกว่า ตัวอย่างที่ 2