<link href="main.css" rel="stylesheet">
  1. The HTML external resource link specifies the relationship between the current document and an external resource
  2. Usually, links to stylesheet but may also link to icons, such as favicon
  3. Both href and rel attributes are compulsory
  4. May occur in body or head (stylesheet is 'body-OK') but not good practice to use in body


  1. href
    1. The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL
    2. The address of the resource is given by the href attribute
  2. rel
    1. A link element must have rel attribute
    2. The relationship between the document and the resource is given by the rel attribute
    3. Other values for rel are author, icon, stylesheet, alternate
    4. Use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets
    5. rel is short for "relationship"
  3. type
    1. The type attribute gives the MIME type of the linked resource
    2. It is purely advisory
    3. The value must be a valid MIME type (type="image/png")
  4. media
    1. The optimum media for the resource is given by the media attribute
    2. The default is "all"
    3. If the link is a hyperlink then the media attribute is purely advisory
    4. If the link is an external resource link, then the media attribute is prescriptive.
    5. Value must be a valid media query
  5. hreflang
    1. The language of the resource is given by the hreflang attribute.
  6. sizes
    1. Specifies icon size (sizes="114x114")
  7. title
    1. Special semantic meaning in link tag
    2. Specifies a preferred or alternative stylesheet
    3. Style sheets linked with the same title are part of the same choice.
    4. Style sheets linked without a title attribute are always applied.
  8. disabled
    1. For rel="stylesheet" only
  9. preload
    1. If rel="preload" then may use as attribute
  10. as
    1. Specifies the type of content being loaded by the link
    2. For example, as="audio"
Types of Stylesheet
  1. Persistent
    1. Has rel="stylesheet"
    2. NO title=""
    3. Always applies to the document
  2. Preferred
    1. Has rel="stylesheet"
    2. Specified title=" "
    3. Applied by default
    4. Disabled if an alternate stylesheet is selected
    5. There can only be one preferred stylesheet
  3. Alternate
    1. Has rel="alternate stylesheet"
    2. Disabled by default
    3. Can be selected from View->Page View but only works on Firefox, it would seem!


<link href="print.css" rel="stylesheet" media="print">


 <link href="default.css" rel="stylesheet" title="Default Style" />
 <link href="fancy.css" rel="alternate stylesheet" title="Fancy" />


<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">


<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">


<link rel="icon" href="http://xu/tgdfiles/icon/bonnie.ico">


<link rel="preload" as="font" type="font/woff2" href="your-font.woff2">


  1. anchor-area-base-link all href
  2. Tim Benners-Lee: a is for anchor, href is for hypertext reference