search

Home >Web Front-end >HTML Tutorial >How to link external css in html

How to link external css in html

下次还敢
下次还敢Original
2024-04-11 06:08:40589browse

By connecting external CSS files, style information can be separated from the HTML document, thereby improving code reusability and maintainability. Specific steps include: creating an external CSS file and writing CSS styles; in the section of the HTML document, use the element to link the CSS file to HTML, and ensure that the value of the href attribute is correct for the external CSS file path.

How to link external css in html

How to use HTML to link external CSS

Linking external CSS is to use HTML to separate style information from the HTML document common techniques. Doing so improves code reusability and maintainability.

Steps:

  1. Create an external CSS file:

    • Create a file with .css Text file with extension.
    • Write CSS styles in this file.

  2. Link the CSS file to HTML:

    • In the <head>## of the HTML document # section, use the element to link the CSS file to HTML. 
    3. <code class="html"><head>
  <link rel="stylesheet" href="path/to/style.css">
</head></code>
    Make sure to replace the value of the
  • href property with the correct path to the external CSS file.
Example:

Suppose the external CSS file is named

style.css and it is located in the css subfile of the folder where the HTML file is located folder, the HTML code is as follows: 

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

    The external CSS file can be located in the same folder as the HTML file or in a different folder.
  • Make sure the path to the CSS file is correct, otherwise the style will not be applied.
  • You can link multiple external CSS files to the same HTML document.

The above is the detailed content of How to link 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 read json file in htmlNext article：How to read json file in html

Related articles

See more