A link element is a signpost in a web page’s head section: it tells the browser where to find an external style sheet. Put the CSS in its own .css file, then use href for its location and rel="stylesheet" to identify the relationship. section 7.7
<link href="styles.css" rel="stylesheet">
This compact link element attaches styles.css when that CSS file sits in the same directory as the web page. section 7.7
The href value changes with the CSS file’s location:
- Use just the filename for a file alongside the page: styles.css. section 7.7
- Start with a subdirectory name for a nested CSS file: css/styles.css. section 7.7
- Start with / for a CSS directory from the website’s main directory: /css/styles.css. section 7.7
- Use a full URL when the stylesheet lives on a remote server. section 7.7
External style sheets keep style rules separate from the web page. The same stylesheet syntax used inside a style element works in the .css file, without the style element itself. In HTML5, type="text/css" is not needed on the link element, though it was required in HTML 4.01. section 7.7
Linking a hosted font
A font service can generate a link element for the head section. After it loads the font stylesheet, CSS can select the font with font-family. Add only the font variants you need: linking more fonts can slow page loading. section 18.6
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
This generated link element requests Lato in regular, italic, and bold variants from Google Fonts. section 18.6
Try it: create a styles.css file, place a link element in the page head, and give one element a style rule. If the file is elsewhere, adjust href like giving the browser a more detailed address. section 7.7
