13. CSS Trong HTML

CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để xác định kiểu cho các phần tử HTML, giúp bạn tạo ra giao diện và định dạng trang web một cách linh hoạt. CSS có thể được áp dụng bằng cách sử dụng các tệp CSS riêng biệt hoặc thông qua thuộc tính style trong các thẻ HTML. Dưới đây là một ví dụ về cách sử dụng CSS trong HTML:

1. Sử dụng tệp CSS riêng biệt:

Tạo một tệp CSS (ví dụ: style.css):

css

/* style.css */
h1 {
    color: blue;
}

p {
    font-size: 16px;
    color: gray;
}

Sử dụng tệp CSS trong tài liệu HTML:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML với CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Tiêu đề sử dụng CSS</h1>
    <p>Đây là đoạn văn bản với kiểu và màu sắc CSS.</p>
</body>
</html>

2. Sử dụng thuộc tính style trong HTML:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML với CSS</title>
</head>
<body>
    <h1 style="color: blue;">Tiêu đề sử dụng CSS</h1>
    <p style="font-size: 16px; color: gray;">Đây là đoạn văn bản với kiểu và màu sắc CSS.</p>
</body>
</html>

Trong ví dụ này:

Trong cả hai cách sử dụng, chúng ta đã định dạng tiêu đề <h1> bằng cách đặt màu chữ là xanh.
Đoạn văn bản <p> được định dạng với kích thước chữ là 16px và màu chữ là xám.

Lưu ý rằng việc sử dụng tệp CSS riêng biệt có lợi thế trong việc duy trì kiểu cho nhiều trang web và giúp tách biệt giữa nội dung và kiểu. Trên đây là CSS trong HTML

Leave a Comment Cancel Reply