css เขียนอย่างไร

ถ้าเพิ่งเริ่มหัดทำเว็บ แล้วสงสัยว่า “css เขียนอย่างไร” แบบไม่อยากแยกไฟล์ก่อน วิธีที่ง่ายสุดคือเขียน CSS ไว้ในแท็ก <style> ภายในไฟล์ HTML เลย ซึ่งส่วนใหญ่จะวางไว้ใน <head> เพื่อให้สไตล์โหลดก่อนหน้าเว็บแสดงผล ทำให้หน้าไม่กระพริบ/เปลี่ยนสไตล์ทีหลัง 1) โครงสร้างพื้นฐานของ html style เวลาเขียนจะหน้าตาประมาณนี้ <head> <style> /* เขียนกฎ CSS ที่นี่ */ </style> </head> สิ่งที่ควรจำคือ ใน <style> ไม่ต้องใส่แท็ก HTML อื่นๆ แทรก และควรคอมเมนต์ด้วย /* */ (ไม่ใช่ <!-- -->) 2) css style เขียนกฎยังไงให้ถูก CSS จะประกอบด้วย “selector” + “{ property: value; }” เช่น h1 { color: blue; text-align: center; } หมายถึงเลือกแท็ก h1 ทุกตัว แล้วทำให้ตัวอักษรเป็นสีน้ำเงินและจัดกึ่งกลาง 3) ตัวอย่างที่เจอบ่อย: ปรับขนาดตัวอักษรและระยะห่าง p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; } อันนี้ช่วยให้อ่านย่อหน้าได้สบายขึ้น (ฉันใช้บ่อยมากเวลาเขียนบทความ/หน้าแนะนำ) 4) เลือกแบบ class และ id (แนะนำเวลาหน้าเริ่มยาว) ถ้าไม่อยากให้ทุก p ถูกเปลี่ยนเหมือนกัน ให้ใช้ class .highlight { background: #fff3b0; padding: 8px; } แล้วไปใส่ใน HTML ว่า <p class="highlight">...</p> ส่วน id จะใช้กับองค์ประกอบที่มีชิ้นเดียวในหน้า เช่น #mainTitle { color: blue; } 5) วาง <style> ตรงไหนถึงเหมาะ - วางใน <head>: เหมาะสุดสำหรับหน้าเดียว/ทดลองโค้ด - ถ้า CSS เยอะ: ควรแยกเป็นไฟล์ .css แล้วใช้ <link rel="stylesheet" href="style.css"> (ดูแลง่ายกว่า) 6) ทริคเล็กๆ ที่ช่วยลดพลาด - อย่าลืมปิดวงเล็บปีกกา } และใส่ ; หลังค่าแต่ละบรรทัด - ถ้า style ไม่ทำงาน ให้เช็กสะกด selector (h1 กับ .h1 คนละความหมาย) - ลองเปิด DevTools (Inspect) ดูว่ากฎไหนถูก override อยู่ สรุปคือ tag <style> เป็นวิธีเขียน style css ที่เร็วและตรงไปตรงมาสำหรับเริ่มต้น โดยเฉพาะตอนฝึกปรับสี (color), ขนาดตัวอักษร (font-size) และการจัดวาง (text-align/margin) พอเริ่มใช้จริงหลายหน้า ค่อยย้ายไปไฟล์ CSS แยกจะทำให้จัดการง่ายขึ้นมาก