Hướng dẫn đưa CSS vào Website/Blog

 Như bài viết trước thì chúng ta đã tìm hiểu về cấu trúc của CSS thì hôm nay chúng ta sẽ tìm hiểu xem CSS sẽ được đặt ở đâu trong Website/blog hay trang HTML.

Vị trí đặt CSS.

CSS có thể đặt ở bất cứ đâu trong 1 file HTML, nhưng mình khuyên mọi người nên đặt ở giữa 2 cặp thẻ <head></head>

Cách khai báo CSS.

CSS có những cách khai báo sau:
 • Inline Styles – Viết trực tiếp vào tài liệu HTML thông qua thuộc tính <style>.
 • Internal Styles – Nhúng trực tiếp vào tài liệu HTML và nằm trong thẻ style <style> </style>.
 • External Styles – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <link>.

Mỗi cách nhúng đều có ưu và nhược điểm khác nhau, cũng như tùy theo trường hợp mà ta sử dụng nó.

Cách nhúng CSS với Inline Styles

 Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo <style> (style="code css") như sau:
<div style="background:red; color: blue">Hello! Wixlog.xyz</div>

Demo:

Hello! Wixlog.xyz

Cách nhúng CSS với Internal Styles.

 Chúng ta sẽ code bên trong thẻ <style type="text/css"> code css </style>.

<style type="text/css">
    div{
        background:red; 
        color: blue;
    }
</style>
<div>Hello! Wixlog.xyz</div>

Cách nhúng CSS với External Styles

 Khi sử dụng cách này, việc đầu tiên là bạn cần tạo ra một tập tin .css với tên bất kỳ, bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo. Và sau đó import vào file HTML thông qua thẻ link. Sau đây là một ví dụ cho cách này.

Bước 1: Tạo một file "*.css":
Ví dụ:

div{
    background:red; 
    color: blue;
}
Bước 2: Khai báo file css vào html
 Các bạn sử dụng cấu trúc link như này để khai báo

<link href="style.css" rel="stylesheet"/>
<div>Hello! Wixlog.xyz</div>

 •  Trong thẻ link có một thẻ "href", đây là chỗ bạn sẽ điền đường dẫn đến file CSS của bạn.
 •  rel="stylesheet" báo cho trình duyệt đây là file CSS

Lưu ý

 Tới đây mình mới nói một số lưu ý dành cho các bạn khi viết CSS như sau:
 • Không nên viết dạng inline bởi vì nó khó quản lý và không tốt cho SEO
 • Dạng internal có thể chấp nhận được nhưng bạn nên đặt CSS ở trên thẻ head, dạng này cũng không tốt cho SEO
 • dạng external khuyến khích sử dụng vì nó mang tích tách biệt HTML và CSS, rất tốt cho SEO lẫn coder vì dễ quản lý. Tương tự như dạng internal khi import vào bằng thẻ link thì bạn nên đặt nó ở thẻ head.

Lời kết

Việc nhúng CSS vào website của bạn bây giờ đã hoàn tất rồi, mọi thứ vẫn còn rất đơn giản phải không nào? Cũng đúng thôi vì CSS cũng khá đơn giản mà. Và bắt đầu từ bài sau là chúng ta có thể đi sâu vào việc vận dụng một số thuộc tính CSS để trang trí website rồi. Hãy chờ đón bài viết tiếp theo nhé. Hẹn gặp lại Hướng dẫn đưa CSS vào Website/Blog