DEV Community

Dahye Ji
Dahye Ji

Posted on • Updated on

CSS basic 1 - inline/internal/external CSS

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)