HTML Styles – CSS

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

CSS (Cascading Style Sheets) สำหรับ HTML จะใช้ในการตกแต่งเอกสารให้มีสีสัน ระยะห่าง
พื้นหลัง เส้นขอบ และอื่นๆ ให้มีรูปแบบและหน้าตาตามที่ต้องการ ซึ่ง CSS จะช่วยประหยัดเวลา
ในการทำงาน เพราะเพียงแค่ออกแบบเพียงครั้งเดียวสามารถนำไปใช้ในหน้าเพจได้หลายๆ หน้าได้

CSS คืออะไร

Cascading Style Sheets (CSS) ใช้จัดรูปแบบเค้าโครงของเว็บไซต์

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

Tip: คำว่า Cascading หมายถึง รูปแบบที่ใช้งานกับ Elements หลักซึ่งในที่นี้จะรวมไปถึง Elements ย่อยทั้งหมดที่อยู่ภายใต้ Elements หลักด้วย ซึ่งสมมติว่าคุณตั้งค่า body ของข้อความเป็น “สีน้ำเงิน” ดังนั้น ข้อความในส่วนของ Headings, Paragraphs และข้อความอื่นๆ ใน Elements ภายใน body จะเป็นสีเดียวกันทั้งหมด

การใช้งาน CSS

วิธีการใช้งาน CSS ใน HTML มี 3 วิธี

  • Inline – โดยใช้รูปแบบของ Attribute ภายใน Elements HTML
  • Internal – โดยใช้ Tag Element <style> ในส่วน <head>
  • External – โดยใช้ Tag Elements <link> เพื่อเชื่อมต่อไฟล์ CSS จากที่อื่น

ซึ่งโดยส่วนใหญ่จะใข้วิธีการเรียก CSS จากไฟล์ที่อยู่ภายนอก หรือวิธีที่ 3 แต่อย่างไรก็ตาม ในบทเรียนนี้จะใช้วิธีที่ 1 และ 2 เพราะง่ายต่อการอธิบายให้ผู้เรียนเข้าใจ

Inline CSS

Inline CSS จะใช้กับ Tag นั้นๆ กับ Element HTML

Inline CSS จะใช้ Tag style ใน Element HTML

จากตัวอย่างนี้จะตั้งค่าตัวอักษรที่อยู่ใน Element <h1> เป็นสีน้ำเงิน และสีของข้อความใน Element <p> เป็นสีแดง

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">สีน้ำเงินคือหัวข้อ</h1>

<p style="color:red;">สีแดงคือข้อความ</p>

</body>
</html>
ลองดูสิ ❱

Internal CSS

Internal CSS ใช้กำหนดรูปแบบสำหรับ HTML หน้าเดียว

Internal CSS จะถูกใช้ในส่วนของ <head> ของหน้าเพจ HTML ภายใต้ Element <style>

จากตัวอย่างด้านล่างนี้ จะตั้งค่าสีของข้อความทั้งหมดภายใน Element <h1> เป็นสีน้ำเงิน และข้อตวามทั้งหมดภายใน <p> จะเป็นสีแดง นอกจากนี้ สีพื้นหลังของหน้าเพจจะเป็นสีฟ้า (powerblue)

<!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

External CSS ใช้กำหนดรูปแบบหน้าเพจสำหรับ HTML หลายๆ หน้า

การที่จะใช้งาน External CSS ได้นั้น จะต้องเพิ่ม Link ในส่วนของ <head> ในแต่ละหน้าเพจของ HTML

ตัวอย่างการใช้งาน External CSS

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

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>

</body>
</html>
ลองดูสิ ❱

External Style Sheet สามารถเขียนในโปรแกรม Text Editor ใดก็ได้ แต่ต้องไม่มีโค้ด HTML และต้อง Save ด้วยนามสกุล .css ยกตัวอย่างเช่นไฟล์ “styles.css”

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

Tip: คุณสามารถเปลี่ยนเว็บไซต์ทุกหน้าผ่านทาง External Style Sheet เพียงไฟล์เดียวเท่านั้น!!

CSS Colors, Fonts และ Sizes

คุณสมบัติต่างๆ ของ CSS ที่ใช้กันโดยทั่วไป ในส่วนนี้จะได้เรียนรู้ภายหลัง แต่ในตอนนี้จะอธิบายถึงคุณสมบัติของ CSS เกี่ยวกับ สี, รูปแบบของตัวอักษร และขนาดของตัวอักษร

color ใน CSS จะใช้กำหนดคุณสมบัติสีของตัวอักษร

font-family ใน CSS จะใช้กำหนดคุณสมบัติของตัวอักษรที่ใช้

font-size ใน CSS จะใช้กำหนดขนาดของตัวอักษร

ตัวอย่างการใช้งาน CSS เพื่อกำหนดคุณสมบัติของสี, ตัวอักษร และขนาดตัวอักษร

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: kanit;
  font-size: 300%;

}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>

</body>
</html>
ลองดูสิ ❱

CSS Border

CSS border จะใช้กำหนดเส้นขอบรอบๆ Elements ของ HTML

Tip: คุณสามารถกำหนดเส้นกรอบให้กับ Element ของ HTML เกือบทั้งหมดได้

ตัวอย่างการใช้งาน CSS Border

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>นี่คือหัวข้อ</h1>

<p>นี่คือข้อความที่ 1</p>
<p>นี่คือข้อความที่ 2</p>
<p>นี่คือข้อความที่ 3</p>

</body>
</html>
ลองดูสิ ❱

CSS Padding

CSS padding จะใช้กำหนดระยะห่างระหว่างข้อความกับขอบ

ตัวอย่างของการใช้งาน CSS Padding

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>นี่คือหัวข้อ</h1>

<p>นี่คือข้อความที่ 1</p>
<p>นี่คือข้อความที่ 2</p>
<p>นี่คือข้อความที่ 3</p>

</body>
</html>
ลองดูสิ ❱

CSS Margin

CSS margin จะใช้กำหนดระยะห่างภายนอกขอบ

ตัวอย่างของการใช้งาน CSS Margin

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>นี่คือหัวข้อ</h1>

<p>นี่คือข้อความที่ 1</p>
<p>นี่คือข้อความที่ 2</p>
<p>นี่คือข้อความที่ 3</p>

</body>
</html>
ลองดูสิ ❱

External Style Sheets จะเป็นการอ้างอิง URL แบบเต็ม หรือเส้นทางที่เกี่ยวข้องกับหน้าเพจปัจจุบัน

ตัวอย่างการ Link ไปยัง Style Sheet โดยใช้ URL แบบเต็ม

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://kb.hostatom.com/html/styles.css">
</head>
<body>

<h1>นี่คือหัวข้อ</h1> 
<p>นี่คือข้อความ</p>

</body>
</html>
ลองดูสิ ❱

ตัวอย่างการ Link ไปยัง Style Sheet ที่อยู่ใน Folder HTML เดียวกับเว็บไซต์ปัจจุบัน

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

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>

</body>
</html>
ลองดูสิ ❱

ตัวอย่างการ Link ไปยัง Style Sheet ที่อยู่ใน Folder เดียวกับหน้าเพจปัจจุบัน

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

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>

</body>
</html>
ลองดูสิ ❱

สรุป

  • HTML style ใช้สำหรับการกำหนด Inline
  • HTML <style> ใช้สำหรับกำหนด CSS Internal
  • HTML <link> ใช้สำหรับอ้างอิงไฟล์ CSS จากภายนอก
  • HTML <head> ใช้เพื่อเก็บ <style> และ <sheet>
  • CSS color ใช้กำหนดสี
  • CSS font-family ใช้กำหนดรูปแบบตัวอักษรของข้อความ
  • CSS font-size ใช้กำหนดขนาดของตัวอักษร
  • CSS border ใช้เพื่อกำหนดขอบ
  • CSS padding ใช้เพื่อกำหนดระยะห่างของข้อความกับขอบ
  • CSS margin ใช้กำหนดระยะห่างภายนอกขอบ
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯