CSS @import Rule - Lena Design

The CSS @import rule allows you to import a style sheet into another style sheet.

The CSS @import rule should be placed at the top of the document (after any @charset declaration).

Syntax:

@import url| list-of-mediaqueries;

url – URL that represents the location of the resource to import.

list-of-mediaqueries – comma-separated list of media queries conditioning the application of the CSS rules specified in the linked URL.

Example:

Import custom font to your HTML document (used font source: https://fonts.google.com/):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS @import Rule</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

        p {
  font-family: 'Dancing Script', cursive;
  font-size:100px;
}
    </style>
</head>

<body>
    <p>Some text...</p>
</body>
</html>

Output:

Enjoy coding!

Share this: