← Writing
Development & Cloud

CSS 101

เปลี่ยนหน้าเว็บ HTML ธรรมดา ให้สวยสะดุดตาด้วย CSS (ฉบับมือใหม่)

6 Dec 202530 min readChatGPTAI AgentDashboardHR
HTML & CSS Basics · Part 2 of 4

CSS 101

เปลี่ยนหน้าเว็บ HTML ธรรมดา ให้สวยสะดุดตาด้วย CSS (ฉบับมือใหม่)

จากบทความที่แล้ว เราได้ลองสร้าง “โครงบ้าน” ด้วย HTML กันไปแล้ว (ใครยังไม่อ่าน ย้อนไปดู HTML 101 ก่อนนะ!) แต่จะเห็นว่าหน้าเว็บของเรายังดูโล่งๆ ขาวๆ ดำๆ เหมือนบ้านปูนเปลือยที่ยังไม่ได้ทาสี

วันนี้ผมเลยสรุปเรื่อง CSS (Cascading Style Sheets) มาฝากครับ ถ้าเปรียบ HTML เป็นโครงสร้าง CSS ก็คือ “สถาปนิกและมัณฑนากร” ที่จะเข้ามารับหน้าที่ตกแต่ง ใส่สี จัดวางเฟอร์นิเจอร์ ให้บ้านของเราน่าอยู่ขึ้น

ในโพสต์นี้ เราจะเอาโค้ด HTML หน้าเว็บ GenAI เดิมของเรา มาอัปเกรดหน้าตาให้ดูโปรขึ้นทันตาเห็น ไปลุยกันเลยครับ! 👇

1) เข้าใจหลักการเขียน CSS (Concept)

ก่อนจะเขียนโค้ด เราต้องรู้ก่อนว่า CSS ทำงานยังไง การเขียน CSS ประกอบด้วย 2 ขั้นตอนหลักๆ คือ:

  1. เลือก HTML Element: จิ้มเลือกก่อนว่าอยากจะตกแต่งส่วนไหนของหน้าเว็บ (เช่น “ฉันอยากแต่งหัวข้อ h1”)
  2. กำหนด Set of Properties: สั่งว่าอยากให้เปลี่ยนเป็นแบบไหน (เช่น “เปลี่ยนสีเป็นสีแดง”, “ขยายตัวหนังสือให้ใหญ่ขึ้น”)

2) โครงสร้างคำสั่ง (CSS Syntax & Rule)

เพื่อให้ Browser เข้าใจคำสั่งของเรา เราต้องเขียนตามกฎไวยากรณ์ (Syntax) นี้ครับ

h1 {
color: red;
font-size: 24px;
}

  • Selector: ตัวระบุ Element ที่เราต้องการตกแต่ง (ในที่นี้คือ h1)
  • Curly Brackets { }: ปีกกาเปิด-ปิด ใช้ครอบชุดคำสั่งทั้งหมด
  • Declaration Block: พื้นที่ด้านในปีกกา คือส่วนที่เราประกาศคำสั่งต่างๆ ประกอบด้วย:
  • Property Name: คุณสมบัติที่จะเปลี่ยน (เช่น color, font-size)
  • Value: ค่าที่เรากำหนด (เช่น red, 24px)

ข้อควรระวัง: จบหนึ่งคำสั่งต้องปิดท้ายด้วย Semicolon **_;_** เสมอนะครับ!

3) วิธีนำ CSS ไปใช้ (Applying CSS)

3.1) External Stylesheet

วิธีที่นิยมที่สุดและเป็น Best Practice คือการทำ “External Stylesheet” หรือการแยกไฟล์ CSS ออกมาต่างหากครับ

  • ทำไมต้องแยกไฟล์? เพื่อให้โค้ดเป็นระเบียบ และไฟล์ CSS หนึ่งไฟล์สามารถนำไปใช้ตกแต่งหน้าเว็บ HTML ได้หลายหน้าพร้อมกัน (Reusable)
  • วิธีเชื่อมต่อ: เราจะใช้ Tag <link> ใส่ไว้ในส่วน <head> ของไฟล์ HTML

แบบฝึกหัด (Workshop)

มาลองวิชาด้วยการเปลี่ยนหัวข้อ h1 ให้เป็น สีแดง กันครับ

Step 1: สร้างไฟล์ CSS ใหม่ ให้สร้างไฟล์เปล่าขึ้นมา 1 ไฟล์ ตั้งชื่อว่า main.css (วางไว้คู่กับ index.html เลยครับ) แล้วพิมพ์โค้ดนี้ลงไป:

📄 ไฟล์: main.css

h1 {
color: red; /* สั่งให้ h1 ทุกตัวเป็นสีแดง */
}

Step 2: เชื่อมต่อไฟล์ใน HTML กลับมาที่ไฟล์ index.html ของเรา ให้เพิ่มโค้ด <link> เข้าไปในส่วน <head> ครับ

📄 ไฟล์: index.html

    <p>  
      <em>Generative AI (GenAI)</em> คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol>  
        <li>  
            เข้าไปที่ Website:   
            <a href="https://chatgpt.com/">ChatGPT</a>,   
            <a href="https://gemini.google.com/app?hl=th">Gemini</a>  
        </li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <hr>  
    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น   
        <strong>"ผู้ช่วย"</strong>  
        ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  

    <hr>  
    <h3>เกี่ยวกับผู้เขียน</h3>  
    <img src="Photo.png" alt="รูปภาพโปรไฟล์ของผู้เขียน Blog" width="200">  

    <h3>ภาพประกอบจาก Unsplash</h3>  
    <img src="https://plus.unsplash.com/premium_photo-1725907643701-9ba38affe7bb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="GenAI Concept Art" width="300">  

    <h3>การจัดระเบียบไฟล์ (File Paths)</h3>  
      
    <p>รูปที่เก็บใน Folder Image:</p>  
    <img src="Image/Inside_Folder.png" alt="Test Image inside folder" width="200">  

    <p>รูปจาก Drive C (Local Path):</p>  
    <img src="file:///C:/Users/ADMIN/Downloads/Tiktok/Outside_Folder.png" alt="Test Image outside" width="200">  

</body>

Step 3: ดูผลลัพธ์ กด Save ทั้งสองไฟล์ แล้ว Refresh หน้าเว็บดูครับ… ทาดา! 🎉 ตอนนี้หัวข้อ “What is Generative AI?” ของเราน่าจะกลายเป็น สีแดง เรียบร้อยแล้วครับ

Figure: Output จะเห็นได้ว่า h1 เป็นสีแดง

3.2) Internal Stylesheet

นอกจากจะแยกไฟล์เขียนแล้ว เรายังสามารถเขียนคำสั่ง CSS ฝังไว้ “ในไฟล์ HTML” ได้เลยครับ วิธีนี้เรียกว่า Internal Stylesheet

  • วิธีการ: เราจะใช้ Tag <style> ... </style> แล้วเขียนโค้ด CSS ไว้ข้างในนั้น
  • ตำแหน่ง: ต้องวางไว้ในส่วน <head> ของไฟล์ HTML
  • ข้อดี/ข้อเสีย: สะดวกสำหรับเว็บที่มีหน้าเดียว หรือต้องการแก้สไตล์เฉพาะหน้านั้นๆ แต่ถ้านำไปใช้ทำเว็บใหญ่ๆ โค้ด HTML จะรกและยาวมากครับ

แบบฝึกหัด (Workshop)

เมื่อกี้เราใช้ไฟล์ main.css (External) เปลี่ยน h1 เป็นสีแดงไปแล้ว คราวนี้เราจะใช้ Internal Style มาเปลี่ยน h2 ให้เป็น สีน้ำเงิน โดยไม่ต้องแตะไฟล์ CSS ครับ

Step 1: แก้ไขไฟล์ index.html เปิดไฟล์ index.html แล้วเพิ่ม Tag <style> เข้าไปใน <head> (อยู่ใต้ <link> หรือ <title> ก็ได้ครับ)

📄 ไฟล์: index.html

    <style>  
        h2 {  
            color: blue; /* สั่งให้ h2 เป็นสีน้ำเงิน */  
        }  
    </style> <!-- เพิ่ม code นี้ -->  

</head>  
<body>  
    <h1>What is Generative AI?</h1>  

    <p>  
      <em>Generative AI (GenAI)</em> คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol>  
        <li>  
            เข้าไปที่ Website:   
            <a href="https://chatgpt.com/">ChatGPT</a>,   
            <a href="https://gemini.google.com/app?hl=th">Gemini</a>  
        </li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <hr>  
    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น   
        <strong>"ผู้ช่วย"</strong>  
        ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  

    <hr>  
    <h3>เกี่ยวกับผู้เขียน</h3>  
    <img src="Photo.png" alt="รูปภาพโปรไฟล์ของผู้เขียน Blog" width="200">  

    <h3>ภาพประกอบจาก Unsplash</h3>  
    <img src="https://plus.unsplash.com/premium_photo-1725907643701-9ba38affe7bb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="GenAI Concept Art" width="300">  

    <h3>การจัดระเบียบไฟล์ (File Paths)</h3>  
      
    <p>รูปที่เก็บใน Folder Image:</p>  
    <img src="Image/Inside_Folder.png" alt="Test Image inside folder" width="200">  

    <p>รูปจาก Drive C (Local Path):</p>  
    <img src="file:///C:/Users/ADMIN/Downloads/Tiktok/Outside_Folder.png" alt="Test Image outside" width="200">  

</body>

Figure: Output จะเห็นได้ว่า h2 เป็นสีน้ำเงิน

3.3) Inline Style

วิธีสุดท้ายคือการเขียน CSS ฝังลงไปใน “ตัว Tag HTML โดยตรง” เลยครับ วิธีนี้จะเจาะจงที่สุด (Specific) และมีอำนาจเหนือกว่าทั้ง External และ Internal Stylesheet

  • วิธีการ: เพิ่ม Attribute ที่ชื่อว่า style="..." เข้าไปใน Tag ที่ต้องการ
  • ข้อดี: สะดวกเวลาต้องการแก้แก้จุดเล็กๆ จุดเดียวแบบด่วนๆ
  • ข้อเสีย: ไม่แนะนำให้ใช้จริง เพราะทำให้โค้ด HTML รกมาก และตามแก้ไขยากที่สุด

แบบฝึกหัด (Workshop)

เรามี H1 สีแดง (จากไฟล์แยก), H2 สีน้ำเงิน (จากส่วนหัว) ไปแล้ว… คราวนี้เราจะมาเปลี่ยน ย่อหน้าแรก (Paragraph) ให้เป็น สีเขียว ด้วย Inline Style กันครับ

Step 1: แก้ไขไฟล์ index.html ไปที่ <p> ตัวแรก (ที่อยู่ใต้ <h1>) แล้วเพิ่ม style="color: green;" เข้าไปครับ

📄 ไฟล์: index.html

    <style>  
        h2 {  
            color: blue;   
        }  
    </style>   

</head>  
<body>  
    <h1>What is Generative AI?</h1>  

    <p style="color: green;"> <!-- เพิ่ม code นี้ -->  
      <em>Generative AI (GenAI)</em> คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol>  
        <li>  
            เข้าไปที่ Website:   
            <a href="https://chatgpt.com/">ChatGPT</a>,   
            <a href="https://gemini.google.com/app?hl=th">Gemini</a>  
        </li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <hr>  
    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น   
        <strong>"ผู้ช่วย"</strong>  
        ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  

    <hr>  
    <h3>เกี่ยวกับผู้เขียน</h3>  
    <img src="Photo.png" alt="รูปภาพโปรไฟล์ของผู้เขียน Blog" width="200">  

    <h3>ภาพประกอบจาก Unsplash</h3>  
    <img src="https://plus.unsplash.com/premium_photo-1725907643701-9ba38affe7bb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="GenAI Concept Art" width="300">  

    <h3>การจัดระเบียบไฟล์ (File Paths)</h3>  
      
    <p>รูปที่เก็บใน Folder Image:</p>  
    <img src="Image/Inside_Folder.png" alt="Test Image inside folder" width="200">  

    <p>รูปจาก Drive C (Local Path):</p>  
    <img src="file:///C:/Users/ADMIN/Downloads/Tiktok/Outside_Folder.png" alt="Test Image outside" width="200">  

</body>

Figure: Output จะเห็นได้ว่า บรรทัดที่สองตัวอักษรจะเปลี่ยนเป็นสีเขียว

3.4) รู้จักกับ Default CSS (Browser Styles)

เคยสงสัยไหมครับ? ว่าทำไม <h1> ถึงตัวใหญ่และเป็นตัวหนาอัตโนมัติ ทั้งที่เรายังไม่ได้เขียนโค้ดสั่งมันเลย?

คำตอบคือ Web Browser ทุกตัว (Chrome, Safari, Edge) มี CSS แถมมาให้อยู่แล้ว ครับ เราเรียกสิ่งนี้ว่า User Agent Stylesheet เพื่อให้แน่ใจว่าเว็บจะอ่านรู้เรื่องแม้ผู้สร้างเว็บไม่ได้ตกแต่งอะไรเลย

🕵️‍♂️ วิธีแอบดู Default CSS (ใน Google Chrome)

เราสามารถเช็คได้ว่า Browser กำหนดค่าอะไรมาให้บ้าง ด้วยเครื่องมือ Developer Tools:

  1. คลิกขวา บนหน้าเว็บตรงไหนก็ได้ แล้วเลือกเมนู Inspect (ตรวจสอบ)
  2. หน้าต่าง Code จะโผล่ขึ้นมา ให้ดูที่แถบ Elements (ซ้ายมือ)
  3. คลิกเลือก Tag ที่อยากดู (เช่น <h1>)
  4. มองไปที่แถบขวาสุด เลือกแท็บ Computed

ในหน้านี้คุณจะเห็นค่า CSS ทั้งหมด (เช่น font-size, display, margin) ที่ Browser กำหนดมาให้เป็นค่าเริ่มต้นครับ

4) เจาะลึกเรื่อง Selectors

ถ้า CSS คือการตกแต่ง “Selector” ก็คือการ “ชี้เป้า” ครับ ว่าจะให้ไปตกแต่งที่ใคร? ในโลกของ CSS มีวิธีชี้เป้าหลายแบบ แต่ 3 แบบพื้นฐานที่ต้องรู้มีดังนี้ครับ:

4.1) Type Selector (เลือกจากชื่อ Tag)

คือการเรียกชื่อ Tag HTML ตรงๆ เลย วิธีนี้จะส่งผลกับ “ทุก Tag นั้นในหน้าเว็บ”

  • สัญลักษณ์ใน CSS: เขียนชื่อ Tag เลย (ไม่ต้องมีเครื่องหมายนำหน้า)
  • ตัวอย่าง: p, h1, div
  • เหมาะสำหรับ: การตั้งค่าภาพรวม เช่น อยากให้ย่อหน้าทั้งหมดในเว็บใช้ฟอนต์เดียวกัน

แบบฝึกหัด (Workshop)

โจทย์: เราอยากให้ย่อหน้า <p> ทุกตัวในเว็บ มีตัวหนังสือใหญ่ขึ้น อ่านง่ายขึ้น (เพิ่มระยะห่างบรรทัด) และเป็นสีส้ม

  • วิธีทำ: เปิดไฟล์ main.css แล้วเพิ่มโค้ดนี้ลงไป:

📄 ไฟล์: main.css

h1 {
color: red; /* สั่งให้ h1 ทุกตัวเป็นสีแดง */
}

/* เลือก tag p ทุกตัวในหน้าเว็บ /
p {
font-size: 18px; / ขยายตัวหนังสือ /
line-height: 1.6; / เพิ่มระยะห่างบรรทัดให้อ่านสบายตา /
color: orange; / เพิ่มสีตัวอักษร */
}

Figure: Output

4.2) Class Selector (เลือกจากชื่อกลุ่ม) — ⭐ ใช้บ่อยที่สุด!

ใช้สำหรับเลือกกลุ่ม Element ที่เราตั้งชื่อกลุ่ม (Class) เอาไว้

  • สัญลักษณ์ใน CSS: ใช้จุด . นำหน้าชื่อ
  • สัญลักษณ์ใน HTML: class="ชื่อคลาส"
  • เหมาะสำหรับ: สไตล์ที่ใช้ซ้ำๆ หลายที่ (เช่น ปุ่มกด, กล่องข้อความไฮไลท์, การจัดสีตัวอักษรเฉพาะกลุ่ม)

แบบฝึกหัด (Workshop)

โจทย์: เราอยากให้รายการ “สิ่งที่ทำได้ดี” (<ul>) และ "ขั้นตอนการใช้" (<ol>) มีพื้นหลังสีฟ้าเหมือนกัน

  • Step 1: ตั้งชื่อกลุ่มใน HTML เปิดไฟล์ index.html แล้วเติม class="content-list" ลงใน tag <ul> และ <ol>

📄 ไฟล์: index.html

    <style>  
        h2 {  
            color: blue;   
        }  
    </style>   

</head>  
<body>  
    <h1>What is Generative AI?</h1>  

    <p style="color: green;">  
      <em>Generative AI (GenAI)</em> คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol class="content-list"> <!-- เพิ่ม code นี้ -->  
        <li>  
            เข้าไปที่ Website:   
            <a href="https://chatgpt.com/">ChatGPT</a>,   
            <a href="https://gemini.google.com/app?hl=th">Gemini</a>  
        </li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <hr>  
    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น   
        <strong>"ผู้ช่วย"</strong>  
        ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  

    <hr>  
    <h3>เกี่ยวกับผู้เขียน</h3>  
    <img src="Photo.png" alt="รูปภาพโปรไฟล์ของผู้เขียน Blog" width="200">  

    <h3>ภาพประกอบจาก Unsplash</h3>  
    <img src="https://plus.unsplash.com/premium_photo-1725907643701-9ba38affe7bb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="GenAI Concept Art" width="300">  

    <h3>การจัดระเบียบไฟล์ (File Paths)</h3>  
      
    <p>รูปที่เก็บใน Folder Image:</p>  
    <img src="Image/Inside_Folder.png" alt="Test Image inside folder" width="200">  

    <p>รูปจาก Drive C (Local Path):</p>  
    <img src="file:///C:/Users/ADMIN/Downloads/Tiktok/Outside_Folder.png" alt="Test Image outside" width="200">  

</body>
  • Step 2: แต่งสวยใน CSS เปิดไฟล์ main.css แล้วเพิ่มโค้ดนี้ต่อท้าย:

📄 ไฟล์: main.css

h1 {
color: red; /* สั่งให้ h1 ทุกตัวเป็นสีแดง */
}

/* เลือก tag p ทุกตัวในหน้าเว็บ /
p {
font-size: 18px; / ขยายตัวหนังสือ /
line-height: 1.6; / เพิ่มระยะห่างบรรทัดให้อ่านสบายตา /
color: orange; / เพิ่มสีตัวอักษร */
}

/* เลือกทุกตัวที่มี class="content-list" /
.content-list {
color: darkblue; / ตัวหนังสือสีน้ำเงินเข้ม /
background-color: #f0f8ff; / พื้นหลังสีฟ้าอ่อน (AliceBlue) /
padding: 20px; / เว้นระยะขอบด้านใน /
border-radius: 10px; / ลบมุมให้โค้งมน */
}

Figure: Output

4.3) ID Selector (เลือกจากบัตรประชาชน)

ใช้สำหรับระบุตัวตน Element ที่มีชื่อเฉพาะเจาะจง (ID) “เพียงหนึ่งเดียวในหน้านั้น” (ห้ามตั้งชื่อซ้ำกันในหน้าเดียวกัน)

  • สัญลักษณ์ใน CSS: ใช้ชาร์ป # นำหน้าชื่อ
  • สัญลักษณ์ใน HTML: id="ชื่อไอดี"
  • เหมาะสำหรับ: ส่วนหลักของหน้าเว็บที่ไม่ซ้ำใคร (เช่น แถบเมนูหลัก, โลโก้, ส่วน Footer)

แบบฝึกหัด (Workshop)

โจทย์: เราอยากให้ส่วน “รูปที่เก็บใน Folder Image:” เด่นกว่าเพื่อน

  • Step 1: ระบุตัวตนใน HTML เปิดไฟล์ index.html ไปหา <p> ตรงส่วนสรุป แล้วใส่ id="highlight-box"

📄 ไฟล์: index.html

    <style>  
        h2 {  
            color: blue;   
        }  
    </style>   

</head>  
<body>  
    <h1>What is Generative AI?</h1>  

    <p style="color: green;">  
      <em>Generative AI (GenAI)</em> คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol class="content-list">   
        <li>  
            เข้าไปที่ Website:   
            <a href="https://chatgpt.com/">ChatGPT</a>,   
            <a href="https://gemini.google.com/app?hl=th">Gemini</a>  
        </li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <hr>  
    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น   
        <strong>"ผู้ช่วย"</strong>  
        ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  

    <hr>  
    <h3>เกี่ยวกับผู้เขียน</h3>  
    <img src="Photo.png" alt="รูปภาพโปรไฟล์ของผู้เขียน Blog" width="200">  

    <h3>ภาพประกอบจาก Unsplash</h3>  
    <img src="https://plus.unsplash.com/premium_photo-1725907643701-9ba38affe7bb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="GenAI Concept Art" width="300">  

    <h3>การจัดระเบียบไฟล์ (File Paths)</h3>  
      
    <p id="highlight-box">รูปที่เก็บใน Folder Image:</p> <!-- เพิ่ม code นี้ -->  
    <img src="Image/Inside_Folder.png" alt="Test Image inside folder" width="200">  

    <p>รูปจาก Drive C (Local Path):</p>  
    <img src="file:///C:/Users/ADMIN/Downloads/Tiktok/Outside_Folder.png" alt="Test Image outside" width="200">  

</body>
  • Step 2: แต่งสวยใน CSS เปิดไฟล์ main.css แล้วเพิ่มโค้ดนี้ต่อท้าย:

📄 ไฟล์: main.css

h1 {
color: red; /* สั่งให้ h1 ทุกตัวเป็นสีแดง */
}

/* เลือก tag p ทุกตัวในหน้าเว็บ /
p {
font-size: 18px; / ขยายตัวหนังสือ /
line-height: 1.6; / เพิ่มระยะห่างบรรทัดให้อ่านสบายตา /
color: orange; / เพิ่มสีตัวอักษร */
}

/* เลือกทุกตัวที่มี class="content-list" /
.content-list {
color: darkblue; / ตัวหนังสือสีน้ำเงินเข้ม /
background-color: #f0f8ff; / พื้นหลังสีฟ้าอ่อน (AliceBlue) /
padding: 20px; / เว้นระยะขอบด้านใน /
border-radius: 10px; / ลบมุมให้โค้งมน */
}

/* เลือกตัวที่มี id="highlight-box" (มีได้ตัวเดียว) /
#highlight-box {
background-color: #ffffcc; / พื้นหลังสีเหลืองอ่อน /
border: 2px solid orange; / ตีกรอบสีส้ม /
padding: 15px; / เว้นขอบด้านใน /
text-align: center; / จัดตัวหนังสือให้อยู่ตรงกลาง /
font-weight: bold; / ทำตัวหนาทั้งก้อน */
}

Figure: Output

สรุปสูตรจำ: - อยากเหมาหมด -> ใช้ชื่อ Tag - อยากจัดกลุ่ม (ใช้ซ้ำได้) -> ใช้ Class (.) - อยากเจาะจง (หนึ่งเดียว) -> ใช้ ID (#)

Note: เทคนิคการตั้งชื่อ Class และ ID (Naming Convention)

การตั้งชื่อใน CSS สำคัญมากครับ ถ้าตั้งชื่อมั่วๆ เวลาโปรเจกต์ใหญ่ขึ้นเราจะงงเอง ดังนั้นควรฝึกให้ชินตามมาตรฐานนี้ครับ:

  1. ตัวเล็กหมด (Lowercase): ห้ามใช้ตัวพิมพ์ใหญ่ เช่น
    - MyClass ❌
    - myclass ✅
  2. ใช้ขีดคั่นคำ (Kebab-case): ห้ามเว้นวรรค ให้ใช้เครื่องหมายขีดกลาง - แทน เช่น content-list ✅
  3. ตั้งชื่อตามหน้าที่ (Semantic Naming): ให้ตั้งชื่อตาม “ความหมาย” ของสิ่งนั้น ไม่ใช่ตั้งตาม “หน้าตา”
    - ❌ background-red (ไม่ดี: เพราะถ้าวันหลังเราแก้เป็นสีน้ำเงิน ชื่อนี้จะผิดทันที)
    - ✅ error-message (ดี: สื่อความหมายชัดเจนว่าคือข้อความแจ้งเตือน ไม่ว่าจะสีอะไรก็ตาม)

5) รวมฮิต CSS Properties ที่ต้องรู้ (Cheat Sheet)

คำสั่งใน CSS มีเป็นร้อย แต่เชื่อมั้ยครับว่าในการใช้งานจริง เราใช้กันวนๆ อยู่แค่ไม่กี่ตัวหรอกครับ ผมสรุปหมวดหมู่ที่ใช้บ่อยที่สุดมาให้แล้ว

🅰️ หมวดตัวอักษร (Typography)

ใช้จัดการหน้าตาของข้อความ

  • color: เปลี่ยนสีตัวอักษร (เช่น red, #ff0000, rgb(255,0,0))
  • font-size: ขนาดตัวอักษร (นิยมใช้หน่วย px หรือ rem)
  • font-weight: ความหนา (เช่น bold, normal, 600)
  • text-align: การจัดวาง (เช่น left, center, right)
  • line-height: ระยะห่างระหว่างบรรทัด (สำคัญมากสำหรับการทำให้อ่านง่าย)
  • font-family: แบบฟอนต์ (เช่น 'Sarabun', sans-serif)

📦 หมวดกล่องและระยะห่าง (Box Model)

เรื่องนี้สำคัญมาก! ทุก Element ในเว็บเรามองเป็น “กล่องสี่เหลี่ยม” เสมอ

  • width / height: ความกว้าง / ความสูง
  • background-color: สีพื้นหลัง
  • border: เส้นขอบ (เช่น 1px solid black)
  • margin: ระยะห่าง นอก กรอบ (ดันตัวเองออกจากคนอื่น)
  • padding: ระยะห่าง ใน กรอบ (ดันเนื้อหาข้างในไม่ให้ชิดขอบ)

6) Inheritance (การสืบทอดคุณสมบัติ)

เคยสงสัยไหมครับว่า ทำไมเรากำหนด font-family หรือ color ให้กับ <body> แค่ที่เดียว แต่ <h1>, <p>, <ul> ข้างในถึงเปลี่ยนตามหมดเลย?

สิ่งนี้เรียกว่า Inheritance หรือ การถ่ายทอดพันธุกรรม ครับ

  • หลักการ: ลูก (Children) จะได้รับมรดกตกทอด (Styles) บางอย่างมาจาก พ่อแม่ (Parent) อัตโนมัติ
  • อะไรที่สืบทอดได้: ส่วนใหญ่เป็นเรื่อง Text (เช่น color, font-xxx, text-align)
  • อะไรที่สืบทอดไม่ได้: ส่วนใหญ่เป็นเรื่อง Layout/Box (เช่น border, margin, padding, width) -> ลองนึกภาพว่าถ้าเราใส่ขอบให้พ่อ แล้วลูกทุกคนมีขอบตามหมด หน้าเว็บคงเละน่าดูครับ

💡 Tip: ถ้าอยากเปลี่ยนฟอนต์ทั้งหน้าเว็บ ให้ไปสั่งที่ body ทีเดียวจบครับ ไม่ต้องไปสั่งทีละตัว

7) Cascading & Specificity (ศึกชิงตำแหน่ง)

ตัว C ใน CSS ย่อมาจาก Cascading แปลว่า “การไหลเป็นชั้นๆ” เหมือนน้ำตกครับ ประเด็นคือ… ถ้าเราเผลอสั่งคำสั่ง “ชนกัน” (Conflict) Browser จะเชื่อใคร?

กฎข้อที่ 1: ใครมาทีหลังดังกว่า (Order)

ถ้าความสำคัญเท่ากัน โค้ดที่เขียน “บรรทัดล่างสุด” จะชนะเสมอ

p { color: red; }
p { color: blue; } /* ชนะ! เพราะมาทีหลัง */

กฎข้อที่ 2: ความเฉพาะเจาะจง (Specificity Score)

ถ้าเขียนคนละที่ Browser จะดูที่ “ยศ” (Score) ของ Selector ครับ ใครยศสูงกว่าชนะ

  • 🥇 Inline Style (เขียนใน HTML) = ยศจอมพล (คะแนน 1,000) ใหญ่สุด
  • 🥈 ID Selector (#id) = ยศนายพล (คะแนน 100)
  • 🥉 Class Selector (.class) = ยศนายพัน (คะแนน 10)
  • 🎖️ Type Selector (p, h1) = ยศพลทหาร (คะแนน 1)

8) Debugging CSS

เขียน CSS แล้วไม่ออกอย่างที่คิด? สีไม่เปลี่ยน? กรอบเบี้ยว? ไม่ต้องนั่งเดาครับ! Browser มีเครื่องมือวิเศษที่ชื่อว่า DevTools ให้เราใช้งานฟรีๆ

วิธีการใช้งาน:

  1. คลิกขวา ที่ Element ไหนก็ได้บนหน้าเว็บ เลือก Inspect (ตรวจสอบ)
  2. หน้าต่าง DevTools จะเด้งขึ้นมา แบ่งเป็น 2 ฝั่งหลักๆ:
    - ซ้าย (Elements): โค้ด HTML ของเรา (โครงสร้าง)
    - ขวา (Styles): โค้ด CSS ที่ทำงานอยู่กับ Element นั้น

💡 ฟีเจอร์เด็ดที่ต้องลอง: Live Edit: คุณสามารถคลิกแก้ค่า color, font-size ในช่อง Styles ได้เลย! หน้าเว็บจะเปลี่ยนทันที (แต่เปลี่ยนแค่ชั่วคราวนะ Refresh ก็หาย) เหมาะมากสำหรับลองสุ่มสีหรือปรับขนาดจนกว่าจะพอใจ แล้วค่อยก๊อปค่าไปใส่ในไฟล์ Code จริง

9) Finding Appropriate CSS Properties (คู่มือกันลืม)

CSS มีคำสั่งเป็นร้อยเป็นพันครับ… “อย่าพยายามท่องจำทั้งหมด!” Dev ที่เก่งไม่ใช่คนที่จำได้ทุกตัว แต่คือคนที่ “รู้วิธีค้นหา” เมื่อต้องการใช้งานครับ

นี่คือ 3 คัมภีร์ที่ผมแนะนำให้ Bookmark ติดเครื่องไว้เลย:

  1. MDN Web Docs (Mozilla Developer Network)
    🔗 developer.mozilla.org
    จุดเด่น: เปรียบเสมือน “พระไตรปิฎก” ของชาวเว็บ ข้อมูลแน่น ถูกต้องที่สุด และอัปเดตไวที่สุด (แต่อาจจะอ่านยากนิดนึงสำหรับมือใหม่)
  2. W3Schools
    🔗 w3schools.com
    จุดเด่น: เป็นมิตรกับมือใหม่ มีตัวอย่างโค้ดให้กด “Try it Yourself” เล่นได้เลย เหมาะสำหรับเรียนรู้คำสั่งพื้นฐาน
  3. CSS Reference
    🔗 cssreference.io
    จุดเด่น: “เน้นภาพ” ครับ เว็บนี้จะโชว์ให้เห็นเลยว่าใส่ Property นี้แล้วหน้าตาจะออกมาเป็นยังไง ดูง่าย สวยงาม ไม่ต้องอ่านเยอะ

ยินดีด้วยครับ! ถ้าอ่านมาถึงตรงนี้แสดงว่าคุณมีครบทั้งโครงสร้างบ้านที่แข็งแรง (HTML) และการตกแต่งที่น่าอยู่ (CSS) แล้ว แต่โลกของ CSS ยังมีเทคนิคและลูกเล่นสำคัญๆ ที่นักพัฒนาเว็บต้องรู้อีกเพียบเพื่อทำให้เว็บดู “โปร” ยิ่งขึ้น ในบทความหน้าเราจะไปลุยกันต่อในหัวข้อ Essential CSS for Web Developers

ถ้าชอบบทความนี้ ฝากกด Follow และแชร์เป็นกำลังใจให้ด้วยนะครับ แล้วเจอกันใหม่บทความหน้าครับ! 👋❤️

Data Science Explore the world of data science with Donato_Story

Dashboard Discover the power of data visualization with Donato_Story

Donato_Journey Join me on my journey (Thai version)

Course_Review Discover the training courses with Donato_Story (Thai version)

Let’s Connect!

Your thoughts and feedback are invaluable. Feel free to share them in the comments or connect with me on

Originally published on Medium

Related

Automation

Make.com Workflow Inspiration & Pro Tips

EP3: รวม Workflow ไอเดียเด็ด พร้อม Tips & Tricks ต่างๆ

10 Jul 202527 min
AI & Generative AI

10 เรื่องเกี่ยวกับ Claude ที่น่าเอาไปใช้ต่อ — EP.1

รวมแนวคิดจากหลายบทความและ Open Source Project สำหรับคนที่อยากใช้ AI ให้เก่งกว่าแค่ถาม-ตอบ

22 Aug 202636 min
AI & Generative AI

Everyday Text Use Cases with ChatGPT (EP2)

การประยุกต์ใช้ Generative AI ในชีวิตประจำวัน

17 Jun 202543 min
AI & Generative AI

Everyday Text Use Cases with ChatGPT (EP3)

สำรวจ GPTs ตัวช่วยทำงานที่คุณอาจยังไม่เคยใช้

19 Jun 202511 min