Cách chèn CSS vào trang Web

Có 3 cách để triển khai CSS với một trang web.

Inline CSS

Inline CSS là kiểu khai báo nội tuyến trong một phần tử HTML và nó áp dụng duy nhất đối với phần tử này.

Để sử dụng kiểu khai báo nội tuyến này, bạn chỉ cần thêm thuộc tính style vào phần tử HTML muốn tác động. Thuộc tính style này có thể chứa bất kỳ thuộc thuộc tính CSS nào.

Ví dụ:

<h1 style="color:blue;text-align:center;">Học CSS thật dễ</h1>

Internal CSS

Internal CSS là kiểu khai báo nội bộ. Có nghĩa nó nằm trong 1 trang HTML và có tác dụng duy nhất tác động lên các phần tử HTML của trang đó

Để khai báo kiểu này, bạn phải khai báo các thuộc tính CSS trong cặp thẻ <style> và cặp thẻ <style> này được đặt vào phần <head>

Ví dụ:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: linen;
    }
  
    h1 {
      color: orange;
      margin-left: 40px;
    }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
</body>
</html>

External CSS

External CSS là kiểu khai báo bên ngoài, toàn bộ thuộc tính CSS tác động lên các phần tử HTML sẽ được viết chung vào 1 file có đuôi là .cssVà liên kết với file HTML thông qua thẻ <link> được đặt trong phần <head> của trang HTML.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>This is a heading</h1>

</body>
</html>

h1{
  color: red;
}

Chế độ ưu tiên trong CSS

Thứ tự ưu tiên trong CSS được sắp xếp từ cao đến thấp như sau:

Inline CSS (Độ ưu tiên cao nhất)
External and internal CSS (Hai kiểu này có độ ưu tiên như nhau và ưu tiên thay đổi cuối cùng)

Ví dụ:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <style>
      body {
         background-color: linen;
      }
   </style>
</head>
<body style="background-color: lavender">

   <p>Thứ tự ưu tiên trong CSS được sắp xếp từ cao đến thấp như sau: </p>

</body>
</html>

body {
    background-color: linen; 
}

Ngoài ra, bạn có thể ghi đè lại chế độ ưu tiên bằng cách sử dụng thêm !important vào sau giá trị CSS cần xác định ưu tiên.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Trở thành cao thủ HTML và CSS tại ZENT</title>
	<style type="text/css">
		h1{
			color: red !important;
		}
	</style>
</head>
<body>
	<h1 style="color: blue">CSS phần 1</h1>
</body>
</html>

PreviousCú pháp CSS NextCác bộ Selector trong CSS