Link a separate CSS final in the <head> tags with a self-closing <link> element
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css"/>
</head>- href: Location of the CSS file (relative)
- rel: Specifies relationship between the HTML file and linked file
Notes
styles.cssis the conventional name, but not mandatory
Rationale
- Keeps our HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
- We only need to edit the CSS in one place, which is especially handy for websites with many pages that all share similar styles.
Related: Internal CSS