บทที่ 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 ในแบบที่สองเป็นหลักนะครับ