วันหนึ่งเมื่อต้นเดือนมิถุนายน 2556 ได้มีการแซวกันว่าจะมีการอธิบายยังไงให้เข้าใจ CSS ได้อย่างง่ายๆ แต่พอเอาเข้าจริงจะให้บอกกันให้เข้าใจง่ายๆ มันก็ชักจะไม่ใช่เรื่องง่ายซักเท่าไหร่ จะว่าไปเจ้า CSS ก็น่าจะคล้ายๆ กับการแต่งตัว ที่มีชุดสำเร็จรูปไว้แล้วว่า จะแต่งยังไงให้มันเข้าชุด เข้าเซ็ตกัน อย่างดูดี มีสไตล์ (มั้ง)
ทีนี้ลองมาดูกันว่า CSS ที่เค้าพูดๆ กัน มันคืออะไรกันแน่…
CSS (Cascading Style Sheets ) คือ ชุดคำสั่งที่ใช้สำหรับกำหนดการแสดงผลข้อมูลหน้าเว็บเพจ เป็นมาตราฐานหนึ่งของ W3C ที่กำหนดขึ้นมาเพื่อใช้ในการปรับแต่งหน้าเอกสารเว็บโดยเฉพาะ การใช้งาน CSS จะช่วยเพิ่มความสามารถให้กับ HTML เดิม ที่เราใช้งานกันอยู่ในปัจจุบัน เนื่องจาก CSS มีความสามารถในการปรับแต่งการแสดงผลข้อมูลหน้าเว็บเพจที่ดีกว่า HTML ….(นั่น…อ่านแล้วยิ่งเข้าใจยากเข้าไปซะอีก)
แล้ว CSS ทำอะไรได้บ้าง
– CSS สามารถกำหนดขนาดของ Font ได้ เมื่อผู้ที่เข้าชมเว็บไซต์ของเราปรับขนาด Font ที่ Browser ของเขาที่ขนาดใดก็ตาม CSS ที่เรากำหนดไว้ก็ยังคงแสดงผลขนาดของ Font ตามขนาดที่เรากำหนดไว้เสมอ ทำให้เว็บเพจของเราไม่เปลี่ยนไปตามที่ผู้เข้าชมเว็บไซต์ปรับเปลี่ยน เพราะฉะนั้นหน้าตาของเว็บเพจของเราก็จะเหมือนที่เราได้กำหนดไว้ ไม่เปลี่ยนโฉม…
– CSS ทำให้การปรับปรุงเว็บเพจในส่วนของการแสดงผลทำได้รวดเร็วขึ้น เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องตามแก้ที่ HTML tag ทั้งหมด เพราะเราสามารถปรับปรุง แก้ไขการแสดงผลได้จากจุดเดียว แล้วทำให้หน้าเว็บเพจนั้นเปลี่ยนแปลงไปตามที่แก้ไขได้
– CSS สามารถกำหนด Background ให้อยู่ในตำแหน่ง หรือให้มีรูปแบบตามที่เราต้องการได้
– CSS สามารถควบคุมการแสดงผลให้เหมือนหรือใกล้เคียงกันได้ในหลายๆ Browser
– อื่นๆ อีกมากมาย
การใช้งาน CSS ทำได้ยังไง

คำสั่งของ CSS ประกอบด้วยส่วนหลักๆ คือ Selector, Property และ Value
– Selector ใช้สำหรับการอ้างอิง ประกอบไปด้วย ชื่อ Class หรือชื่อ ID หรือชื่อ TAG HTML
– Property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล โดยมีชื่อ Properties และตามด้วย Value เพื่อกำหนดค่าให้แก่คุณสมบัตินั้น และระหว่างชื่อ Properties กับ Value จะถูกคั่นด้วยเครื่องหมาย colon ( properties:value )
– Value เป็นค่าที่กำหนดให้กับ Property ต่างๆ เช่น color, font เป็นต้น
คุณสมบัติภายใน 1 Class จะมีได้มากกว่า 1 ตามที่เรากำหนด และ Properties ในแต่ละ Properties จะถูกคั่นด้วยเครื่องหมาย semi-colon ( ; ) และเราต้องเขียนคุณสมบัติของ CSS นั้นไว้ภายในเครื่องหมายปีกกา { …. } เท่านั้น
เราลองมาดูตัวอย่างของ CSS กันซักนิด
(ในที่นี้ยกตัวอย่าง CSS ของบล็อกหอสมุดพระราชวังสนามจันทร์ ในส่วน Footer)

 
ดูดูไปมันก็ไม่ง่ายซักเท่าไหร่ อาจทำให้ปวดหัวไปเลยด้วยซ้ำ แต่หากเข้าใจก็คงทำได้ไม่ยาก แต่จะว่าไป ถ้าให้เขียน CSS ขึ้นมาเองทั้งหมดก็คงไม่ไหว เพราะเราก็ไม่ใช่โปรแกรมเมอร์ หรือคนที่มีความเข้าใจใน CSS อย่างลึกซึ้งขนาดนั้น  😉
 
ที่มา…ที่ไป มาจากหลายแหล่ง ทั้งหนังสือ ทั้งบทความ ทั้งเว็บไซต์ … ขออภัยที่ไม่สามารถเอ่ยนามแหล่งต่างๆ ได้