External Stylesheet

An external stylesheet is a separate text file which includes all the style rules and associate it with the HTML document. It must be named with .css extension.

Exteranl stylesheet-The <link> element

The external stylesheet is include in HTML document by defining it between <head>….. </head> element using element and need to include attributes in the link element.

Syntax of including external css file
<link rel=" " herf=" " type=" " media=" ">
Attributes
  • href: Specify the URL of the stylesheet file.(style.css)
  • rel: Define the relationship between the current document and the document specified by the href attribute. It take the value “stylesheet”.
  • type: Specifies the type of stylesheet and is set to “text/css” (standard) for cascading style sheets and “text/jss” (standard) for JavaScript stylesheet.
  • media: Specifies the device the document will be displayed on. It take the value “screen”, “tty”, “tv”, “projection”, “handheld”, “print”, “braille”, “aural”, “all”.  Default value is “all”.
Example:
<link rel="stylesheet" href="style.css" type="text/css" media="all">
How to include

A simple stylesheet file with name style.css.

h1,h2 {
   color: blue;
   font-weight: normal;
   margin-top: 2em;
   letter-spacing: 4em;
   backgroued-color: red:
}

Now include this file style.css in html document.

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head> 
Importin stylesheet with @import

@ import is used to import an external stylesheet similar to the element.

The @import rule.

<head>
<style>
@import url("style.css")
</style>
</head>

You can also import the css without url() notation. @import”style.css”;

Leave a Reply