revision:
The <link> tag defines the relationship between the current document and an external resource. The tag is most often used to link to external style sheets. But, it is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
The <link> element is an empty element, it contains attributes only.
crossorigin ; value: anonymous, use-credentials;
specifies how the element handles cross-origin requests.
href ; value: URL;
specifies the location of the linked document.
hreflang ; value: language_code;
specifies the language of the text in the linked document.
media ; value: media_query;
specifies on what device the linked document will be displayed.
referrerpolicy ; value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url;
specifies which referrer to use when fetching the resource.
rel ; value: alternate, author, dns-prefetch, help, icon, license, next, pingback, preconnect, prefetch, preload, prerender, prev, search, stylesheet; required,
specifies the relationship between the current document and the linked document.
sizes ; value: HeightxWidth, any;
specifies the size of the linked resource. Only for rel="icon".
title ; value: ;
defines a preferred or an alternate stylesheet.
type ; value: media_type;
specifies the media type of the linked document.
<link . . . .>
Codes:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Codes:
<link href="main.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">