How to import external CSS file in HTML?

To import an external CSS file in a HTML, add the following line in the <head> section of the HTML:

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

To import CSS styles from an external file in HTML, you can use the <link> element within the <head> section of your HTML document. This method references the external CSS file and applies its styles to the HTML document. Here’s how you do it:

Create a CSS File:
- Create a separate CSS file (e.g., styles.css) and write your CSS rules in it.

/* styles.css */
body {
    background-color: #f0f0f0;
}

h1 {
    color: blue;
}

Link the CSS File in HTML:

Use the <link> element in the <head> section of your HTML document to link the CSS file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph.</p>
 </body>
</html>

In this example:

The href attribute of the <link> element specifies the path to the external CSS file (styles.css).
The rel attribute should be set to "stylesheet" to indicate that this is a stylesheet link.
The type attribute is optional in HTML5 and can be omitted. If included, it should be set to "text/css".

By following these steps, the styles defined in styles.css will be applied to the HTML document.