CSS external style sheet

Inserting a style sheet using the <link> tag
Inserting a style sheet using @import rule

There are two types of style sheets, internal and external, depending on where the styles are defined: directly on the page itself or in an external file associated with a Web page.

An external style sheet is a plain text file that contains all the CSS code. Its contents should not include any HTML tags, so there is no need to specify the <style> tag, the file with the external style sheet must have the extension .css, the file name can be any.

To insert an external style sheet, you need to attach it to an HTML document using the <link> tag, which should be located inside the <head> tag or using the @import built-in CSS rule.

Inserting a style sheet using the <link> tag

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

The <link> tag must contain three attributes:

rel="stylesheet" - specifies the reference type. In this case, it is a reference to the style sheet
type="text/css" - specifies the type of file referenced by the tag
href="styles.css" - defines the path to an external CSS file

You can attach many style sheets to pages by adding several <link> tags.

Inserting a style sheet using @import rule

Unlike the <link> tag, the @import rule is used inside the <style> tag. To connect an external style sheet after the @import keyword, use url(), the parentheses specify the path to the external CSS file, which can be enclosed in quotation marks: url("main.css");. Using url() to specify the path to the CSS file is optional, you can simply write: @import "path_to_file"; in this case the path must be specified in quotation marks.

Using the @import rule, you can connect any number of external tables:

<style>
  @import url(main.css);
  @import url(dir/main2.css);
</style>

After the @import rule, you can add ordinary CSS styles if, for example, you want to create a style that you want to apply to only one web page, using the style sheet described in the external CSS file to format the rest of the content:

<style>
  @import url(main.css);
  @import url(dir/main2.css);
  p { color: red;}
</style>

Note: The @import rule does not have to be in the <style> tag, it can also be included in external style sheets.

The advantage of using an external style sheet is that if you need to make any changes to the CSS code when there are a lot of pages on the site, you will have to edit the CSS code in only one file, not all HTML documents.

With this theme look: