Bài 1 - Giới thiệu về CSS - Cú pháp CSS | eCode | Đào tạo lập trình và marketing online

Mặc dù HTML cũng có những thuộc tính giúp chúng ta định dạng màu sắc, kích thước của một số thành phần trên web nhưng khi chúng ta muốn tùy chỉnh vị trí của một phần tử hoặc tạo hiệu ứng cho phần tử thì HTML không thể làm được. Lúc này chúng ta sẽ cần sử dụng đến CSS.

Vậy CSS là gì? CSS là viết tắt của từ viết tắt của từ Cascading Style Sheets. Với CSS chúng ta có thể thỏa sức sáng tạo trong thiết kế website bằng cách tùy chỉnh vị trí các phần tử, màu sắc, màu nền, font chữ, thứ tự sắp xếp của các phần tử, hiệu ứng (đổ bóng, bo góc, xoay...) những điều mà HTML gần như không thể làm được.

Vậy làm sao để nhúng CSS vào trong website? Chúng ta có 3 cách.

Cách 1: Chèn vào trong thẻ <style></style>.

<!DOCTYPE html>
<html>
   <head>
      <title>Demo CSS</title>
      <style>
       body{
         color:yellow;
         background:red;
       }
      </style>
   </head>
   
   <body>
	This is a test CSS in style tag
   </body>
</html>

Ví dụ chèn CSS trong thẻ <style>

Cách 2: Chèn trong thuộc tính style của phần tử HTML.

<!DOCTYPE html>
<html>
   <head>
      <title>Demo chèn CSS trong thuộc tính style</title>
      
   </head>
   
   <body style="color:red;background:yellow">
	This is a test CSS in style tag
   </body>
</html>

Ví dụ chèn CSS trong thuộc tính style

Cách 3: Chèn file .css thông qua thẻ <link> vào trong thẻ <head> của tài liệu HTML. Ví dụ:

<!DOCTYPE html>
<html>
   <head>
      <title>Demo CSS</title>
      <link rel="stylesheet" href="/style.css">
   </head>
   
   <body>
	This is a test CSS in style tag
   </body>
</html>

Thông thường chúng ta nên chọn cách thứ 3 vì cách này giúp chúng ta dễ dàng cập nhật lại CSS cho hàng loạt các trang mỗi lần có thay đổi, tất cả các trang đã chèn file CSS sẽ được áp dụng hiệu ứng đã được cập nhật. Bên cạnh đó việc áp dụng cách thứ 3 sẽ giúp cho website thân thiện hơn với các search engine.

Cú pháp viết CSS:

CSS gồm 3 phần: CSS selector (cách chúng ta chọn ra phần tử HTML sẽ áp dụng hiệu ứng), property (thuộc tính CSS), value (giá trị CSS).

Khi chúng ta chèn CSS bằng cách 1 hoặc cách 3 chúng ta viết CSS như sau: css selector{property: value}

Còn khi chúng ta chèn bằng cách 2 (trong thuộc tính style của phần tử HTML) chúng ta viết như sau: property:value

Trong trường hợp có nhiều thuộc tính CSS thì các thuộc tính sẽ ngăn cách với nhau bằng dấu ;