การเพิ่ม css มีอยู่ 3 แบบ หลักๆ แล้วแต่ว่าจะเลือกใช้แบบไหน
ลำดับการให้ความสำคัญในการแสดงผลของแต่ละแบบจะเป็นดังนี้
External CSS น้อย
Internal CSS ปานกลาง
Inline CSS มาก1. External CSS : ภายนอก คือจะอยู่อีกไฟล์หนึ่งไปเลย จะเขียนแยกส่วนกัน แล้วค่อยลิงค์หากัน ไม่ว่าจะด้วย class, id , element ก็แล้วแต่ เช่น file.css and file.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> เอาไว้ลิงค์
</head>
<body><h1>This is a heading</h1> ข้อความที่อยากให้แสดง อยู่ใน element h1
<p>This is a paragraph.</p> ข้อความที่อยากให้แสดง อยู่ใน element p</body>
</html>
“style.css”
h1,p {
color: navy;
margin-left: 20px;
}2. Internal CSS : ภายใน คือภายในไฟล์เดียวกัน <style>….</style>จะอยู่ในส่วนของ <head>…..</head> ข้อความที่ต้องการให้แสดงจะอยู่ในส่วน <body></body>
<!DOCTYPE html>
<html>
<head>
<style>
h1,p {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>3. Inline CSS : จะคล้ายกันกับ Internal แต่จะอยู่ในส่วนของ <body></body> ทั้งหมด เขียนรวมกันเลย จะเขียนเข้าไปใน element นั้นๆ ที่ต้องการ
<!DOCTYPE html>
<html>
<head></head><body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
สุดท้ายเอาทุกอย่างมาเขียนรวมกันทั้ง External CSS, Internal CSS, Inline CSS มายำรวมมิตรกัน
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="styles.css">
<style>
h2{
color: blueviolet;
}
</style></head>
<body style="background-color: cornflowerblue">
<h1 style="text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<h2>Thailand</h2></body>
</html>
styles.css
h1{
color:greenyellow;
}
จบแล้วววว !!
