1. Introduction to Types of CSS

1.4. External Stylesheet

        

          The last type of CSS is the external stylesheet. This type of CSS is used to have a single uniform style applied on every web page of a website that uses it. The CSS properties are saved in a separate text file with an extension of .css and is referenced from an HTML document using the tag inside the head section. The <link> has a format as shown below:



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

          rel="stylesheet",  means what will be relationship of the file href="mystyle.css"  to the HTML document. In this case it is a stylesheet to format the elements in the HTML document.  While type="text/css" indicates the file type (text) and what it contains (css). Lastly, the values for href could be a path\filename or a URL that points to an online .css document.



<!DOCTYPE html>
<html>
    <head>
        <!-- incorporate an external stylesheet saved in mystyle.css -->
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body>
        <h3>This is header3. </h3>
        <h3>This is another header 3</h3>
    </body>
</html>

          The .css file DOES NOT need the <style></style> tag inside it as shown in the mystyle.css below. The output would be the same as the Internal CSS.



/* saved inside mystyle.css */


body {
    background-color: teal;
}
h3 {
    color: white;
    text-align: center;
}

          The advantage of using an external stylesheet is that one definition of CSS style rules could be applied to several HTML documents or webpages. So that when the style is updated it affects several web pages that uses it.