Bạn sẽ nối một stylesheet vào website Góc học web, thay đổi kiểu chữ và chiều rộng nội dung, rồi dùng DevTools xác nhận trình duyệt thực sự tải tệp CSS nào.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Bắt đầu từ một trang HTML đã đọc được

Ở môn HTML, website đã có trang chủ, bài viết, liên hệ và menu. Nội dung vẫn có thứ tự khi chưa có CSS vì trình duyệt có stylesheet mặc định. Bây giờ ta thay đổi cách trình bày, không cần biến các heading thành div hoặc dùng bảng để chia cột.

Hãy giữ một bản HTML chưa tạo kiểu để so sánh. Một trang chưa có màu hoặc chưa có hai cột không phải trang hỏng. Mục tiêu đầu tiên là kiểm soát được một thay đổi nhỏ và giải thích nguồn gốc của nó.

Nối tệp styles.css

Tạo styles.css cùng thư mục index.html. Trong head của HTML, thêm <link rel=”stylesheet” href=”styles.css”>. href được tính từ địa chỉ tài liệu hiện tại. Nếu tệp nằm trong css/styles.css thì đường dẫn phải khớp thư mục thật.

CSS là văn bản thuần gồm quy tắc chọn phần tử và các khai báo trong ngoặc nhọn. body là selector, font-family là thuộc tính và Arial, sans-serif là giá trị. Dấu hai chấm nối thuộc tính với giá trị; dấu chấm phẩy phân tách các khai báo. Không viết các khai báo này thành nội dung chữ trong body.

Đọc một thay đổi cụ thể

Ví dụ chọn font dự phòng dễ đọc, line-height tương đối và giới hạn chiều rộng nội dung. margin-inline:auto căn phần hộp có chiều rộng giới hạn vào giữa theo chiều ngang trong ngữ cảnh đang dùng. Padding giữ nội dung cách mép cửa sổ.

Giao diện lúc này vẫn đơn giản. Chưa cần reset toàn bộ CSS hoặc chép một framework để thấy kết quả. Thêm từng khai báo giúp nhận ra chính xác cái nào thay đổi chữ và cái nào thay đổi vị trí.

Kiểm tra bằng DevTools thay vì đoán

Mở Inspect, chọn body và nhìn Styles/Computed. Bạn cần thấy quy tắc từ styles.css cùng giá trị cuối cùng. Trong Network, kiểm tra stylesheet tải thành công và đúng URL. Nếu tệp không tải, sửa đường dẫn trước; tăng specificity không giải quyết được một URL 404.

Sửa tạm trong DevTools thường chỉ tồn tại trong phiên trang hiện tại. Khi đã hiểu cách sửa, cập nhật tệp thật và tải lại. Trên hosting có cache, kiểm tra nội dung tài nguyên và phiên bản thay vì liên tục thêm !important vào CSS.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<p>Đây là dòng nội dung dùng để quan sát font và khoảng cách.</p>

Thêm hoặc sửa trong styles.css

body {
  font-family: Arial, sans-serif;
  line-height: 1.65;
  color: #203047;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem;
}

So sánh trước và sau

Bản trước dùng phần lớn kiểu mặc định của trình duyệt. Bản sau có kiểu chữ, khoảng dòng và vùng nội dung nhất quán; menu và các thẻ bài vẫn chưa được dàn bố cục.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Quên rel=”stylesheet”: thêm đúng loại liên kết.
• Sửa nhầm tệp CSS ở thư mục khác: đối chiếu URL trong Network.
• Sửa DevTools rồi tưởng đã lưu vào tệp: cập nhật mã nguồn thật.

Tự kiểm tra

• Thử đổi màu body rồi xác định phần nào kế thừa màu đó.
• Tắt một khai báo trong Styles và mô tả đúng thay đổi.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML