สร้าง Side Navigation ที่ขยายออกมาเมื่อ hover ด้วย CSS เพียงอย่างเดียว (ไม่ต้อง JavaScript) ตัวอย่างโค้ด <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1

คุณสมบัติ font-size กำหนดขนาดตัวอักษร รองรับหน่วย: px, em, rem, %, pt, cm, keyword (small, large, x-large, ฯลฯ) ค่าเริ่มต้น 16px (หรือ 12pt) Syntax Selector { font-size: <value>; } ตัวอย่างที่ 1: ใช้ em (Relative) <!DOCTYPE html> <html> <head> <style> div {   &n

. Selector (Class Selector) . (dot) เป็น class selector ใช้สร้างคลาสสไตล์ที่นำไปใช้กับ หลาย element ได้ # Selector (ID Selector) # (hash) เป็น ID selector ใช้จัดสไตล์ element เดียวที่มี id ตรงกัน (ID ต้องไม่ซ้ำในหน้าเว็บ) ตัวอย่างเปรียบเทียบ <!DOCTYPE html> <html> <head>  

สร้าง Icon Bar (แถบไอคอน) ด้วย CSS สำหรับ navigation หรือ toolbar ตัวอย่างที่ 1: Horizontal Icon Bar <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudf

สร้างไอคอนเมนู 3 แถบ (Hamburger Menu) ด้วย CSS เพียงอย่างเดียว ตัวอย่างโค้ด <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div {    width: 40px;    height: 7px;  

สร้าง Accordion (เนื้อหาขยาย/ยุบได้) ด้วย CSS สำหรับสไตล์ และ JavaScript สำหรับการ toggle ตัวอย่างโค้ดสมบูรณ์ <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo {    background

CSS มีคุณสมบัติเฉพาะสำหรับจัดสไตล์ตาราง (<table>) และ element ภายใน คุณสมบัติหลักสำหรับตาราง คุณสมบัติคำอธิบาย bordershorthand ของ border-width, border-style, border-color border-collapseกำหนดว่าเซลล์มีเส้นขอบร่วมกัน (collapse) หรือแยกกัน (separate) caption-sideตำแหน่ง caption (top, bott

คุณสมบัติ border-style ใน CSS ใช้ระบุรูปแบบขอบขององค์ประกอบ สามารถกำหนดรูปแบบแต่ละด้านแยกได้ด้วย border-top-style, border-right-style, border-bottom-style, border-left-style ไวยากรณ์ (Syntax) Selector { border-style: /*value*/; } ตัวอย่างที่ 1: Border-style หลายรูปแบบ <!DOCTYPE html> <h

คุณสมบัติ border-color ใน CSS ใช้ระบุสีขอบขององค์ประกอบ สามารถกำหนดสีแต่ละด้านแยกได้ด้วย border-top-color, border-right-color, border-bottom-color, border-left-color ไวยากรณ์ (Syntax) Selector { border-color: /*value*/; } ตัวอย่างที่ 1: Border-color หลายสี <!DOCTYPE html> <html> <

คุณสมบัติ font-size ใน CSS สามารถกำหนดด้วยคีย์เวิร์ดแบบ Absolute (ขนาดคงที่) และ Relative (สัมพัทธ์กับพาเรนต์) เพื่อปรับขนาดข้อความตามต้องการ ไวยากรณ์ (Syntax) Selector { font-size: /*value*/; } ตารางคีย์เวิร์ดมาตรฐาน ลำดับค่า & คำอธิบาย 1medium - ขนาดกลาง (ค่าเริ่มต้น) 2xx-sma

คุณสมบัติ font-variant เป็น shorthand สำหรับคุณสมบัติย่อยๆ ได้แก่ font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian ไวยากรณ์ (Syntax) Selector { font-variant: /*value*/; } ตัวอย่างที่ 1: Small-caps และ All-petite-caps <!DOCTYPE h

CSS General Sibling Selector (~) ใช้เลือกองค์ประกอบ ทั้งหมด ที่อยู่หลังองค์ประกอบแรก โดยที่ทั้งคู่เป็นลูกของพาเรนต์เดียวกัน (ต่างจาก Adjacent Sibling + ที่เลือกแค่ตัวถัดไปทันที) ไวยากรณ์ (Syntax) element ~ element { /* declarations */ } ตัวอย่างที่ 1: p ~ ul (ul ทุกตัวหลัง p) <!DOCTYPE html&g

CSS Grouping Selector ใช้เลือกหลายองค์ประกอบและจัดสไตล์ร่วมกัน ลดโค้ดซ้ำและความพยายามในการประกาศสไตล์ร่วมสำหรับแต่ละองค์ประกอบ แยกตัวเลือกแต่ละตัวด้วยจุลภาค (comma) ไวยากรณ์ (Syntax) element, element { /* declarations */ } ตัวอย่างที่ 1: จัดกลุ่ม article, p, img <!DOCTYPE html> <html>

คุณสมบัติ color ใน CSS ใช้เปลี่ยนสีข้อความขององค์ประกอบ สามารถระบุค่าเป็นชื่อสีมาตรฐาน, rgb(), rgba(), hsl(), hsla() และค่า hexadecimal ไวยากรณ์ (Syntax) Selector { color: /*value*/; } ตัวอย่างที่ 1: ใช้ RGBA, HSL, Hex <!DOCTYPE html> <html> <head> <style> div { hei

เราสามารถกำหนดสีสำหรับข้อความ ขอบ และพื้นหลังขององค์ประกอบได้ด้วย CSS คุณสมบัติ color ใช้ระบุสีข้อความขององค์ประกอบ ไวยากรณ์ (Syntax) Selector { color: /*value*/; } ตัวอย่างที่ 1: สีข้อความและพื้นหลังบน div และ p <!DOCTYPE html> <html> <head> <style> div { color: se

เราสามารถกำหนดสีขอบ (border-color) และสีขอบนอก (outline-color) ได้ ต่างจาก border outline ไม่ใช้พื้นที่ ไวยากรณ์ (Syntax) /* กำหนดสีขอบ */ Selector { border-color: /*value*/; } /* กำหนดสีขอบนอก */ Selector { outline-color: /*value*/; } ตัวอย่างที่ 1: Border-color หลายสี + Outline <!DOCTYPE htm

คุณสมบัติ text-decoration ใน CSS ใช้ตกแต่งข้อความขององค์ประกอบที่เลือก สามารถเพิ่ม line-through, overline, underline เป็นต้น เป็น shorthand ของ text-decoration-line, text-decoration-color, text-decoration-style ไวยากรณ์ (Syntax) Selector { text-decoration: /*value*/; } ตัวอย่างที่ 1: Overline บน

โดยค่าเริ่มต้น ลิงก์ทุกตัวใน HTML จะมีขีดเส้นใต้ (underline) สามารถลบได้ด้วยคุณสมบัติ text-decoration ใน CSS ไวยากรณ์ (Syntax) Selector { text-decoration: /*value*/; } ตัวอย่างที่ 1: ลบ underline และเพิ่ม italic <!DOCTYPE html> <html> <head> <style> p { padding: 5px

คุณสมบัติ text-transform ใน CSS ใช้กำหนดการเปลี่ยนแปลงตัวพิมพ์ (capitalization) ของข้อความ รับค่า: capitalize, lowercase, uppercase, full-width, full-size-kana, none ไวยากรณ์ (Syntax) Selector { text-transform: /*value*/; } ตัวอย่างที่ 1: Uppercase, Lowercase, Capitalize <!DOCTYPE html> &l

เราสามารถจัดสไตล์ลิงก์ตามต้องการ แนะนำให้ลิงก์มีสไตล์ที่แยกจากข้อความปกติ สไตล์เริ่มต้นของเบราว์เซอร์สำหรับสถานะลิงก์ต่างๆ มีดังนี้: Link StateColor Active#EE0000 Focus#5E9ED6 หรือสีน้ำเงินคล้ายๆ กัน (Windows/Mac), #F07746 outline (Linux) ข้อความสีเดิม Hover#0000EE Link#0000EE