ตกแต่งด้วย CSS หน้าก่อน หน้าถัดไป ตกแต่งด้วย CSS CSS ย่อมาจากคำว่า Cascading Style Sheets โดยทั่วไปก็จะเรียก CSS หรือ Style Sheets CSS ทำหน้าที่บอกถึงรูปลักษณ์การแสดงผลของ HTML Element CSS สามารถกำหนดการแสดงผลของ HTML ได้หลายๆ หน้า โดยใช้ CSS เพียงไฟล์เดียว CSS ใส่ใน HTML ได้ 3 วิธีด้วยกัน คือ Inline โดยใช้ Attribute style ใน HTML Element Internal โดยใช้ Element <style> ในส่วนของ <head> External โดยใช้ไฟล์ CSS แล้วลิงก์ไฟล์เข้ามาใน HTML วิธีนี้เป็นวิธีที่นิยมมากที่สุด Inline CSS Inline CSS ใช้ในการตกแต่ง HTML Element นั้นๆ เพียงอันเดียว โดยกำหนดค่าใน Attribute style ของ Element นั้นๆ ตัวอย่าง ลองเขียนโค้ด Internal CSS Internal CSS ใช้ในการตกแต่งหน้าเว็บนั้นๆ เพียงหน้าเดียว โดยกำหนดค่าใน Element <style> ในส่วนของ <head> ตัวอย่าง ลองเขียนโค้ด External CSS External CSS สามารถใช้ตกแต่งหน้าเว็บได้หลายๆ หน้า ด้วยการแก้ External CSS เพียงไฟล์เดียว สามารถทำให้หน้าเว็บทั้งเว็บไซต์ซึ่งอาจมีหลายร้อยหลายพันหน้าเปลี่ยนได้ โดยลิงก์ไฟล์ CSS เข้ามาใน HTML ในส่วนของ <head> ตัวอย่าง ลองเขียนโค้ด External CSS สามารถเขียนด้วยโปรแกรมอะไรก็ได้ ซึ่งใช้ภาษา CSS ในการเขียน ไม่ใช่ HTML และบันทึกเป็นไฟล์นามสกุล .css นี่คือโค้ดภายในไฟล์ styles.css ตัวอย่าง ตัวอักษร (Font) property color ใช้ในการกำหนดสีตัวอักษร property font-family ใช้ในการกำหนดประเภทตัวอักษร property font-size ใช้ในการกำหนดขนาดตัวอักษร ตัวอย่าง ลองเขียนโค้ด กรอบ (Border) property border ใช้ในการกำหนดค่ากรอบ ตัวอย่าง ลองเขียนโค้ด ช่องว่างภายในกรอบ (Padding) property padding ใช้ในการกำหนดขนาดช่องว่างระหว่างกรอบและข้อความภายใน ตัวอย่าง ลองเขียนโค้ด ระยะห่าง (Margin) property margin ใช้ในการกำหนดระยะห่างภายนอกกรอบ ตัวอย่าง ลองเขียนโค้ด กำหนด Attribute id กำหนด id ให้กับ Element ได้ด้วยการใช้ Attribute id ตัวอย่าง ลองเขียนโค้ด id ในแต่ละหน้าเว็บต้องไม่ซ้ำกัน CSS จึงจะเลือก Element ได้ถูกต้อง ถ้าเกิดซ้ำกัน CSS จะเลือกเฉพาะ id ที่ประกาศหลังสุด กำหนด Attribute class กำหนด class ให้กับ Element ได้ด้วยการใช้ Attribute class ตัวอย่าง ลองเขียนโค้ด id ในแต่ละหน้าเว็บต้องไม่ซ้ำกัน CSS จึงจะเลือก Element ได้ถูกต้อง ถ้าเกิดซ้ำกัน CSS จะเลือกเฉพาะ id ที่ประกาศหลังสุด การอ้างอิงไฟล์ External CSS สามารถอ้างอิงได้ทั้งภายในเว็บไซต์ตัวเอง หรือจะเว็บไซต์คนอื่นก็ได้ ตัวอย่างนี้ใช้ URL เต็มเพื่อลิงก์ไปหา CSS เว็บไซต์อื่น ตัวอย่าง ลองเขียนโค้ด ตัวอย่างนี้ใช้ลิงก์ไปหา CSS ในเว็บไซต์ตัวเอง ตัวอย่าง ลองเขียนโค้ด ตัวอย่างนี้ใช้ลิงก์ไปหา CSS ในเว็บไซต์ตัวเองที่อยู่ในโฟวเดอร์เดียวกัน ตัวอย่าง ลองเขียนโค้ด บทสรุป ใช้ Attribute style เพื่อเขียน Inline CSS ใช้ <style> เพื่อเขียน Internal CSS ใช้ <link> เพื่อเขียน Internal CSS ใช้ <head> เพื่อเก็บ Element <style> และ <link> property color ใช้กำหนดสีตัวอักษร property font-family ใช้กำหนดประเภทตัวอักษร property font-size ใช้กำหนดขนาดตัวอักษร property border ใช้กำหนดกรอบ property padding ใช้กำหนดช่องว่างภายในกรอบ property margin ใช้กำหนดระยะห่างภายนอกกรอบ หน้าก่อน หน้าถัดไป