Chúng ta đều đã biết rằng HTML có thể giúp chúng ta nói chuyện được với các trình duyệt web và nhờ có đó thì chúng ta có thể yêu cầu các trình duyệt web hiển thị bất kỳ loại nội dung nào mà chúng ta mong muốn. Tuy nhiên sự thật là không có thẻ HTML nào có thể giúp chúng ta nói với các trình duyệt web rằng những nội dung cần được trình bày đẹp mắt như thế này hay như thế kia.
Không có gì đáng thất vọng cả. HTML quá đơn giản. Đơn giản trong cả cách học và cách sử dụng.
Chính vì vậy mà ngôn ngữ này không thể giúp chúng ta thực hiện được quá nhiều mục tiêu.
Mọi thứ đều có khả năng và giới hạn của riêng nó. Lửa có thể đem lại sự sống và kiến thức, nhưng
chúng ta cũng cần tới trí tuệ và sự chữa lành của Nước. Và vì vậy nên... CSS có mặt ở đó để
hoàn thiện HTML. 
Ok. Vòng vo vậy đủ rồi.
Đây là phiên bản giới thiệu ngắn hơn về CSS:
- CSS là một ngôn ngữ đơn giản khác giúp chúng ta nói chuyện được với các trình duyệt web.
- CSS giúp chúng ta biến các trang web trở nên bắt mắt, dễ nhìn, và đẹp đẽ hơn.
- Việc học CSS rất đơn giản và rất rất rất vui.
Khi chỉ có HTML
Và khi có thêm CSS
Ồ. Mình không có ý nói là tấm ảnh chụp màn hình thứ 2 trông đẹp hơn so với tấm đầu tiên;
Bởi vì mình không có năng khiếu với mấy thứ liên quan tới thiết kế cho lắm. Tuy nhiên thì
mình đảm bảo rằng CSS có thể giúp bạn tạo ra các trang web đẹp mắt và có sức sống hơn
so với các văn bản HTML đen trắng.
Nếu không có HTML thì sẽ không có website nào tồn tại cả.
Nếu không có CSS thì sẽ không có website nào trông đẹp mắt cả.
_Một người sử dụng máy tính
Vậy code CSS trông như thế nào?
Ví dụ
section { color: white; background-color: crimson;
} h1 { font-size: 27px; } p { font-size: 18px; }
Bạn có cảm thấy rằng CSS có phần chi tiết và dễ đoán hơn so với HTML không?
Để mình giải thích một chút về đoạn code ví dụ ở trên nhé:
- Có
03khối code CSS trong ví dụ ở trên. Mỗi khối đều có01cặp ngoặc xoắn{}để nhóm cái gì đó. - Đứng ngay phía trước các
{}là cácselector(bộ chọn). Các bộ chọn giúp chúng ta chọn ra những phần tử HTML mà chúng ta muốn trang trí. - Bên trong mỗi
{}có một vài luật CSS giúp nói với các trình duyệt nên hiển thị các phần tử HTML đã chọnnhư thế nào. Cụ thể thì làmàu chữ: trắng,màu nền: đỏ thắm,cỡ chữ h1: 27px,cỡ chữ p: 18px. - Mỗi luật CSS đều được kết thúc bằng một dấu chấm phẩy
;và có 2 phần được phân tách bởi 1 dấu 2 chấm:. - Phần phía bên trái là một
property(thuộc tính hiển thị) của phần tử HTML được chọn mà chúng ta muốn thay đổi. - Phần phía bên phải là một
value(giá trị hiển thị) mà chúng ta muốn áp dụng cho thuộc tính đó.
Việc học CSS chỉ đơn giản là thử qua thử lại các Selector, Property, và Value (bộ chọn, thuộc tính, và giá trị).
_Một người sử dụng máy tính
Vậy code CSS được đặt ở đâu?
Cái này thì chúng ta nên bắt tay vào viết sẽ dễ hơn giải thích. Bạn hãy thực hiện mấy thao tác này:
- Dùng Atom để tạo ra 2 tệp đặt trong cùng thư mục.
- Một tệp HTML có tên là
simple.html. - Và một tệp CSS có tên là
beauty.css.
Trong văn bản HTML, ở vị trí ngay trước thẻ đóng </head>, bạn hãy tạo một thẻ <link> trỏ tới tệp CSS:
<link rel="stylesheet" href="beauty.css">
Chúng ta sẽ tạo ra một trang đơn với chữ màu trắng và nền màu đỏ:
- Trong văn bản HTML, bạn thêm vào một tiêu đề
h1với câu này:Simple is beautiful . - Trong tệp CSS... bạn hãy copy/paste đoạn mã dưới đây.
simple.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>The beauty of Simplicity</title> <link rel="stylesheet" href="beauty.css"> </head> <body> <h1>Simple is beautiful .</h1> </body>
</html>
beauty.css
body { background-color: crimson; } h1 { text-align: center; color: white;
}
Kết quả hiển thị trên trình duyệt web của bạn như thế nào? Mình tin là bạn đã thấy CSS cũng rất dễ đoán. Không có thứ gì quá khó hiểu ở đây cả. CSS chỉ đơn giản như vậy thôi. Bạn đã sẵn sàng để học thêm về các Selector, Property, và Value chưa?
Bài viết đầu tiên về CSS của chúng ta kết thúc tại đây nhé. Hẹn gặp lại bạn trong bài tiếp theo.