Bài viết này sẽ thảo luận về quy trình thêm tệp CSS bên ngoài vào HTML. Chúng tôi cũng sẽ giải thích việc liên kết và nhập tệp CSS bên ngoài trong HTML. Hơn nữa, các ví dụ liên quan đến các phương pháp được đề cập sẽ được cung cấp. Vì vậy, hãy bắt đầu

Nội dung chính Show

Cách thêm tệp CSS bên ngoài vào HTML

Nếu bạn muốn áp dụng đồng thời một kiểu cho nhiều trang web, việc thêm một tệp CSS bên ngoài là hoàn hảo. CSS bên ngoài được coi là một tệp riêng biệt bao gồm tất cả các quy tắc kiểu và tệp này có thể được liên kết với bất kỳ trang HTML nào trên trang web của bạn. Việc thêm tệp CSS bên ngoài cho phép bạn sửa đổi giao diện trang web của mình bằng cách chỉ thực hiện các thay đổi trong một tệp duy nhất. Ngoài ra, việc giữ các tệp CSS, JavaScript và HTML riêng biệt cho phép bạn duy trì mã và cải thiện khả năng đọc

Có hai phương pháp để thêm tệp CSS bên ngoài HTML. liên kết và nhập khẩu

Liên kết tệp CSS bên ngoài trong HTML

Trước hết, chúng ta sẽ tạo một tệp CSS trong HTML. Với mục đích này, bạn có thể mở trình chỉnh sửa mã yêu thích của mình;

Sau khi mở VS Code, chúng ta sẽ tạo một “style. css” Tệp CSS để thêm kiểu

Tiếp theo, chúng tôi sẽ chỉ định kiểu mà chúng tôi muốn áp dụng cho trang web trong tệp CSS đã mở. Ở đây, chúng tôi đã gán các giá trị cho các thuộc tính “nền” và “phông chữ” cho “nội dung” HTML và cũng đã thêm “màu” cho tiêu đề

body {
nền. màu hồng;
phông chữ. 18px Arial, sans-serif;
}
h1 {
màu. xanh da trời;
}

Nhấn “Ctrl+S” để lưu mã đã thêm vào theo kiểu “. tập tin css”

The “” tag is utilized for linking an external CSS to an HTML file. This tag is added in the “” section of an HTML document. We have linked our HTML file with “style.css” in the below-given program, using the tag. Then, we have added a heading with the

tag and a paragraph with the
tag. The specified style in the “style.css” file will be applied to these HTML elements:

< html lang="en">
<head>
<title>linuxhint</title>
<link rel="stylesheet" href="css/style.css" >
< /đầu>
<body>
<h1>This is linuxhint.com</h1 >
< p>We are learing how to add a CSS file in HTML</p>
</body>
</html>
Lưu chương trình JavaScript này và mở tệp HTML của bạn trong trình duyệt
Như bạn có thể thấy, chúng tôi đã áp dụng thành công kiểu được chỉ định cho các thành phần HTML của mình bằng cách liên kết chúng với tệp CSS bên ngoài

Nhập tệp CSS bên ngoài vào HTML

Một phương pháp khác để thêm tệp CSS bên ngoài là sử dụng quy tắc “@import” trong tài liệu HTML. Các khai báo JavaScript “@import” đưa ra hướng dẫn cho trình duyệt để tải và sử dụng các kiểu từ tệp CSS bên ngoài

You can import an external CSS file in HTML by simply adding the “@import” declaration in the

Bạn có thể đặt CSS trong tệp HTML không?

Cách thêm tệp CSS bên ngoài vào HTML

Liên kết tệp CSS bên ngoài trong HTML

Nhập tệp CSS bên ngoài vào HTML