Links in CSS

CSS links are used to link external stylesheets to a web page, allowing you to apply consistent styles across multiple pages.

The <link> HTML tag is used for this purpose, and it is placed inside the <head> section of the HTML document.


How to Add CSS Links to Web Pages

To add a CSS link to a web page, you use the <link> tag with the following basic syntax

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

In this example, styles.css is the external stylesheet that contains your CSS rules.

Attributes of the <link> Tag

The <link> tag comes with several attributes that you can use to control how the stylesheet is applied:

  1. rel (Required)

    • Definition: Specifies the relationship between the current document and the linked resource.
       <link rel="stylesheet" href="styles.css">
    • Common Values:
      • stylesheet: Links to an external stylesheet.

  2. href (Required)

    • Definition: Specifies the URL of the stylesheet.
      <link rel="stylesheet" href="https://www.djangoproject.in/css/styles.css">

    • Details: The href attribute can point to a local file or an external URL.

  3. type

    • Definition: Specifies the MIME type of the linked resource.
      <link rel="stylesheet" href="styles.css" type="text/css">
    • Details: Typically, you’ll use text/css for stylesheets. Modern browsers assume this value, so it’s often omitted.

  4. media

    • Definition: Specifies the media type for which the linked resource is designed.
      <link rel="stylesheet" href="print.css" media="print">
    • Common Values:
      • all: Default. Applies the stylesheet to all media types.
      • print: Applies the stylesheet when the page is printed.
      • screen: Applies the stylesheet to screens (computers, tablets, etc.).
    • Details: The media attribute allows you to create styles specific to certain devices or screen sizes.

  5. title

    • Definition: Specifies the title of the linked resource.
      <link rel="stylesheet" href="styles.css" title="Default Styles">
    • Details: This is rarely used, but when provided, it can be used to label the stylesheet.

  6. integrity

    • Definition: Specifies a hash value that browsers can use to verify that the fetched file has been delivered without manipulation.
      <link rel="stylesheet" href="https://www.djangoproject.in/css/styles.css" integrity="sha384-...">
    • Details: This is often used with external stylesheets to enhance security.

  7. crossorigin

    • Definition: Handles CORS (Cross-Origin Resource Sharing) requests for the linked resource. 
      <link rel="stylesheet" href="https://www.djangoproject.in/css/styles.css" crossorigin="anonymous">
    • Common Values:
      • anonymous: Sends a request without credentials.
      • use-credentials: Sends a request with credentials.
    • Details: Used when linking to stylesheets on other domains.

Example

Here’s how you might link to a CSS file.

<head>
    <link rel="stylesheet" href="https://www.djangoproject.in/css/styles.css" type="text/css" media="all">
</head>

This example links to a stylesheet hosted on the Django Project India website. The media attribute is set to all, meaning it applies to all devices.

Summary

Adding CSS links to your web pages is essential for applying styles across your site. By using the appropriate attributes like rel, href, media, and integrity, you can ensure your stylesheets are applied correctly and securely.