CSS คืออะไร? คู่มือสำหรับมือใหม่

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

CSS คืออะไร? 🎨

CSS (Cascading Style Sheets) คือ ภาษาที่ใช้ ตกแต่งหน้าตาของเว็บไซต์ ให้ดูดี มีสไตล์ ✨

ในแง่สถานการณ์สมมุติ :

• HTML = โครงกระดูกของเว็บ 💀
• CSS = เสื้อผ้า ทรงผม เมคอัพ ที่ทำให้เว็บดูดีมีสไตล์ 💅🏻

ในแง่การโค้ดเขียน :

• HTML บอกว่า “ตรงนี้คือข้อความนะ”
• CSS จะบอกว่า “งั้นให้มันเป็นตัวหนา สีชมพู ขนาดใหญ่หน่อยละกัน!”

CSS ทำอะไรได้บ้าง? 🌈

• เปลี่ยนสีตัวอักษรและพื้นหลัง
• จัดระยะห่างของกล่องข้อความ หรือใส่กรอบ
• ปรับขนาดตัวอักษร ฟอนต์ และจัดตำแหน่ง
• สร้าง animation หรือ effect เวลากดปุ่ม
• ทำให้เว็บใช้งานง่ายและดูดีในทุกอุปกรณ์ รองรับการแสดงผลทั้งในหน้าจอคอมพิวเตอร์, Laptop และมือถือ

ใช้ CSS ตกแต่งหน้าเว็บไซต์ยังไง? 👩🏻‍🎨

ก่อนเริ่มแต่งเว็บให้สวย เราต้องเข้าใจก่อนว่า CSS ไม่ได้ทำงานลอย ๆ นะ!

มันจะเลือก "ตกแต่ง" สิ่งที่ HTML สร้างไว้ โดยอ้างอิงจากสิ่งที่เรียกว่า Selector

CSS ใช้สิ่งที่เรียกว่า Selector เพื่อบอกว่าเราจะตกแต่ง "ส่วนไหน" ของเว็บ

ตัวอย่างเช่น ตอนนี้เรามีโค้ดทั้งหมด 3 ชุด

ชุดที่ 1 : Tag selector คือเราทำการเลือกตกแต่ง tag p ทั้งหมด

HTML
<p>Welcome to our website</p>
<p>ยินดีต้อนรับเข้าสู่เว็บไซต์ของเรา!</p>

CSS
p {
  color: green;
}

ผลลัพธ์คือ tag p ทั้งหมดจะถูกเปลี่ยนเป็นสีเขียว

ชุดที่ 2 : Class selector คือเราทำการเลือกตกแต่งส่วนของ tag p ที่มี class ชื่อว่า introduction เท่านั้น

HTML
<p>Welcome to our website</p>
<p class="introduction">ยินดีต้อนรับเข้าสู่เว็บไซต์ของเรา!</p> 

CSS
.introduction {
  color: green;
}

ผลลัพธ์คือ tag ที่มีการระบุ class เป็น introduction จะถูกเปลี่ยนเป็นสีเขียว

ชุดที่ 3 : Id selector คือเราทำการเลือกตกแต่งส่วนของ tag p ที่มี id ชื่อว่า introduction เท่านั้น

HTML
<p>Welcome to our website</p>
<p id="introduction">ยินดีต้อนรับเข้าสู่เว็บไซต์ของเรา!</p> 

CSS
#introduction {
  color: green;
}

Property คือคำสั่งในการตกแต่ง 📚

เราใช้ Selector เพื่อเลือกว่าจะตกแต่งส่วนไหน และใช้ Properties ระบุคำสั่งในการตกแต่ง เช่น

HTML:

<p>ยินดีต้อนรับเข้าสู่เว็บไซต์ของเรา!</p>

CSS:

p {
  color: green;
  background-color: pink; 
  font-size: 24px;
}

จากโค้ดด้านบน เรามีการกำหนดเลือก tag p เพื่อเลือกว่าจะตกแต่งส่วนไหน โดยใช้

• Property color กำหนดให้ตัวอักษรเป็นสีเขียว
• Property background-color กำหนดให้พื้นหลังเป็นสีชมพู
• Property font-size กำหนดให้ขนาดตัวอักษรเป็น 24 px

ผลลัพธ์ที่ได้หลังใช้ CSS

🎯สรุป

• CSS คือภาษาที่ใช้ "ตกแต่ง" หน้าตาของเว็บไซต์ เช่น สี ขนาด ระยะห่าง ฟอนต์ และการจัดวาง
• CSS ทำงานคู่กับ HTML โดยใช้ Selector เลือกว่าจะตกแต่งส่วนไหน แล้วใช้ Properties กำหนดหน้าตา
• มี Selector ให้เลือกหลายแบบ เช่น tag (p), class (.introduction ), id (#introduction )

ถ้า HTML คือโครงกระดูกของเว็บ

CSS ก็คือเสื้อผ้าหน้าผมที่ทำให้เว็บดูดีสุด ๆ 🥳