Cách chạy file CSS

Mã CSS có thể được thêm vào trang HTML bằng cách tham chiếu tới tập tin CSS bên ngoài sử dụng thẻ :

Trong thẻ trên có ba thuộc tính:

• Thuộc tính rel: Dùng để xác định mối quan hệ giữa tập tin được tham chiếu với trang HTML. Trong trường hợp này chúng ta muốn tham chiếu tới một tập tin định kiểu theo tầng hay một stylesheet.
• Thuộc tính type: Dùng để xác định loại tập tin được tham chiếu.
• Thuộc tính href: Dùng để xác định địa chỉ URL của tập tin CSS.

Thẻ trên cần được đặt bên trong thẻ

1:

Kiểu thêm mã CSS bằng cách tham chiếu tới tập tin CSS này còn được gọi là kiểu external.

Đây cũng cũng là kiểu chèn CSS được khuyên dùng vì nó giúp tách biệt mã CSS với mã HTML giúp lập trình viên có thể dễ dàng hơn trong việc quản lý mã lệnh.

Chèn CSS Vào Thẻ HTML

Mã CSS có thể được thêm trực tiếp vào thẻ (mở) HTML sử dụng thuộc tính

2:

Đoạn văn sẽ có màu đỏ.

Với cách thêm mã CSS này thì luật CSS được thêm vào chỉ áp dụng được cho phần tử với thẻ HTML tương ứng.

Kiểu thêm mã CSS sử dụng thuộc tính

2 như trên còn được gọ là kiểu inline.

Đây là kiểu chèn nên hạn chế sử dụng vì mã CSS sẽ rải rác cùng với mã HTML gây khó khăn trong việc quản lý mã lệnh sau này.

Nhúng CSS Sử Dụng Thẻ 4

Mã CSS có thể được thêm vào trang sử dụng thẻ

4:

Thẻ

4 ở trên thường được đặt ở bên trong thẻ

1 hoặc trước thẻ

8. Tất nhiên bạn cũng có thể đặt ở giữa các phần tử khác trong trang như sau:

    


    
Thẻ p thứ nhất
    
    
Thẻ p thứ hai

Tuy nhiên cần hạn chế việc đặt thẻ

4 như trên vì sẽ khiến mã CSS rải rác trên trang HTML và dẫn tới khó quản lý.

Trước khi tiến hành viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website. Nói về nhúng CSS vào website thì chúng ta có hai cách là:

• Inline Styles – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ .
• 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ẻ .

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ó.

Inline Styles

• Thích hợp với việc chèn một vài đoạn CSS ngắn.
• Trình duyệt không mất thời gian tải tập tin CSS.

External Styles

• Thích hợp với việc chèn nhiều đoạn CSS, dễ quản lý.
• Nhưng trình duyệt sẽ mất thêm thời gian để tải tập tin CSS.

Và trong các bài học CSS trong serie này bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào website vì sẽ không mất thời gian tạo tập tin, do chúng ta chỉ viết vài đoạn CSS mà thôi. Anyway, bạn có thể sử dụng kiểu bạn thích.

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 cặp thẻ

[/html]

Và trong cặp thẻ