HTML & CSS Handout · ⁨Tài liệu tham khảo HTML & CSS⁩

EN 中文 Español 中文 Español Français Português 한국어 日本語 Tiếng Việt ไทย Bahasa Indonesia עברית العربية Русский

Download reference · ⁨Tải xuống tài liệu tham khảo⁩ 2-up · ⁨2-lên⁩

1 HTML basics · ⁨Cơ bản về HTML⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
1.1
Trang đầu tiên của bạn

English
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.

The browser draws whatever is between the tags.

A tag you forget to close, or spell wrong, may not show correctly.

Tiếng Việt
HTML mô tả một trang web bằng các thẻ. Một thẻ là một từ trong ngoặc nhọn, ví dụ <p>. Hầu hết chúng xuất hiện thành cặp — một thẻ mở <p> và một thẻ đóng </p> bao quanh nội dung. Một thẻ cộng với nội dung của nó tạo thành một phần tử.

<p>Hello, world!</p> <p>This is my first web page.</p>

Trình duyệt sẽ hiển thị bất cứ thứ gì nằm giữa các thẻ.

Một thẻ bạn quên đóng, hoặc viết sai chính tả, có thể không hiển thị đúng cách.

Một phần tử = thẻ mở + nội dung + thẻ đóng
1.2
Tiêu đề & Đoạn văn

English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.

Tiếng Việt
Tiêu đề chạy từ <h1> (lớn nhất) xuống đến <h6> (nhỏ nhất). Một đoạn văn là <p>. Sử dụng đúng một <h1> cho tiêu đề chính của trang.

<h1>My Blog</h1> <h2>About me</h2> <p>I am learning to build web pages.</p>
1.3
Định dạng văn bản

English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.

Common mistakes

Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.

The tag goes in angle brackets; the text you see goes between the opening and closing tags.

Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.

Tiếng Việt
Làm đậm văn bản với <strong> và in nghiêng với <em>. Ngắt dòng là <br> — nó không có thẻ đóng.

<p><strong>Warning:</strong> read this carefully.</p> <p>First line<br>second line</p> <p>You can <em>emphasise</em> any word.</p>

Lỗi thường gặp

Hầu hết các thẻ xuất hiện thành cặp — <p>...</p>. Quên thẻ đóng sẽ làm hỏng bố cục ở phía dưới.

Thẻ nằm trong ngoặc nhọn; văn bản bạn nhìn thấy nằm giữa thẻ mở và thẻ đóng.

Tiêu đề chạy từ <h1> (lớn nhất) đến <h6> — đừng chọn tiêu đề chỉ vì kích thước của nó.
2 Lists, links & images · ⁨Danh sách, liên kết & hình ảnh⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
2.1
Danh sách

English
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.

Tiếng Việt
Danh sách không thứ tự <ul> hiển thị dấu chấm bi; danh sách có thứ tự <ol> hiển thị số. Mỗi mục trong danh sách là một ⟨<li>⟩.

<ul> <li>Apples</li> <li>Oranges</li> </ul> <ol> <li>Wake up</li> <li>Go to school</li> </ol>

ul cho dấu chấm bi, ol cho số; mỗi mục là li
2.2
Liên kết

English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.

Add target="_blank" to open the link in a new tab.

Tiếng Việt
Một liên kết là neo <a>. Thuộc tính href của nó chứa địa chỉ mà nó trỏ tới.

<a href="https://example.com">Visit Example</a> <br> <a href="page2.html">Go to the next page</a>

Thêm target="_blank" để mở liên kết trong tab mới.
2.3
Hình ảnh

English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img> has no separate closing tag.

A broken src path shows nothing — check the file name and folder.

Tiếng Việt
Một hình ảnh là ⟨<img>⟩ — nó không có thẻ đóng. src là địa chỉ của bức tranh; alt là văn bản được hiển thị nếu hình ảnh không tải được (và đọc to cho người khiếm thị).

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png" alt="bitmap versus vector" width="120"> <p>If the picture is missing, the alt text shows instead.</p>

Lỗi thường gặp

Một hình ảnh cần src (tệp tin) và alt (mô tả); một liên kết cần href.

<img> không có thẻ đóng riêng biệt.

Một đường dẫn ⟨src⟩ bị lỗi sẽ không hiển thị gì — hãy kiểm tra tên tệp và thư mục.
3 Page structure · ⁨Cấu trúc trang⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
3.1
Một trang hoàn chỉnh

English
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.

The <title> shows in the browser tab.

<meta charset="utf-8"> lets the page show any language.

Tiếng Việt
Một trang thực tế có khung xương cố định. ⟨<!DOCTYPE html>⟩ cho biết đây là HTML5. Mọi thứ nằm bên trong ⟨<html>⟩. ⟨<head>⟩ chứa thông tin về trang; ⟨<body>⟩ chứa những gì bạn thấy.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <h1>Welcome</h1> <p>This is a complete page.</p> </body> </html>

Trang là cây: head mô tả trang, body chứa những gì bạn thấy

⟨<title>⟩ hiển thị trên tab trình duyệt.

⟨<meta charset="utf-8">⟩ cho phép trang hiển thị bất kỳ ngôn ngữ nào.
3.2
Nhận xét & Lồng nhau

English
A comment 注释  is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.

Common mistakes

Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.

A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).

A comment is ; the browser ignores it.

Tiếng Việt
Nhận xét ⟨⟩ là ghi chú mà trình duyệt bỏ qua. Các thẻ lồng vào nhau; thụt lề từng cấp độ để cấu trúc rõ ràng. Đóng thẻ theo thứ tự ngược lại so với lúc mở.

 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>

Lỗi thường gặp

Thẻ phải lồng nhau, không được giao cắt: <b><i>text</i></b>, chưa bao giờ <b><i>text</b></i>.

Một trang cần <html>, một <head> (cho tiêu đề và liên kết) và một <body> (cho những gì bạn thấy).

Một nhận xét là ⟨⟩; trình duyệt bỏ qua nó.
4 Tables & forms · ⁨Bảng biểu & biểu mẫu⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
4.1
Bảng

English
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.

Tiếng Việt
Bảng ⟨<table>⟩ được xây dựng từ các hàng ⟨<tr>⟩. Ô tiêu đề là ⟨<th>⟩ (in đậm, căn giữa); ô dữ liệu bình thường là ⟨<td>⟩.

<table border="1" cellpadding="6"> <tr><th>Name</th><th>Score</th></tr> <tr><td>Mei</td><td>88</td></tr> <tr><td>Sam</td><td>71</td></tr> </table>

table → tr rows → th/td cells
4.2
Biểu mẫu

English
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.

Common <input> type values: text, number, email, password, checkbox.

Common mistakes

Table cells go inside rows: a <tr> holds the <td> cells.

Every form input should have a matching <label> so it is clear and accessible.

A button inside a form submits it by default — set type="button" if you do not want that.

Tiếng Việt
Biểu mẫu ⟨<form>⟩ thu thập đầu vào từ người dùng. Một ⟨<input>⟩ là hộp nhập; một ⟨<label>⟩ đặt tên cho nó; một ⟨<button>⟩ gửi biểu mẫu.

<form> <label>Name: <input type="text"></label> <br><br> <label>Age: <input type="number"></label> <br><br> <button type="submit">Send</button> </form>

Các giá trị ⟨<input>⟩ ⟨type⟩ phổ biến: ⟨text⟩, ⟨number⟩, ⟨email⟩, ⟨password⟩, ⟨checkbox⟩.

Lỗi thường gặp

Các ô bảng nằm bên trong hàng: một ⟨<tr>⟩ chứa các ô ⟨<td>⟩.

Mỗi trường nhập liệu của biểu mẫu nên có một ⟨<label>⟩ tương ứng để rõ ràng và dễ truy cập.

Một nút bên trong biểu mẫu sẽ gửi biểu mẫu đó theo mặc định — hãy đặt type="button" nếu bạn không muốn điều đó xảy ra.
5 Boxes & sections · ⁨Hộp & phần⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
5.1
div, span & các phần ngữ nghĩa

English
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.

Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.

Common mistakes

<div> is a block (starts a new line); <span> is inline (stays in the text).

Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.

Do not use a tag just for its default look — style it with CSS instead.

Tiếng Việt
Một <div> là khối block tổng hợp nhóm nội dung trên các dòng riêng. Một <span> là khối inline tổng hợp nằm trong một dòng văn bản. Bạn sử dụng chúng để nhóm các thứ lại nhằm định dạng hoặc định vị.

<div> <span>Price:</span> <span>$9.99</span> </div> <div> <span>Stock:</span> <span>in stock</span> </div>

Các thẻ ngữ nghĩa mô tả vai trò của chúng, giúp trình đọc màn hình và công cụ tìm kiếm hiểu rõ hơn. Ưu tiên dùng chúng thay cho <div> thuần túy khi phù hợp: <header>, <nav>, <main>, <section>, <article>, <footer>.

<header><h1>My Site</h1></header> <main> <section> <h2>News</h2> <p>Today we launched the site.</p> </section> </main> <footer>© 2026 My Site</footer>

Lỗi thường gặp

<div> là block (bắt đầu dòng mới); <span> là inline (giữ nguyên trong dòng văn bản).

Sử dụng các thẻ ngữ nghĩa như <header>, <nav> và <footer> khi phù hợp, không phải <div> cho mọi thứ.

Đừng chỉ dùng thẻ vì giao diện mặc định của nó — hãy tạo kiểu bằng CSS thay thế.

div là một hộp khối; span bao quanh văn bản nội tuyến

6 CSS basics · ⁨Cơ bản về CSS⁩

reference.pdf.vi 2-up · ⁨2-lên⁩

6.1

Thêm CSS

English

CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.

Tiếng Việt

CSS định dạng HTML. Cách đơn giản nhất là một <style> block trong <head> (một trang lớn hơn sẽ dùng một file .css riêng với <link>). Một quy tắc CSS có selector, sau đó là các cặp { property: value; } gọi là declaration.

<style>
  p  { color: blue; font-size: 18px; }
  h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>

Liên kết file stylesheet để các quy tắc CSS tạo kiểu cho các phần tử HTML

6.2

Selectors: class & id

English

A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.

The selectors you will meet most, in one place:

Selector	Chooses
`p`	every `<p>` element
`.note`	everything with `class="note"`
`#title`	the one element with `id="title"`
`h1, h2`	several selectors at once
`nav a`	every `<a>` inside a `<nav>`
`.btn:hover`	one state of an element (see topic 10)

Common mistakes

A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.

Tiếng Việt

Một class tạo kiểu cho nhiều phần tử: thêm class="..." vào HTML và viết .name vào CSS. Một id tạo kiểu cho MỘT phần tử: id="..." và #name.

<style>
  .note  { color: green; }
  #title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>

Các selectors bạn sẽ gặp phổ biến nhất, được tổng hợp ở đây:

Selector	Chọn
`p`	mọi phần tử `<p>`
`.note`	tất cả những gì có `class="note"`
`#title`	phần tử duy nhất có `id="title"`
`h1, h2`	nhiều selectors cùng lúc
`nav a`	mỗi `<a>` bên trong một `<nav>`
`.btn:hover`	một trạng thái của phần tử (xem chủ đề 10)

Lỗi thường gặp

Một class selector bắt đầu bằng dấu chấm . và một id selector bắt đầu bằng dấu hash #.
Liên kết stylesheet vào <head>, hoặc đặt các quy tắc bên trong một <style> block.
Một class có thể được tái sử dụng trên nhiều phần tử; một id chỉ nên xuất hiện một lần trên mỗi trang.

7 Colours & text · ⁨Màu sắc & văn bản⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
7.1
Màu sắc & nền

English
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).

Tiếng Việt
Đặt màu chữ bằng color và màu nền bằng background-color. Màu sắc có thể là tên (red), mã hex (#ff0000), hoặc rgb(255, 0, 0).

<style> body { background-color: #f0f4ff; } .card { background-color: white; color: #1e3a8a; padding: 12px; } </style> <div class="card">A card with its own colours.</div>

Màu CSS: tên, hex, và rgb()
7.2
Tạo kiểu văn bản

English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.

Common mistakes

color sets the text colour; background-color sets the background.

A colour can be a name, a #rrggbb hex code, or rgb(...).

End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.

Tiếng Việt
Các thuộc tính văn bản phổ biến: font-size, font-weight (ví dụ: bold), font-family, text-align (left / center / right), và line-height cho khoảng cách.

<style> h1 { font-family: Arial, sans-serif; text-align: center; } p { font-size: 18px; line-height: 1.6; } </style> <h1>Centered title</h1> <p>Readable paragraph text with comfortable line spacing.</p>

Lỗi thường gặp

color đặt màu chữ; background-color đặt màu nền.

Màu sắc có thể là tên, mã hex #rrggbb, hoặc rgb(...).

Kết thúc mỗi declaration bên trong dấu ngoặc nhọn bằng dấu chấm phẩy ; — nó phân tách các cặp property: value (dấu chấm phẩy sau declaration cuối cùng là tùy chọn). Bản thân quy tắc kết thúc bằng dấu ngoặc nhọn đóng }.
8 The box model · ⁨Mô hình hộp⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
8.1
Mô hình hộp (Box Model)

English
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).

Tiếng Việt
Mọi phần tử đều là một hộp có bốn lớp, từ trong ra ngoài: nội dung (content), padding (khoảng trống bên trong border), border, và margin (khoảng trống bên ngoài border).

<style> .box { background: #dbeafe; border: 3px solid #2563eb; padding: 16px; margin: 20px; } </style> <div class="box">content + padding + border + margin</div>

Mô hình hộp: content, rồi đến padding, rồi đến border, rồi đến margin
8.2
Margin & Padding

English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).

Tiếng Việt
padding thêm khoảng trống bên trong border, đẩy nội dung vào phía trong. margin thêm khoảng trống bên ngoài, đẩy các hộp khác ra xa. Có thể cung cấp một giá trị cho tất cả các cạnh, hoặc bốn giá trị (trên phải dưới trái).

<style> .a { background: #fde68a; padding: 4px; } .b { background: #bbf7d0; padding: 20px; margin-top: 16px; } </style> <div class="a">tight padding</div> <div class="b">roomy padding</div>
8.3
Display

English
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).

Common mistakes

Padding is inside the border; margin is the space outside it.

box-sizing: border-box makes the set width include padding and border — often what you want.

display: none hides an element completely; visibility: hidden leaves its space.

Tiếng Việt
Thuộc tính display thiết lập cách một box hiển thị. block chiếm trọn một dòng; inline nằm trong một dòng văn bản; none xóa hoàn toàn box; flex sắp xếp các con theo hàng ngang (chủ đề tiếp theo).

<style> .hidden { display: none; } .chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; } </style> <p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>

Lỗi thường gặp

Padding (vùng đệm) nằm bên trong border (viền); margin (khoảng cách ngoài) là không gian bên ngoài nó.

box-sizing: border-box khiến chiều rộng được thiết lập bao gồm cả padding và border — thường là điều bạn mong muốn.

display: none ẩn phần tử hoàn toàn; visibility: hidden giữ lại khoảng trống của nó.
9 Layout · ⁨Bố cục⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
9.1
Chiều rộng & Căn giữa

English
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.

Tiếng Việt
Đặt chiều rộng width cho một hộp. Để căn giữa một khối, hãy gán cho nó chiều rộng và margin: 0 auto — auto sẽ chia đều khoảng trống còn lại sang hai bên trái và phải.

<style> .page { width: 300px; margin: 0 auto; background: #e0e7ff; padding: 16px; text-align: center; } </style> <div class="page">A centered, fixed-width page.</div>
9.2
Flexbox

English
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.

Tiếng Việt
Flexbox sắp xếp các con theo hàng ngang (hoặc cột dọc). Đặt display: flex lên phần cha — tức là container. gap thêm khoảng cách giữa các con; flex: 1 khiến chúng chia sẻ chiều rộng.

<style> .row { display: flex; gap: 10px; } .row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; } </style> <div class="row"> <div>One</div> <div>Two</div> <div>Three</div> </div>

Một container flex sắp xếp các mục dọc theo trục chính; gap thêm khoảng cách giữa chúng
9.3
Dự án nhỏ: Thẻ hồ sơ (Profile Card)

English
Combine boxes, colours, text and spacing into one small component 组件.

Common mistakes

Centre a block with a set width using margin: 0 auto.

Flexbox needs display: flex on the CONTAINER, not on the items.

A width in % is relative to the parent, so check the parent's width too.

Tiếng Việt
Kết hợp các hộp, màu sắc, văn bản và khoảng cách thành một thành phần nhỏ gọn.

<style> .card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; font-family: sans-serif; } .card h2 { margin: 0; color: #1e3a8a; } .card .role { color: #64748b; margin: 4px 0 8px; } </style> <div class="card"> <h2>Mei Chen</h2> <p class="role">Student · Grade 11</p> <p>Loves maths and building web pages.</p> </div>

Lỗi thường gặp

Căn giữa một block có chiều rộng xác định bằng margin: 0 auto.

Flexbox cần display: flex trên CONTAINER, không phải trên các items.

Chiều rộng trong % mang tính tương đối so với phần cha, nên hãy kiểm tra chiều rộng của phần cha nữa.
10 Going further · ⁨Nghiên cứu sâu hơn⁩
reference.pdf.vi 2-up · ⁨2-lên⁩
10.1
Hover & Pseudo-classes

English
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.

Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.

Tiếng Việt
Một pseudo-class tạo kiểu cho phần tử ở một trạng thái cụ thể. :hover áp dụng khi con trỏ chuột di qua phần tử. Thêm transition để sự thay đổi diễn ra mượt mà thay vì bị nhảy vọt.

<style> .btn { background: #2563eb; color: white; padding: 10px 18px; border: none; border-radius: 8px; font-size: 16px; transition: background 0.3s; } .btn:hover { background: #16a34a; } </style> <button class="btn">Hover me</button>

Các pseudo-classes hữu ích khác: :focus (nhập liệu mà người dùng đã click vào) và :first-child.

:hover tạo kiểu cho phần tử khi con trỏ di qua
10.2
Định vị (Positioning)

English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.

top, right, bottom, left say how far to move — they only work on positioned boxes.

Tiếng Việt
Định vị di chuyển một hộp khỏi vị trí bình thường của nó. relative dịch chuyển nhẹ hộp (và làm cho nó thành điểm neo cho các con); absolute đặt chính xác một hộp, đo từ phần cha gần nhất đã được định vị; fixed cố định nó vào màn hình ngay cả khi trang web cuộn.

<style> .card { position: relative; width: 260px; height: 90px; background: #dbeafe; border-radius: 10px; padding: 12px; } .badge { position: absolute; top: -10px; right: -10px; background: #dc2626; color: white; padding: 4px 10px; border-radius: 999px; font-size: 13px; } </style> <div class="card"> A product card <span class="badge">NEW</span> </div>

top, right, bottom, left xác định mức độ dịch chuyển — chỉ hoạt động trên các box đã được định vị.
10.3
Media queries & Responsive Design

English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.

Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.

Percent widths and max-width let boxes shrink with the screen.

Common mistakes

:hover sticks to its selector with no space: .btn:hover, not .btn :hover.

position: absolute is measured from the nearest positioned parent — give that parent position: relative.

A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.

Tiếng Việt
Một trang responsive thích ứng với kích thước màn hình. Một media query áp dụng các quy tắc của nó chỉ khi một điều kiện về màn hình được thỏa mãn, chẳng hạn như max-width.

<style> .banner { background: #2563eb; color: white; padding: 16px; } @media (max-width: 600px) { .banner { background: #16a34a; } /* narrow screens turn green */ } </style> <div class="banner">Resize the window: blue when wide, green when narrow.</div>

Thiết kế theo hướng mobile-first: viết style cho điện thoại trước, sau đó thêm @media (min-width: ...) rules cho các màn hình lớn hơn.

Chiều rộng phần trăm và max-width cho phép các box co giãn cùng màn hình.

Lỗi thường gặp

:hover gắn liền với selector của nó, không có khoảng cách: .btn:hover, không phải .btn :hover.

position: absolute được đo từ parent định vị gần nhất — hãy chỉ định parent đó là position: relative.

Media query bao quanh toàn bộ quy tắc: @media (max-width: 600px) { .a { ... } }.