HTML & CSS - CodeWithJohn

HTML and CSS are the foundation of every website. HTML provides the structure and content, while CSS handles the visual presentation and layout.

HTML Structure

HTML uses elements to define the structure of your content. Every webpage starts with a basic HTML skeleton.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Common HTML Elements

HTML has a wide range of elements for different content types: headings (h1–h6), paragraphs (p), links (a), images (img), lists (ul, ol, li), and semantic elements like header, main, footer, and section.

CSS Styling

CSS lets you control how HTML elements look. You can apply styles using selectors that target elements by tag, class, or ID.

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
h1 {
  color: #1a1a1a;
  font-size: 2rem;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

The Box Model

Every HTML element is a box. The box model defines the space an element takes up: content, padding, border, and margin. Understanding this model is key to controlling layout.

เคล็ดลับ Box Model

ใช้ box-sizing: border-box เพื่อให้ padding และ border ถูกรวมอยู่ใน width ของ element แทนที่จะเพิ่มออกมาด้านนอก ทำให้คำนวณ layout ง่ายขึ้นมาก

Layout with Flexbox

Flexbox is a CSS layout system that makes it easy to align and distribute elements in a row or column.

.nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

Key Flexbox Properties

justify-content — aligns items along the main axis (horizontal by default): flex-start, center, space-between, space-around
align-items — aligns items along the cross axis (vertical by default): stretch, center, flex-start, flex-end
flex-wrap — allows items to wrap onto the next line when there isn't enough space

Linking CSS to HTML

Save your styles in a separate .css file and link it in the <head> of your HTML document.

<head>
  <meta charset="UTF-8" />
  <title>My Page</title>
  <link rel="stylesheet" href="style.css" />
</head>

ตรวจสอบ path ให้ถูกต้อง

ถ้า CSS ไม่ทำงาน ให้ตรวจสอบว่า path ใน href ถูกต้องและไฟล์ style.css อยู่ในโฟลเดอร์เดียวกับ HTML หรือไม่