How to reference external css in html-HTML Tutorial-php.cn

How to reference external css in html

下次还敢

Release： 2024-04-11 11:15:29

Original

1046 people have browsed it

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 reference external css in html

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>

Copy after login

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>

Copy after login

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!