CSS Thứ tự ưu tiên.


CSS ưu tiên như sau :

  1. Browser default
  2. External style sheet
  3. Internal style sheet
  4. Inline style

=>Inline Style là ưu tiên hơn mấy trường hợp trên.

* Browser default

<a href="#">This is a link</a>

This is a link

Default thẻ a có màu xanh dương.

* External CSS

|-- styles.css
|-- index.html

#styles.css 

a {
  color:orange;
}

# index.html
<head>
 ...
 <link href='styles.css' ref='stylesheet' type='text/css' />
</head>

<body>
<a href="#">This is a link</a>

</body>

This is a link

=> Ta tạo 1 file css riêng và link file này vào index.html. Lúc này "This is a link" sẽ có màu orange. Do External CSS ưu tiên hơn Browser default.

* Internal Style

Ta cũng có thể thêm CSS vào file index.html luôn, do đó được gọi là internal CSS.

<html>
<head>
<title>HTML/CSS</title>
<link href='style.css' ref='stylesheet' type='text/css' />

<style>
  a {
   color: green;
  }
</style>
<head>

<body>
 <a href="#">This is a link</a>
</body>
</html>

This is a link

* Inline CSS

Ta có thể thêm css vào trực tiếp thẻ luôn được gọi là inline css.

<html>
<head>
<title>HTML/CSS</title>
 <link href='style.css' ref='stylesheet' type='text/css' />
<style>
  a {
   color: green;
  }
</style>
<head>

<body>
 <a href="#"  style="color:cyan;" >This is a link</a>
</body>
</html>
HTML/CSS This is a link

Vậy là ta đã biết cách thêm CSS vào trong HTML rồi đó ^_^.