<link> describes a relationship between the document and another resource, commonly a stylesheet or favicon. It is void and usually belongs in the head. It is different from a visible a link.
A stylesheet that needs no separate file
The stylesheet is a tiny data URL so this complete document works by itself. In a real project, a file such as styles.css is usually easier to maintain.
HTML and CSS
HTML
<h1>A linked stylesheet</h1>
<p>The heading is blue because the linked CSS applies.</p>CSS
Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Relationships and attributes
rel="stylesheet" loads CSS from href; media can restrict when it applies. rel="icon" identifies an icon. rel="alternate" describes an alternative representation, and rel="canonical" identifies a preferred URL for indexing systems; these have different purposes.
A preload hint needs the appropriate as destination and matching request details. It fetches a resource early; it does not apply a stylesheet by itself. Use hints after measuring a need rather than preloading every file. Integrity and CORS attributes must match the delivery setup when used.
Inspect the request
Copy the example and inspect its head and computed heading color. Change the encoded color in href and reload. Use the browser’s Network and Styles panels to distinguish loading a resource from applying its rules.
Use style for embedded CSS, and verify relative paths against the document’s base URL when linking a real file.
Sources and browser support
MDN: link describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.