Để CSS có thể áp dụng trên website hoặc tài liệu HTML thì chúng ta phải nhúng nó vào. Có 02 cách nhúng như sau:
- Internal Styles – Nhúng trực tiếp vào tài liệu HTML. Nội dung CSS đặt trong cặp thẻ
<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>.
Tùy trường hợp mà chúng ts sẽ xem xét và sử dụng cho phù hợp. Ví dụ CSS ngắn và đơn giản thì chúng ta dùng cách 1, nếu nó phức tạp và dài thì tốt nhất nên tạo một file CSS riêng và nhúng theo cách 2. Đây là những ưu nhược điểm của 02 cách này:
Internal 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 serie này chúng ta sẽ sử dụng kiểu Internal Styles để nhúng CSS để các bạn dễ hình dung, vì CSS ví dụ nên nó ngắn và đơn giản thôi. Kiểu External Styles các bạn tự tìm hiểu sau nhé !
Nhúng CSS kiểu Internal Styles
Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ <style> vào vị trí bất kỳ của website (tốt nhất là bên trong cặp thẻ <head>) như sau.
<style type="text/css"> ... Nội dung CSS ... </style>
Để hình dung bạn tham khảo ví dụ sau đây:
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề webiste</title>
<style type="text/css">
p {
color: blue;
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<p>Nội dung bài viết: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus
facilisis felis massa, at bibendum lorem fringilla ut. Sed
ipsum sapien, elementum id felis ut, iaculis pulvinar elit.
</p>
.
</body>
</html>
Các bạn copy và dán vào Codepen để xem nó như thế nào nhé ! Bài này nội dung như vậy thôi, bắt đầu từ bây giờ các bạn đã có thể tự tạo cho mình một văn bản HTML có định dạng CSS rồi. Còn để thực hiện nhiều tùy chỉnh hơn chúng ta sẽ tiếp tục với những bài tiếp theo.
Bài học trước đó và tiếp theo
![[Học CSS] Bài 12: Làm việc với margin trong CSS](https://hocban.vn/wp-content/uploads/2017/05/Hoc-CSS-211x150.jpg "[Học Css] Bài 12: Làm Việc Với Margin Trong Css")
![[Học CSS] Bài 14: Tìm hiểu về Box Model trong CSS](https://hocban.vn/wp-content/uploads/2017/03/Hinh-dung-ve-CSS-Box-Model-211x150.png "[Học Css] Bài 14: Tìm Hiểu Về Box Model Trong Css")
