การใช้ css ใน HTML

Hyper Text Markup Language

Cascading Style Sheets (CSS) ใช้สำหรับกำหนดรูปแบบการจัดวางหน้าเว็บ

CSS คุณสามารถควบคุมสี แบบอักษร ขนาดของข้อความ ระยะห่างระหว่างองค์ประกอบต่างๆ การจัดวางตำแหน่งและรูปแบบการแสดงผล การเลือกใช้ภาพหรือสีพื้นหลัง รวมถึงการกำหนดรูปแบบการแสดงผลที่แตกต่างกันสำหรับอุปกรณ์และขนาดหน้าจอที่หลากหลาย และอื่นๆ อีกมากมาย

การใช้ css ใน HTML สามารถใช้งานได้ 3 วิธีการ คือ

วิธีที่นิยมใช้กันมากที่สุดในการเพิ่ม CSS คือการเก็บสไตล์ไว้ในไฟล์ CSS ภายนอก

Internal CSS

Internal CSS ใช้สำหรับกำหนดสไตล์ให้กับหน้า HTML เพียงหน้าเดียว Internal CSS ถูกกำหนดไว้ในส่วน <head> ของหน้า HTML ภายในองค์ประกอบ <style>


ตัวอย่างโค้ด


<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>หัวข้อเรื่อง</h1>
<p>ในส่วนการการบรรยาย</p>

</body>
</html>

จะได้ผลลัพธ์ดังรูป


External CSS

ใช้สำหรับกำหนดรูปแบบให้กับหน้า webpage หลายหน้า แต่เพียงกำหนดรูปแบบของ webpage ไว้ที่ css ไฟล์เดียว แต่ละ webpage ที่เขียน HTML เพียงเชื่อมโยงกับไฟล์ css ในส่วน <head> ของแต่ละ webpage

โดยจะต้องสร้างไฟล์ style.css ไว้อีกไฟล์ เพื่อใช้เรียกใช่งาน css ดังตัวอย่างโค้ด css นี้


body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

และให้สร้าง webpage โดยอ้างถึง style.css จากภายนอก ดังตัวอย่างในโค้ด


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

การตั้งค่าสี ฟอนตร์และ ขนาด ใน css

จากการกำหนด style ขนาดของข้อความ หรือหากต้องการเปลี่ยนทั้งสีอักษรและพื้นหลัง สามารถกำหนดหรือระบุได้จากการกำหนดค่าในไฟล์ css ภายนอกแล้วทำการเชื่อมโยงมาใช้งานใน webpage ทีสร้างขึ้น

เช่น

ตัวอย่างการกำหนด css


body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

การตั้งค่า Border ใน css

เป็นการกำหนดกรอบของข้อความ โดยใช้คำสั่ง border: 2px solid powderblue; ลงใน css หากรีเฟรส หน้า webpage ใหม่ จะได้กรอบข้อความดังรูป 


body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
  border: 2px solid powderblue;
}

การตั้งค่า Padding ใน css

padding คือการกำหนดระยะห่างของตัวอักษรกับ border


body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
  border: 2px solid powderblue;
  padding: 30px;
}

ซึ่งจะได้ระยะ padding ดังลักษณะในรูป


การตั้งค่า margin ใน css

margin คือการกำหนดระยะห่างของระหว่าง border


body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
  border: 2px solid powderblue;
  padding: 30px;
  margin: 50px;
}

ซึ่งจะได้ระยะ margin ดังลักษณะในรูป


การกำหนด class ใน css

จากการกำหนด แอตทริบิวต์ ของการใช้ตัวอักษรของแต่ละส่วน ไม่ว่าจะเป็น <h2> หรือของ <p> หากต้องการกำหนดค่าที่หลากหลายไม่ซ้ำกันนั้น เราสามารถกำหนดเป็น class เพิ่มเติม ซึ่งจะทำให้ <h2> หรือ <p> มีลักษณะที่หลากหลายได้ 


body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
  border: 2px solid powderblue;
  padding: 30px;
  margin: 50px;
}
.type1 {
  background-color: rgb(141, 71, 255);
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
.type2 {
  background-color: rgb(71, 200, 255);
  color: white;
  border: 2px solid rgb(236, 42, 42);
  margin: 50px;
  padding: 50px;
}

โดยการเรียกใช้ class ใน HTML เป็นดังลักษณะในโค้ด


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>ทดลอง HTML Head </title>
</head>
<body>

<h1>หัวข้อที่ 1 </h1>
<p class="type1">ทดสอบ  class ใน file.css ที่มีการกำหนดค่าที่แตกต่างการ โดย พารากราฟนี้เรียกใช้ class type4</p>
<p class="type2">ทดสอบ  class ใน file.css ที่มีการกำหนดค่าที่แตกต่างการ โดย พารากราฟนี้เรียกใช้ class type2</p>



</body>
</html>

เมื่อรีเฟรส webpage ใหม่จะปรากฏดังรูป


หัวข้อ