CSS พื้นฐาน

CSS คือ "เสื้อผ้า" ของเว็บ

ถ้า HTML เป็นกระดูก CSS (Cascading Style Sheets) คือเสื้อผ้า ผิว หน้าตา มันเปลี่ยน สี ขนาด ตำแหน่ง ระยะห่าง ของทุกอย่างบนหน้าเว็บ

โครงสร้าง CSS

selector {
  property: value;
}

selector = เลือกว่าจะตกแต่ง อะไร
property = คุณสมบัติที่จะแก้
value = ค่าใหม่

h1 {
  color: blue;
  font-size: 40px;
}

วิธีเพิ่ม CSS 3 แบบ

1. Inline (ในแท็ก) — ไม่แนะนำให้ใช้เยอะ

<p style="color: red;">ข้อความแดง</p>

2. Internal (ใน `<style>`)

<head>
  <style>
    p { color: red; }
  </style>
</head>

3. External (ไฟล์ .css) — แนะนำ!

<link rel="stylesheet" href="style.css" />

แยกไฟล์ CSS ออกมา สะอาดและใช้ซ้ำได้

Selector ที่ใช้บ่อย

Selector	เลือกอะไร	ตัวอย่าง
ชื่อแท็ก	แท็กทั้งหมด	`p`, `h1`
`.class`	element ที่มี class นั้น	`.card`
`#id`	element ที่มี id นั้น (unique)	`#header`

<p class="highlight">ข้อความ</p>
<div id="main">...</div>

.highlight { background: yellow; }
#main { padding: 20px; }

คุณสมบัติ (Properties) ที่ใช้บ่อย

สีและข้อความ

p {
  color: #333;            /* สีตัวอักษร */
  background-color: #fff; /* สีพื้นหลัง */
  font-size: 16px;        /* ขนาด */
  font-weight: bold;      /* ตัวหนา */
  text-align: center;     /* จัดกึ่งกลาง */
}

ระยะห่าง: Margin & Padding

.box {
  margin: 20px;     /* ระยะด้านนอก (ห่างจากขอบเขตอื่น) */
  padding: 15px;    /* ระยะด้านใน (ระหว่างเนื้อหากับขอบ) */
  border: 1px solid #ccc;  /* เส้นขอบ */
  border-radius: 8px;      /* มุมมน */
}

💡 จำง่าย ๆ: padding = พื้นที่ว่าง ใน กล่อง / margin = พื้นที่ว่าง นอก กล่อง

ขนาด

.card {
  width: 300px;
  height: 200px;
}

จัดวางด้วย Flexbox (ใช้บ่อยที่สุด!)

Flexbox เป็นวิธีจัดวางที่ทันสมัยและใช้ง่าย:

.container {
  display: flex;
  justify-content: center;   /* แนวนอน: กึ่งกลาง */
  align-items: center;       /* แนวตั้ง: กึ่งกลาง */
  gap: 16px;                 /* ระยะห่างระหว่างลูก */
}

<div class="container">
  <div>กล่อง 1</div>
  <div>กล่อง 2</div>
  <div>กล่อง 3</div>
</div>

ค่า justify-content ที่ใช้บ่อย:

flex-start (ชิดซ้าย), center (กึ่งกลาง), flex-end (ชิดขวา)
space-between (กางเท่ากัน), space-around

ลองทำจริง: การ์ดสวย ๆ

<div class="card">
  <h2>กาแฟลาเต้</h2>
  <p class="price">80 บาท</p>
  <button>สั่งซื้อ</button>
</div>

body {
  font-family: sans-serif;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 250px;
  text-align: center;
}

.price {
  color: #16a34a;
  font-size: 24px;
  font-weight: bold;
}

button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background: #1d4ed8;
}

Hover (เมื่อเอาเมาส์ไปวาง)

button:hover {
  background: darkblue;
}

สีใน CSS

color: red;            /* ชื่อสี */
color: #ff0000;        /* hex (แดง) */
color: rgb(255, 0, 0); /* rgb */
background: rgba(0,0,0,0.5); /* พร้อมความโปร่งใส */

💡 แนะนำเว็บดูสี: https://coolors.co

สรุป

แนวคิด	สรุป
`selector { property: value }`	โครงสร้าง CSS
`.class` / `#id`	เลือก element
`padding` / `margin`	ระยะใน / ระยะนอก
Flexbox	จัดวางแนวนอน/ตั้งแบบยืดหยุ่น
`:hover`	เอฟเฟกต์เมื่อเอาเมาส์วาง

บทหน้า: ทำให้หน้าเว็บ โต้ตอบ ได้ด้วย DOM & Events ⚡