คุณสมบัติ font-style ใน CSS ใช้ระบุรูปแบบตัวอักษร: normal, italic, oblique ไวยากรณ์ (Syntax) Selector { font-style: /*value*/; } ตัวอย่างที่ 1: Italic และ Oblique <!DOCTYPE html> <html> <head> <style> h2 { font-style: italic; background-color: steelblue; color: whit

CSS อนุญาตให้กำหนดสีลิงก์ได้ คุณสมบัติ color ใช้กำหนดสีข้อความในองค์ประกอบ ลำดับ pseudo-selectors ที่ถูกต้อง: :link, :visited, :hover, :active (LVHA) ไวยากรณ์ (Syntax) Selector { color: /*value*/; } ตัวอย่างที่ 1: สีทั้ง 4 สถานะ + ::after <!DOCTYPE html> <html> <head> <st

Outline** ไม่ใช้พื้นที่ และแสดงรอบนอกขอบ (border) หากมี ใช้สำหรับไฮไลท์องค์ประกอบ และไม่สามารถระบุด้านแต่ละด้านได้** (ต่างจาก border) เช่นเดียวกับ border outline ไม่แสดงโดยค่าเริ่มต้น ในบางเบราว์เซอร์ เช่น Firefox องค์ประกอบที่โฟกัสจะแสดง outline บาง Border** ปรับแต่งได้ละเอียดกว่า สามารถจัดสไตล์แต

รูปแบบและตำแหน่งของ Unordered และ Ordered Lists สามารถจัดได้ด้วยคุณสมบัติ CSS: list-style-type, list-style-image, list-style-position (หรือ shorthand list-style) ไวยากรณ์ (Syntax) Selector { list-style: /*value*/; } ตัวอย่างที่ 1: จัดสไตล์ Ordered List <!DOCTYPE html> <html> <head

ใน HTML มีรายการ (Lists) 3 ประเภทหลัก: Unordered List <ul> - รายการแบบมีสัญลักษณ์ (bullet) ไม่มีลำดับเฉพาะ Ordered List <ol> - รายการแบบมีลำดับ (ตัวเลข/ตัวอักษร) Definition List <dl> - รายการแสดงนิยามของคำศัพท์ (<dt> term, <dd> definition) เราสามารถซ้อน (nest)

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

สำหรับขนาดข้อความที่ปรับขยายได้ (scalable) ใช้หน่วย em โดยค่าเริ่มต้น 1em = 16px (หรือ 12pt) ค่าของ em เป็น สัมพัทธ์กับขนาดฟอนต์ของพาเรนต์ ไวยากรณ์ (Syntax) Selector { font-size: /*value*/; } ตัวอย่างที่ 1: Div พาเรนต์ 1em, Span ลูก 2em <!DOCTYPE html> <html> <head> <style

เราสามารถใช้การผสมผสานระหว่าง เปอร์เซ็นต์ (%) และ em เพื่อกำหนดขนาดฟอนต์ขององค์ประกอบ เพื่อความเข้ากันได้ (compatibility) ที่ดีกว่า ทำให้ข้อความมีขนาดสม่ำเสมอข้ามเบราว์เซอร์ต่างๆ ไวยากรณ์ (Syntax) Selector { font-size: /*value*/; } ตัวอย่างที่ 1: Body ใช้ % แล้วลูกใช้ em <!DOCTYPE html> &l

คุณสมบัติ font-weight ใน CSS ใช้กำหนดความหนา (boldness) ของตัวอักษรในองค์ประกอบ ไวยากรณ์ (Syntax) Selector { font-weight: /*value*/; } ตัวอย่างที่ 1: คีย์เวิร์ด normal, bold, bolder <!DOCTYPE html> <html> <head> <style> div { margin: 3px; font-family: Ink Free; widt

คุณสมบัติ background-repeat ใน CSS ใช้กำหนดว่ารูปภาพพื้นหลังจะซ้ำอย่างไร ไวยากรณ์ (Syntax) Selector { background-repeat: /*value*/; } ตัวอย่างที่ 1: Repeat (ค่าเริ่มต้น) <!DOCTYPE html> <html> <head> <style> body { background-image: url(https://www.tutorialspo

CSS Adjacent Sibling Selector (+) ใช้เลือกองค์ประกอบที่เป็นพี่น้อง ติดกัน (adjacent) ขององค์ประกอบแรก เลือกได้เฉพาะองค์ประกอบที่อยู่ ทันทีหลัง ตัวเลือกแรก ไวยากรณ์ (Syntax) element + element { /* declarations */ } ตัวอย่างที่ 1: div ติดกัน <!DOCTYPE html> <html> <head> <st

คุณสมบัติ text-indent ใน CSS ช่วยกำหนดการเยื้องของบรรทัดแรกขององค์ประกอบ ไวยากรณ์ (Syntax) Selector { text-indent: /*value*/; } ตัวอย่างที่ 1: เยื้องพารากราฟ และหัวข้อแบบลบ <!DOCTYPE html> <html> <head> <style> div { display: flex; float: left; margin: auto; padding

คุณสมบัติ word-spacing ใน CSS ใช้ระบุช่องว่างระหว่างคำขององค์ประกอบ ไวยากรณ์ (Syntax) Selector { word-spacing: /*value*/; } ตัวอย่างที่ 1: เพิ่มช่องว่างระหว่างคำ div { word-spacing: 30px; width: 340px; height: 140px; border-radius: 5%; box-shadow: inset 0 0 15px blueviolet; }

CSS อนุญาตให้จัดสไตล์ลิงก์ตามต้องการ สามารถจัดรูปแบบข้อความ เพิ่มสี พื้นหลัง ขนาด และเพิ่มแอนิเมชันเพื่อเอฟเฟกต์ภาพที่น่าสนใจ ลำดับ pseudo-selectors ที่ถูกต้อง: :link, :visited, :hover, :active (จำได้ว่า LVHA - LoVe HAte) ตัวอย่างที่ 1: Hover Effect บนลิงก์ <!DOCTYPE html> <html> <h

คุณสมบัติ color ใน CSS ใช้กำหนดสีของข้อความในองค์ประกอบ ไวยากรณ์ (Syntax) Selector { color: /*value*/; } ตัวอย่างที่ 1: สีข้อความและพื้นหลังต่างกัน <!DOCTYPE html> <html lang=en> <head> <style> div { height: 100px; width: 200px; margin: 10px; display: fl

คุณสมบัติ text-align ใน CSS ใช้จัดตำแหน่งข้อความแนวนอนภายในองค์ประกอบ ได้ค่า left, right, center, justify ไวยากรณ์ (Syntax) Selector { text-align: /*value*/; } ตัวอย่างที่ 1: จัดข้อความใน div ต่างๆ <!DOCTYPE html> <html> <head> <style> div { margin: auto; padd

คุณสมบัติ z-index ใน CSS ใช้ควบคุมลำดับชั้น (stacking order) ขององค์ประกอบที่ทับซ้อนกัน z-index สามารถเป็นค่าบวกหรือลบได้ หมายเหตุ: หากองค์ประกอบที่ทับซ้อนกันไม่ได้ระบุ z-index องค์ประกอบที่อยู่ทีหลังในโค้ด HTML จะแสดงด้านบน ตัวอย่างที่ 1: Z-index แบบลบ (Negative) <!DOCTYPE html> <html>

CSS Pseudo-element ::first-letter เลือกตัวอักษรแรกของเนื้อหาในองค์ประกอบ แต่ไม่ทำงาน หากองค์ประกอบเป็น inline-level ตัวอย่างที่ 1: Drop Cap (ตัวอักษรแรกใหญ่) <!DOCTYPE html> <html> <head> <style> div { background-color: #32485d; border: 5px solid black; color: #9

Media Dependent Stylesheets คือสไตล์ชีทที่ใช้งานได้เฉพาะเมื่อ media type ตรงกับประเภทอุปกรณ์ที่แสดงเอกสาร สามารถสร้างได้ 3 วิธี: ใช้กฎ @media At-rules ใช้กฎ @import At-rules ใช้แอตทริบิวต์ media ในแท็ก HTML <link> ตัวอย่างที่ 1: ใช้ <link media> แยกไฟล์ Screen และ Print HTML Do

กฎ @media ใน CSS ใช้ระบุสไตล์ที่แตกต่างกันสำหรับประเภทสื่อ (media types) ที่ต่างกัน เช่น print, screen, all ในไฟล์สไตล์ชีทเดียวกัน มักตามด้วยรายการ media types คั่นด้วยจุลภาคและบล็อกการประกาศ CSS สำหรับ media เป้าหมาย ไวยากรณ์ (Syntax) @media not | only mediatype and (expressions) { CSS-Code; }