As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles. Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet. External style sheets have the least priority.
Priority
Inline > Internal > External
Inline CSS
Inline css will override internal or external css
<h1 style="font-size: 40px; color:red;">Hello World</h1>
Internal CSS
Add <style> inside <head>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal css</title>
<!-- internal css -->
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
External CSS
Adding <link> inside <head>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS κΈ°λ³Έ - external css</title>
<!-- red -->
<link rel="stylesheet" href="016.css">
<!-- blue -->
<link rel="stylesheet" href="016_test.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Importing CSS
You can import css by using @import url("dir/filename.css");
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>importing css</title>
<style>
@import url("016.css");
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
reset.css / normalize.css
The goal of a resetting CSS style is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
reset.css
normalize.css
Top comments (0)