พื้นฐานการเขียน CSS เบื้องต้น สำหรับปรับแต่งหน้าเว็บไซต์อย่างง่ายด้วยตัวเอง

ออกตัวก่อนว่า สรุปการเรียนรู้พื้นฐาน CSS อันนี้ เป็นการประมวลจากประสบการณ์การทำงาน ซึ่งอาจไม่ตรงกับหลักการเรียน ผู้อ่านที่สนใจเรื่องการเขียน CSS ควรหาข้อมูลเพิ่มเติมประกอบการศึกษาด้วยตัวเองเพิ่มเติมด้วย

CSS เป็นคำย่อมาจาก Cascading Style Sheets เป็นการเขียนชุดคำสั่งที่เกี่ยวกับการตกแต่งหน้าตาเว็บไซต์ โดยเป็นโค้ดส่วนที่แยกออกมาจากโค้ด HTML

ในไอเดียของผมเอง มองว่า HTML เอาไว้ทำ Markup ของเนื้อหา จัดลำดับความสำคัญของข้อมูล ว่าตำแหน่งไหนเป็นข้อมูลสำคัญ ส่วนไหนเป็นหัวข้อหลัก พวกแท็ก <h1> <p> <div> โดยมุ่งเน้น "ให้เครื่องอ่าน" -- ส่วน CSS เป็นการจัดการกับสีสัน ตำแหน่งการจัดวาง มุ่งเน้น "ให้คนดู" เพื่อความสวยงาม

การเขียน CSS ทำได้ใน 3 ลักษณะ

  1. Inline คือการแทรกโค้ดคำสั่ง CSS เข้าไปในแท็ก HTML โดยตรง เช่น <div style="padding: 10px;"> เป็นต้น
  2. Internal เป็นการนำชุดคำสั่ง CSS ที่ใช้ทั้งหมด เอามารวมไว้ในส่วนของ <head> ของหน้าเพจนั้นๆ เพื่อสะดวกในการแก้ไข โดยจะมีการใช้ id และ class ในการอ้างอิงคำสั่ง (ดูภาพประกอบ 1)
  3. External เป็นการแยกเอาชุดคำสั่ง CSS ทั้งหมด ออกไปเป็นอีกไฟล์ .css ภายนอก แล้วทำการ link กลับมาที่ตัว HTML ด้วยคำสั่ง <link> (ดูภาพประกอบ 2)

ภาพประกอบ 1 การเขียน CSS แบบ Internal
เขียน CSS แบบ Internal ใน <head>

ภาพประกอบ 2 การเขียน CSS แบบ External
เขียน CSS แบบ External และ <link> ไฟล์ style.css เข้ามาแสดงผล