The link element connects an HTML page to an external resource. Most commonly, it attaches a separate CSS file, keeping presentation rules out of the page and making shared styling much easier. section 7.4
Place the tag in the page’s head section. Its href points to the resource, while rel="stylesheet" tells the browser what relationship that resource has to the page. The href can name a nearby file, describe a subdirectory path, use a root-based path, or contain a full remote URL. section 7.4
Common external stylesheet locations include:
- Same directory: styles.css section 7.4
- Subdirectory: css/styles.css section 7.4
- Website root subdirectory: /css/styles.css section 7.4
- Remote stylesheet: a complete CSS URL section 7.4
Attach a stylesheet
Add this inside <head>: <link href="styles.css" rel="stylesheet">. Several pages can link to the same file, so one CSS change updates their shared look. The old type="text/css" attribute may appear in examples, but HTML5 does not require it. section 7.4
The same element can load hosted web fonts. Font services such as Google Fonts provide generated link tags; paste those tags into <head>, before the link to your own CSS file. Then use the chosen family in CSS, such as font-family: Lato, sans-serif. Hosted services handle font licensing and hosting, though remote files and multiple font links can add loading time. section 18.3
<link href="styles.css" rel="stylesheet">
Inspect a minimal stylesheet link, then compare it with the generated Google Fonts links for a more complete head-section example. section 7.4 section 18.3
