บทที่ 6 แนะนำ CSS

CSS (อ่านว่า ซี-เอส-เอส ย่อมาจากคำว่า Cascading Style Sheets) คือภาษาอีกภาษาหนึ่งที่ใช้ร่วมกับ HTML ทำหน้าที่ในการกำหนดคุณสมบัติให้กับแท็กต่างๆ ให้มีคุณสมบัติตามที่ต้องการ เช่น การสั่งให้ตัวอักษรเป็นตัวหนา หรือ การใส่สีให้ตัวอักษร เป็นต้น โดยที่ในปัจจุบันเมื่อเราใช้ HTML5 เราก็มักใช้คู่กับ CSS3 เสมอ

วิธีการเขียน CSS สามารถทำได้หลายวิธี

1. เขียน CSS ใส่ลงใน style ของ แท็กโดยตรง เช่น
<span style="color:red;font-weight:bold;">ตัวหนังสือนี้มีสีแดงและเป็นตัวหนา</span>

ซึ่ง color:red; และ font-weight:bold; ก็คือคำสั่งของ CSS นั่นเอง และต้องเขียนใส่ลงในคุณสมบัติ style ของแท็กที่ต้องการกำหนดค่า

2. เขียน CSS ใส่ลงในหน้าเว็บ ภายใต้แท็ก <style> เช่น
<style>
span {
     color:red;
     font-weight: bold;
}
</style>

คล้ายกับแบบแรก แต่แบบที่สองนี้ สามารถกำหนดรูปแบบให้กับ span ได้ทุกตัวบนหน้าเว็บเพจ

3. เขียน CSS ใส่ลงในแฟ้ม .css วิธีนี้เขียนเหมือนกับวิธีที่สอง เพียงแต่ไม่ต้องเขียนภายใต้แท็ก style โดยสามารถนำมารวมเข้ากับเว็บเพจได้โดยใช้แท็ก <link>
span {
     color:red;
     font-weight: bold;
}

โค้ดด้านบนเราจะเขียนใส่แฟ้ม style.css ไว้ และใน HTML ของเราจะเป็นแบบนี้
<!DOCTYPE HTML>
<html>
   <head>
      <meta charset=utf-8>
      <link rel=stylesheet href=style.css>
      <title></title>
   </head>
   <body>
   </body>
</html>

ซึ่งแท็ก <link rel=stylesheet href=style.css> ก็จะเป็นการรวมเอา CSS เข้ามาใช้ในเว็บเพจของเรานั่นเอง

สำหรับบทความในชุดนี้ผมจะเน้นไปที่การเขียน CSS ในแบบที่สองเป็นหลักนะครับ
^