Bao gồm CSS trong tài liệu HTML

Để đưa CSS vào tài liệu HTML, chúng tôi có thể đưa chúng vào nội bộ, nội dòng hoặc liên kết tệp bên ngoài.

Cú pháp

Cú pháp để bao gồm các tệp CSS trong HTML như sau

/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>

Ví dụ

Các ví dụ sau đây cho thấy liên kết của tệp CSS trong Tài liệu HTML

CSS nội tuyến

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Forte;">Demo text</p>
<p style="background-color: lightblue;">This is Demo text</p>
<img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;">
</body>
</html>

Đầu ra

Điều này cho kết quả sau -

Bao gồm CSS trong tài liệu HTML

Ví dụ

Liên kết nội bộ

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 5%;
}
div > div {
   border-color: transparent;
   box-shadow: inset 0 0 6px red;
}
div > div > div {
   border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

Đầu ra

Điều này cho kết quả sau -

Bao gồm CSS trong tài liệu HTML

Ví dụ

Liên kết bên ngoài

Trong CSS, bạn cũng có thể bao gồm một tệp css bên ngoài và đặt các kiểu css trong đó. Điều tương tự có thể được tham chiếu từ tệp HTML như được hiển thị trong ví dụ dưới đây -

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Demo text</p>
<p>Demo text again</p>
</body>
</html>

Đầu ra

Điều này cho kết quả sau -

Bao gồm CSS trong tài liệu HTML

Sau đây là style.css -

p {
   text-decoration: overline;
   text-transform: capitalize;
}