HTML link Tag: Linking Stylesheets

The link tag in HTML connects a web page to external resources like stylesheets or icons. It’s placed in the <head> and doesn’t display content.

Understand the <link> Tag in HTML

The <link> tag defines a link between a document and an external resource. It does not create a visible link. It sits in the document head. It connects stylesheets and other external files.

Here is the tag

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

Here are its attributes:

• rel Defines the relationship between the HTML and the external file. Common value is stylesheet.
• href Gives the path or URL of the linked resource. It must point to a valid file.
• type Describes the content type of the linked file. CSS files use text/css.
• media Applies the link only for specific media types or conditions. Use it to load styles for print or screen.
• sizes Applies to icons. Defines icon sizes like 16x16 or 32x32.

Place it inside the element. Browsers load it before the page appears.. All major browsers support the <link> tag. It works across desktop and mobile.

The HTML Link Tag with CSS File

Use to connect a CSS file to your HTML page. This lets you style your content.

Here is the structure you need:

<head>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>

What this means is important. The browser reads the HTML. It finds the <link> tag. It then loads the CSS file. It applies styles to the page.

You must use the correct path. If the file sits in the same folder, use a relative path. If the file sits on another site, use an absolute URL.

This gives you separation between structure and style. This reduces code clutter. It lets you reuse styles across many pages.

You can also use to define icons and alternate stylesheets.

<link rel="icon" href="favicon.ico" type="image/x-icon">

This connects a small image as the browser tab icon.

Preload Resource:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

This tells the browser to load the font early.

Alternate Stylesheet:

<link rel="alternate stylesheet" href="theme-dark.css" title="Dark Mode">

This sets up a secondary stylesheet users can switch to.

The Difference Between <link> and <a> Tags

The <link> defines a resource relationship. It works behind the scenes. The <a> defines a hyperlink. It appears in the page. Users can click it.

Here is the use case:

• Use to load CSS files and preloads
• Use to link users to another page or section

Examples

Load a CSS File:

<head>
  <link rel="stylesheet" href="main.css">
</head>

This example loads a CSS file named main.css. The file sits in the same folder. The browser reads it and applies styles to the page.

Add a Favicon:

<head>
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

This example adds a favicon to the browser tab. The file must exist at the given path.

Preload a Font:

<head>
  <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
</head>

This example tells the browser to load a font early. This reduces layout shifts.

Alternate Stylesheet:

<head>
  <link rel="alternate stylesheet" href="night.css" title="Night Mode">
</head>

This example sets up a secondary theme. It allows a switch without a change to the main stylesheet.

Wrapping Up

In this article, you learned what the <link> tag does and how it works. You also saw how to link CSS and more.

Here is a quick recap:

• Use to connect external files like CSS or icons
• Place it in the
• Use attributes like rel and href
• Use for background tasks. Use for user-visible links

FAQs

Similar Reads