Bài 08: Sử dụng CSS tùy chỉnh giao diện HTML

Theo mặc định giao diện của các thẻ HTML sẽ không đẹp và không thể nào làm giống như giao diện trong file PSD được, vì vậy ta phải sử dụng thêm CSS để tùy chỉnh hiển thị mặc định của HTML.

1. Ví dụ sử dụng CSS định dạng giao diện

Để các bạn rõ hơn thì mình sẽ làm một ví dụ sử dụng CSS để định dạng cho thẻ P như sau:

Không sử dụng CSS: XEM DEMO

<!DOCTYPE html>
<html>
    <head>
        <title>Tùy chỉnh giao diện HTML bằng CSS</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <p>
            Chào mừng bạn đến với website học lập trình online freetuts.net
        </p>
    </body>
</html>

Giao diện:

Có sử dụng CSS: XEM DEMO

<!DOCTYPE html>
<html>
    <head>
        <title>Tùy chỉnh giao diện HTML bằng CSS</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            p{
                background: blue;
                color: white;
                text-align: center;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <p>
            Chào mừng bạn đến với website học lập trình online freetuts.net
        </p>
    </body>
</html>

Giao diện:

Chạy hai ví dụ trên bạn sẽ thấy sự khác nhau giữa chúng là ở ví dụ một hiển thị đơn giản, còn ví dụ hai thì có background và chữ màu trắng. Về HTML thì không có gì khác nhưng ỏ ví dụ hai mình có bổ sung một đoạn mã CSS như sau:

<style type="text/css">
    p{
        background: blue;
        color: white;
        text-align: center;
        font-size: 30px;
    }
</style>

Như vậy để bổ sung CSS cho thẻ HTML thì ta đặt nó bên trong thẻ style. Còn cú pháp CSS như thế nào thì bạn có thể đọc bài cú pháp CSS để hiểu rõ hơn.

2. Lời kết

Như vậy bạn đã hiểu được ý nghĩa của CSS là gì và cách viết CSS đơn giản. Tuy nhiên đó không phải là tất cả nên mình khuyên bạn nên đọc qua serie Css căn bản này để hiểu rõ hơn.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.