DEV Community

Dahye Ji
Dahye Ji

Posted on • Edited on

3 2

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more