Unordered list items (<ul>) บนเว็บมี round bullet points default แต่ถ้าอยากลบ bullet points เช่นตอนสร้าง navigation component? HTML structure ตัวอย่างสำหรับ navigation/menu: ลบ bullet points ต้อง override default list-style-type: disc; เป็น none: nav ul { list-style-type: none; } หมายเหตุ: co

เรียนรู้เพิ่ม linear gradient color ให้ text elements ด้วย CSS และหลีกเลี่ยงข้อผิดพลาดทั่วไป ต้องใช้ CSS properties 3 ตัว: background -webkit-background-clip -webkit-text-fill-color ทำไมใช้ background property สำหรับสีข้อความ? วิธีนี้ดู hacky แต่ทำงานได้จริง! ตัวอย่าง: linear gradient ซ้ายไปขวา บน

เพื่อสไตล์ placeholder text ของ HTML input element ด้วย CSS ต้อง target pseudo-element attribute ด้วย CSS pseudo selector :: Input element ธรรมดาพร้อม placeholder text <input type=text placeholder=Hello there!> Placeholder text ด้วย default browser styling: CSS ใช้ CSS ::placeholder selector

เรียนรู้วิธีปรับ kerning ด้วย CSS ถ้า web font ที่เลือกมี kerning data เบราว์เซอร์จะ auto-determine ว่าควร apply font-kerning หรือไม่ ผ่าน font-kerning property ค่า default auto: font-kerning: auto; คือ เบราว์เซอร์อาจตัดสินใจ apply kern แม้ font มี kerning data built-in (เหตุผลบางอย่าง) อยากให้แน่ใจ

font-stretch CSS property ทำให้ข้อความแคบลง (condensed) หรือกว้างขึ้น (expanded) เรียกว่า condensed หรือ expanded fonts Condensed fonts ตัวอักษร stroke-width แคบ letter-spacing/leading แคบกว่าปกติ Expanded fonts ตัวอักษร stroke-width กว้างกว่าปกติสัดส่วนกับความสูง font-stretch property values: ul

CSS font-style property ให้ใช้ font styles 3 แบบ: normal, italic, oblique: .normal{ font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } normal: default roman/regular font style italic: font ตวางขวาเล็กน้อย ใช้เน้น oblique: font ตวางขวาเล็กน้อย ใช้เน้น Italic และ

เรียนรู้การใช้ CSS font-variant property สำหรับ small caps letters — และว่าควรใช้ small caps ไหม CSS font-variant property ระบุว่าข้อความแสดงเป็น normal text case หรือ small-caps font มี 3 ค่า: normal (default text case) inherit small-caps การใช้งานพื้นฐาน: .small-caps { font-variant: small-caps;

เรียนรู้การใช้ CSS @import rule เพื่อ import stylesheets CSS @import at-rule ให้นำเข้า CSS stylesheets เข้าอีก stylesheet หนึ่ง เหมาะสำหรับเว็บที่ codebase ใหญ่/เติบโต การใช้งานพื้นฐาน: @import url(variables.css); วิธีนี้แยก CSS styles เป็นไฟล์ย่อย: variables, typography, colors, spacing แทนที่จะรวม

เรียนรู้วิธีวางอีเลเมนต์ไว้ด้านล่างของ container ด้วย CSS HTML มีความสัมพันธ์ parent-child วางอีเลเมนต์ล่าง container ต้องใช้: position: relative; (parent) position: absolute; (child) bottom: 0; (child) ตัวอย่าง: .parent { position: relative; } .child { position: absolute; bottom: 0; } เพื่อให้เห

เพื่อตั้งค่า gradient background ใน CSS ให้เพิ่มฟังก์ชัน linear-gradient() ในคุณสมบัติ background ลองสร้าง box class ทดสอบ: .box { width: 200px; height: 200px; background: linear-gradient(yellow, red); } ผลลัพธ์: สลับลำดับสีใน linear-gradient เพื่อเปลี่ยนสีเริ่มต้นและจบ: /* เริ่มแดง จบเหลือง */ bac

เรียนรู้ความแตกต่างระหว่างสี RGB และ RGBa ใน CSS และวิธีใช้ RGBa สร้าง UI components สวยงาม ดึงดูดสายตา RGB และ RGBa เป็นโมเดลสี 2 แบบใน CSS ใช้แทน Hex Code (เช่น #282828) ความแตกต่างคืออะไร? RGB = Red, Green, Blue RGBa = Red, Green, Blue, และ Alpha Alpha คือ transparency channel ควบคุมความโปร่งใส

เรียนรู้การออกแบบ UI Card component เรียบง่าย สวยงาม ด้วย HTML และ CSS พร้อมเทคนิค linear-gradient ทำให้ข้อความเด่นขึ้นโดยไม่ทำให้การ์ดมืดเกินไป UI Card เป็น UI component ที่ทำหน้าที่เหมือน อาหารว่าง บนเว็บไซต์ โดยทั่วไปประกอบด้วยข้อความ รูปภาพ ไอคอน และ interactive elements (ปุ่มหรือลิงก์) UI Card

เรียนรู้วิธีใช้งานคุณสมบัติ padding ใน CSS คุณสมบัติ padding ใน CSS ใช้ควบคุมปริมาณพื้นที่ ภายใน อีเลเมนต์ HTML ระหว่างเนื้อหาและขอบ (border) padding มักสับสนกับคุณสมบัติ margin ซึ่งเพิ่มพื้นที่ ภายนอก ขอบของอีเลเมนต์ (ตรงข้ามกับ padding) พื้นฐาน CSS Padding นี่คือปุ่มพร้อมป้ายข้อความ (เนื้อหา): <

เรียนรู้ความแตกต่างระหว่าง margin และ padding ใน CSS Margin vs Padding เริ่มจากนิยามที่สั้นที่สุด: margin เพิ่มพื้นที่ภายนอกขอบ (border) ของอีเลเมนต์ HTML padding เพิ่มพื้นที่ภายในขอบ (border) ของอีเลเมนต์ HTML เมื่อคุณนำ margin หรือ padding ไปใช้กับอีเลเมนต์ HTML ทั้งสองจะส่งผลต่ออีเลเมนต์ต่างกัน

เรียนรู้วิธีใช้ CSS shorthand properties เพื่อให้ stylesheets ของคุณใช้พื้นที่น้อยลง CSS shorthand properties ให้คุณเขียนน้อยลงแต่ทำได้มากขึ้น สมมติคุณอยาก style h1 element ด้วย font-family Georgia, font-size 42 pixels, และ line-height 1.25 มาดู normal CSS method ก่อน: h1 { font-family: Georgia,

HTML มี attribute ชื่อ preload ที่ให้คุณบอก browser hint เกี่ยวกับวิธีและสำคัญกว่า เมื่อไหร่ ที่ควร load assets เมื่อ page loads preload attribute ใช้ได้กับหลาย HTML elements ตัวอย่าง คุณเพิ่มให้ <link> element เพื่อให้ browsers เริ่ม fetch CSS stylesheet ตั้งแต่ต้น อย่า ใช้ preload attribute

เรียนรู้วิธีใช้ CSS box-sizing property เพื่อควบคุมว่า browser คำนวณและ render width และ height ของ HTML elements ยังไง box-sizing (content-box vs border-box) CSS box-sizing property มี 2 ค่า: content-box (default) border-box ทั้งสองค่า box-sizing ส่งผลต่อวิธีที่ browser คำนวณและ render ขนาด HTML

เรียนรู้วิธีใช้ HSL และ HSLa colors ใน CSS และความแตกต่างจาก RGB/RGBa และ Hex HSL และ HSLa เป็น color methods ใน CSS ที่ใช้ alternative ของ Hex หรือ RGB/RGBa เพื่อ apply สีที่ real-world มากขึ้นให้เว็บไซต์ HSL และ HSLa ค่อนข้างใหม่ในโลก CSS แต่ในโลกสีทั่วไป มันมีมาตั้งแต่dekade 1970s HSL vs HSLa: H

เรียนรู้วิธีใช้ hexadecimal colors (เรียกว่า hex colors ใน CSS) Hexadecimal notation (หรือ hex color notation) เป็นวิธีแสดง RGB colors แบบ alternative Hex color notation ระบุใน 3 บล็อก แต่ละบล็อก 2 ค่า: RR (Red) GG (Green) BB (Blue) รวมกันเป็น #RRGGBB ในภาษากรีก Hexa หมายถึงเลข 6 และเห็นได้ว่า RRG

มี CSS keywords หลายตัวที่กำหนดสีด้วยชื่อจริงแทนตัวเลข นี่คือรายชื่อ CSS named colors อย่างเป็นทางการจนถึงปัจจุบัน: aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cya