Trước khi tiến hành viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website. Nói về nhúng CSS vào website thì chúng ta có hai cách là:
- Inline Styles – Nhúng trực tiếp vào tài liệu HTML thông
qua cặp thẻ
- 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ẻ
.
Mỗi cách nhúng đều có ưu và nhược điểm khác nhau, cũng như tùy theo trường hợp mà ta sử dụng nó.
Inline 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 các bài học CSS trong serie này bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào website vì sẽ không mất thời gian tạo tập tin, do chúng ta chỉ viết vài đoạn CSS mà thôi. Anyway, bạn có thể sử dụng kiểu bạn thích.
Cách nhúng CSS với Inline Styles
Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ vào vị trí bất kỳ của website [tốt
nhất là bên trong cặp thẻ ] như sau.
[html]
[/html]
Và trong cặp thẻ đó bạn có thể viết CSS vào, ví dụ đơn giản:
Cách nhúng CSS với External Styles
Khi sử dụng cách này, việc đầu tiên là bạn cần tạo ra một tập tin .css với tên bất kỳ, bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo. Sau đó dán một đoạn CSS đơn giản vào như thế này:
p {
color: blue;
font-family: Arial;
}
Và cuối cùng là chèn vào
tập tin HTML bằng thẻ và thẻ này phải đặt bên trong cặp thẻ . Ví dụ:
[html][/html]
Trong đó, thuộc tính rel là khai báo loại tập tin nhúng và href là đường dẫn khai báo tên tập tin .css cần nhúng vào.
Đơn giản phải không nào?
Nhúng tập tin CSS vào bên trong một tập tin CSS
Chẳng hạn bây giờ bạn có 3 tập tin CSS mà bạn không muốn thêm tất cả tụi nó vào website mà chỉ muốn thêm
một tập tin CSS thôi, thì bạn có thể sử dụng cách nhúng các tập tin CSS vào bên trong một tập tin CSS với từ khóa @import, và các từ khóa @import này phải được đặt ở đầu tập tin .css [không bao gồm các đoạn comment].
Ví dụ bạn có thể nhúng một tập tin demo.css vào trong tập tin style.css bằng cách chèn đoạn này vào tập tin style.css:
@import "demo.css";
Lời kết
Việc nhúng CSS vào website của bạn bây giờ đã hoàn tất rồi, mọi thứ vẫn còn rất đơn giản phải không nào? Cũng đúng thôi vì CSS cũng khá đơn giản mà. Và bắt đầu từ bài sau là chúng ta có thể đi sâu vào việc vận dụng một số thuộc tính CSS để trang trí website rồi.
Thạch Phạm
Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".
Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.
CSS is the language we use to style a Web page.
What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
CSS Demo - One HTML Page - Multiple Styles!
Here we will show one HTML page displayed with four different stylesheets. Click on the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the different styles:
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS Example
body {
background-color: lightblue;
}
h2 {
color: white;
text-align:
center;
}
p {
font-family: verdana;
font-size: 20px;
}
Try it Yourself »
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
This is a heading
This is a paragraph.
When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium [W3C] created CSS.
CSS removed the style formatting from the HTML page!
If you don't know what HTML is, we suggest that you read our HTML Tutorial.
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by changing just one file!