Tách Biệt Mã CSS và HTML

Ở bài học đầu tiên này chúng ta sẽ thực hiện việc tách mã CSS nhúng vào HTML sử dụng thẻ <style> ra một tập tin riêng và rồi sau đó trong HTML tham chiếu tới tập tin này sử dụng thẻ <link>.

Tạo Tập Tin CSS Mới

Trong thư mục chứa các trang web HTML của website bạn hãy tạo một thư mục mới với tên là stylesheets. Sau đó trong thư mục này bạn tiếp tục tạo một tập tin mới main.css.

Tiếp tục bạn mở tập tin home.html và tìm tới thẻ <style> rồi sao chép đoạn mã bên trong thẻ này. Quay trở lại tập tin main.css và dán nội dung được sao chép vào tập tin này. Như vậy lúc này tập tin main.css có nội dung như sau:

#main-menu ul {
    padding-left: 0;
    list-style-type: none;
}
#main-menu ul li {
    float: left;
    margin-right: 15px;
}
.clear-float {
    clear: both;
}

Tham Chiếu Tới Tập Tin CSS

Bạn quay trở lại với tập tin home.html và xoá toàn thẻ style cùng nội dung bên trong thẻ này. Sau đó, phía trước thẻ đóng </head> bạn thêm thẻ <link> như trong đoạn mã HTML sau:

...
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./stylesheets/main.css">
    </head>
...

Cuối cùng sử dụng trình duyệt và mở trang home.html để kiểm tra kết quả. Nếu làm đúng như theo hướng dẫn bạn sẽ thấy trình duyệt hiển thị như sau:

Hiển thị trang chủ của website sau khi tách mã CSS ra khỏi HTML

Trước khi kết thúc bài học bạn cần thực hiện thao tác xoá bỏ thẻ <style> và thêm thẻ <link> để tham chiếu tới tập tin main.css cho hai tập tin HTML còn lại là about.htmlcontact.html.

Thêm Bình Luận