พื้นฐาน CSS

ถ้า HTML คือ "โครงกระดูก" CSS (Cascading Style Sheets) ก็คือ "เสื้อผ้า หน้า ผม" ที่ทำให้เว็บของเราดูดีขึ้นนั่นเอง

หลักการของ CSS ง่ายมากครับ คือการชี้ไปที่ Tag ที่เราต้องการ แล้วบอกว่าอยากให้มัน เปลี่ยนอะไร (Property) และ เป็นอย่างไร (Value)

1. โครงสร้างของ CSS (Syntax)

ก่อนจะเขียน เราต้องรู้จักไวยากรณ์พื้นฐานของมันก่อน:

Selector: เราจะแต่งตัวให้ใคร? (เช่น h1, div, หรือชื่อ Class)
Property: จะเปลี่ยนอะไร? (เช่น color, font-size, background-color)
Value: เปลี่ยนเป็นค่าอะไร? (เช่น red, 20px, blue)

2. วิธีการเขียน CSS (ที่นิยมที่สุด)

เรามักจะเขียน CSS ไว้ใน Tag <style> ภายใต้ส่วน <head> ของ HTML ครับ

ตัวอย่างการแต่งตัวให้ปุ่มและกล่อง:

<style>
    /* 1. แต่งตัวให้กล่อง (div) */
    .container {
        background-color: #f4f4f4; /* สีพื้นหลังเทาอ่อน */
        padding: 20px;             /* ระยะห่างข้างในกล่อง */
        border-radius: 10px;       /* ทำขอบมน */
        width: 300px;              /* กำหนดความกว้าง */
        border: 1px solid #ddd;    /* เส้นขอบ */
    }

    /* 2. แต่งตัวให้หัวข้อ (h2) */
    h2 {
        color: #333;               /* สีตัวอักษรเทาเข้ม */
        font-family: Arial, sans-serif;
    }

    /* 3. แต่งตัวให้ปุ่ม (button) */
    button {
        background-color: #007bff; /* สีน้ำเงิน */
        color: white;              /* ตัวหนังสือสีขาว */
        padding: 10px 15px;        /* ขนาดปุ่ม */
        border: none;              /* เอาเส้นขอบออก */
        border-radius: 5px;        /* ขอบมน */
        cursor: pointer;           /* เปลี่ยนเมาส์เป็นรูปมือเมื่อชี้ */
    }

    /* แถม: เมื่อเอาเมาส์ไปวางบนปุ่ม (Hover) */
    button:hover {
        background-color: #0056b3; /* ให้สีเข้มขึ้นนิดนึง */
    }
</style>

3. สรุป 3 คำศัพท์ที่ต้องเจอแน่ๆ

เพื่อให้จัดการหน้าเว็บได้เซียนขึ้น คุณควรเข้าใจ Box Model ครับ:

Padding: พื้นที่ว่าง ภายใน กล่อง (ระหว่างเนื้อหากับเส้นขอบ)
Border: เส้นขอบ ของกล่อง
Margin: พื้นที่ว่าง ภายนอก กล่อง (ระยะห่างระหว่างกล่องนี้กับกล่องอื่น)

4. ลองรวมร่าง HTML + CSS

นี่คือหน้าตา Code เมื่อเราเอา CSS ไปใส่ใน HTML ที่เราคุยกันก่อนหน้านี้:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: sans-serif; display: flex; justify-content: center; padding: 50px; }
        .card { 
            border: 1px solid #ccc; 
            padding: 20px; 
            border-radius: 8px; 
            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        }
        input { display: block; margin-bottom: 10px; width: 100%; }
        button { width: 100%; background: green; color: white; border: none; padding: 10px; }
    </style>
</head>
<body>
    <div class="card">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button>เข้าสู่ระบบ</button>
    </div>
</body>
</html>