Home > Article > Web Front-end > How to reference external css in html

How to reference external css in html

下次还敢Original: 2024-04-11 11:15:291029browse

Yes, it is possible to use HTML to reference external CSS, thus separating style rules from the HTML document for code simplicity and maintainability. The specific steps are as follows: Create a CSS file containing style rules; in the <head> element of the HTML document, use the <link> element to link to the external CSS file, where the rel attribute specifies the link type as "stylesheet" and the href attribute specifies URL or relative path to the external CSS file.

How to use HTML to reference external CSS

Using HTML to reference external CSS is a common practice, you can use the style Rules are separated from the HTML document, resulting in cleaner, maintainable code. Here's how to reference external CSS in HTML:

1. Create a CSS file

First, create a CSS file that contains the style rules. For example, you can use a file named style.css with the following content:

<code class="css">body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

h1 {
  color: blue;
}</code>

2. Link the CSS file to HTML

Within the <head> element of the HTML document, use the <link> element to link to an external CSS file. As shown below:

<code class="html"><head>
  <link rel="stylesheet" href="style.css">
</head></code>

3. Explanation

<link> The rel attribute of the element specifies the Type, in this case "stylesheet". The href attribute specifies the URL or relative path of an external CSS file.

By using external CSS files, you can manage all your style rules centrally and easily change the style of your entire website without modifying each HTML page.

The above is the detailed content of How to reference external css in html. For more information, please follow other related articles on the PHP Chinese website!

css html href

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to open htmlNext article：How to open html

See more

How to reference external css in html

Related articles