Khi đến với lập trình web chắc hẳn bạn không thể không biết đến CSS, đây là ngôn ngữ hàng đầu được sử dụng để xây dựng website hiện nay. Bài viết này sẽ giúp bạn hiểu rõ hơn CSS là gì và cách nhúng CSS vào HTML như thế nào.
CSS là gì? Làm sao để nhúng CSS vào file HTML?

Ngôn ngữ CSS là gì?

Nếu như HTML có chức năng dựng khung xương cho website thì CSS có vai trò định dạng kiểu hiển thị cho HTML.
CSS là viết tắt của Cascading Style Sheets. Nó sẽ dùng để trang trí để trang web trông đẹp và thân thiện hơn với người dùng.
Một tập tin sẽ được lưu với đuổi mở rộng là file.css

Cách thức hoạt động của CSS

Bạn hãy thử chạy file này vidu.html lưu lại trong notepad++

<html>
<head>
<style>
body {
background: blue;
}
</style>
</head>
<body>
<p> Đây là văn bản </p>
</body>
</html>

Sau khi khởi chạy bạn sẽ thấy màu nền là màu xanh phải không nào. Lúc này CSS sẽ áp dụng trực tiếp vào body của HTML và hiển thị lên trình duyệt. Hay nói cách khác khi chạy mã CSS trình duyệt sẽ hiểu rằng body là màu xanh.

Cách nhúng CSS vào HTML

Có 3 kiểu nhúng đó là Inline, Internal và External

- Kiểu Inline sẽ áp dụng trực tiếp trên HTML

Ví dụ:

<p style="font-size: 20px; color: red">Xin chào</p>

- Kiểu Internal

Sẽ đặt trong cặp thẻ <head>...</head>

<head>
<style>
body {
background: green;
}
</style>
</head>

- Kiểu External

Sẽ gọi 1 file riêng biệt.

Bạn sẽ tạo ra 2 tập tin là vidu.html và style.css

+ Code vidu.html như sau:

<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<p> Đây là văn bản </p>
</body>
</html>

+ Code style.css như sau:

body {
background: blue;
}

Sau đó bạn thử chạy file vidu.html trên trình duyệt xem kết quả nhé!

Lời kết: Qua bài viết này bạn đã hiểu rõ hơn về CSS là gì chưa nào? Nó khá đơn giản chỉ cần bạn dành ra 2, 3 ngày học là có thể nắm được CSS căn bản rồi. Nhưng để giỏi hơn cần phải học và thực hành liên tục. Chúc bạn thành công!

Đọc thêm