CSS là gì?
Cascading Style Sheets (CSS) được dùng để định dạng các element và layout website.
Với CSS bạn có thể điều khiển mọi thứ từ color, font, font size, khoảng cách giữa các element, position, background images hoặc background colors và nhiều hơn thế nữa.
Sử dụng CSS
Có 3 cách để thêm CSS vào HTML:
- Inline - sử dụng
styleattribute bên trong HTML elements - Internal - sử dụng
<style>element bên trong thẻ<head> - External - sử dụng
<link>element để đưa một file CSS bên ngoài vào HTML
Cách phổ biến nhất để thêm CSS vào HTML là External. Tuy nhiên, trong các hướng ví dụ chúng tôi sẽ dùng Inline và Internal styles, bởi vì nó trực quan và cũng giúp bạn thử một cách dễ dàng hơn.
Inline CSS
Inline CSS được dùng để style cho một HTML element.
Inline CSS dùng style attribute của một HTML element.
Ví dụ sau sẽ đổi màu chữ <h1> element thành màu xanh dương, và màu chữ của <p> element thành màu đỏ:
<h1 style="color:blue;">Tiêu đề màu xanh dương</h1> <p style="color:red;">Đoạn văn bản màu đỏ.</p>Internal CSS
Internal CSS sẽ được dùng cho một trang HTML.
Internal CSS sẽ được khai báo bên trong thẻ <head> của trang.
Ví dụ
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn bản.</p> </body> </html>
External CSS
External CSS sẽ được dùng cho nhiều trang HTML.
Để sử dụng External CSS bạn cần khai báo thông qua thẻ <link> trong thẻ <head> của trang.
Ví dụ
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn bản.</p> </body> </html>External CSS có thể được viết bởi bất kỳ một text editor nào. Nó sẽ không bao gồm code HTML và được lưu dưới dạng file có đuôi .css.
Một file "style.css" sẽ trông như sau:
body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
CSS Colors, Fonts và Font Sizes
Chúng tôi sẽ đưa ra một số thuộc tính CSS thường dùng, các thuộc tính khác bạn sẽ được học trong khoá CSS ở phần sau.
Thuộc tính CSS color được dùng để thay đổi màu văn bản.
Thuộc tính CSS font-family được dùng để khai báo loại font được sử dụng.
Thuộc tính CSS font-size được dùng để thay đổi kích thước văn bản.
Ví dụ
<!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>Tiêu đề</h1> <p>Đoạn văn bản.</p> </body> </html>
CSS Border
Thuộc tính CSS border được dùng để tạo đường viền xung quanh các element.
Mẹo: Thuộc tính CSS border có thể được sử dụng cho gần như tất cả các element.
Ví dụ
p { border: 2px solid powderblue; }
CSS Padding
Thuộc tính CSS padding được dùng để tạo khoảng cách giữa phần content và phần border.
p { border: 2px solid powderblue; padding: 30px; }
CSS Margin
Thuộc tính CSS margin được dùng để tạo khoảng cách giữa bên ngoài border giữa một element và một element khác.
p { border: 2px solid powderblue; margin: 50px; }
Link to External CSS
External CSS sẽ được dùng link vào trang thông qua một URL bên ngoài website của bạn:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">Thêm file CSS trong cùng một thư mục html trong trang web hiện tại:
<link rel="stylesheet" href="/html/styles.css">Thêm file CSS trong cùng một thư mục với file HTML hiện tại:
<link rel="stylesheet" href="styles.css">