Cách tạo kiểu cho header (đầu trang) với CSS

Giới thiệu

Header là thành phần quan trọng đầu tiên mà người dùng thấy khi truy cập website. Việc tạo kiểu (styling) cho header đẹp mắt, chuyên nghiệp giúp tăng trải nghiệm người dùng và thể hiện thương hiệu.

Ví dụ cơ bản

Dưới đây là mã HTML và CSS hoàn chỉnh để tạo một header đơn giản với nền màu, căn giữa chữ và khoảng đệm phù hợp:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Tiêu đề trang</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
        }
        .header {
            padding: 30px;
            text-align: center;
            background: #bc1a6b;
            color: white;
            font-size: 30px;
        }
        main {
            padding: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Website của tôi</h1>
    </div>
    <main>
        <h1>Tiêu đề chính</h1>
        <p>Nội dung mẫu cho trang web.</p>
        <p>Nội dung mẫu cho trang web.</p>
        <p>Nội dung mẫu cho trang web.</p>
    </main>
</body>
</html>

Giải thích các thuộc tính CSS chính

• padding: Tạo khoảng cách bên trong header (30px).
• text-align: center: Căn giữa nội dung theo chiều ngang.
• background: Màu nền header (mã hex #bc1a6b - màu hồng đậm).
• color: white: Màu chữ trắng để tương phản với nền.
• font-size: Kích thước chữ lớn (30px) để nổi bật.

Mở rộng: Header cố định (Fixed Header)

Để header luôn hiển thị khi cuộn trang, thêm position: fixed; top: 0; width: 100%; z-index: 1000; vào class .header. Lưu ý cần thêm padding-top cho main bằng chiều cao header để nội dung không bị che khuất.

Mẹo nâng cao

• Sử dụng box-shadow để tạo độ sâu cho header.
• Kết hợp Flexbox để bố trí logo, menu điều hướng, nút CTA trên cùng một hàng.
• Áp dụng transition cho hiệu ứng mượt mà khi cuộn (thu nhỏ header, đổi màu nền).