The <link> tag

The <link> tag defines the relationship between the current HTML document and an external resource. It is most commonly used to include external stylesheets (CSS) or to add a website icon (favicon). The <link> element is an empty element, meaning it only contains attributes and has no closing tag. In the PHPStorm IDE, you create an external style by right-clicking the project and selecting New > Stylesheet, choosing the css type, and naming the file (e.g., zunanji.css). You then insert the file into the head (<head>) of the HTML document:

<link rel="stylesheet" href="style.css">

EXAMPLE

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>how to define the relationship between a document and an external resource</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem Ipsum is dummy text used in typography development and prepress. Lorem Ipsum has been in use for more than five 
hundred years, since an unknown printer combined these characters into a specimen book at the beginning of the 16th 
century. This text has not only survived five centuries but has also successfully established itself in electronic 
desktop publishing with minor changes. Lorem Ipsum gained popularity in the 1970s with the launch of Letraset sheets 
featuring Lorem Ipsum paragraphs. More recently, Lorem Ipsum has appeared in popular desktop publishing programs such as 
Aldus PageMaker.</p>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<p>Lorem Ipsum is dummy text used in typography development and prepress. Lorem Ipsum has been in use for more than five 
hundred years, since an unknown printer combined these characters into a specimen book at the beginning of the 16th 
century. This text has not only survived five centuries but has also successfully established itself in electronic 
desktop publishing with minor changes. Lorem Ipsum gained popularity in the 1970s with the launch of Letraset sheets 
featuring Lorem Ipsum paragraphs. More recently, Lorem Ipsum has appeared in popular desktop publishing programs such as 
Aldus PageMaker.</p>
</body>
</html>                    
                

                    
                    
                        
* {
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 30px;
}

h1 {
    margin: 0;
    padding: 10px;
    background: blue;
    color: white;
    border-radius: 8px;
    text-align: center;
}

p {
    display: block;
    width: 100%;
    padding: 10px;
    border: 4px double lightblue;
    border-radius: 12px;
}

ol {
    display: block;
    width: 100%;
    list-style: none;
    filter: drop-shadow(0 0 0.50em green);
}

ol li {
    padding: 10px;
    background: yellowgreen;
    color: black;
    margin-left: -35px;
}
                            
                    
                

RESULT

The table below shows the attributes that can be used with the <link> element to more precisely define the connection, specify the target device (media), manage security policies, or specify the language and type of the resource.

crossorigin	Specifies how the element handles cross-origin requests.	See Example
href	Specifies the location of the linked document.	See Example
hreflang	Specifies the language of the text in the linked document.	See Example
media	Specifies on which device the linked document will be displayed.	See Example
referrerpolicy	Specifies which referrer to use when fetching the resource.	See Example
rel	Required. Specifies the relationship between the current document and the linked document.	See Example
sizes	Specifies the size of the linked resource. Only for rel="icon".	See Example
title	Specifies a preferred or alternate stylesheet.	See Example
type	Specifies the media type of the linked document.	See Example