Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 53 - ClickGPT V4.0 C-5
P. 53

    External Style Sheet

                     In case of external stylesheet, the CSS styles are written in a separate file which is saved with .css
                     extension. You need to include a reference to the external style sheet file within the <LINK> element

                     inside the <HEAD> element. Syntax to include the reference of the external stylesheet is:

                     <head>
                     <link rel="stylesheet" type="text/css" href="name of style sheet file">

                     </head>
                     Where, HREF attribute contains the path of the stylesheet. For example, if you have saved the file with
                     the styles as style.css, then the code will be:

                     <head>

                     <link rel="stylesheet" type="text/css" href="style.css">
                     </head>
                     If the file is saved in another location, you must provide the complete drive path of the stylesheet. Let
                     us create a web page using the external style sheet. The first step is to create a stylesheet file. Open
                     Notepad and type the following code:

                     body{background-color:green; color:white;}
                     Now, save the file with the name style.css at the same location as the HTML file. Again, open a new
                     notepad window and type the following code:

                     <!DOCTYPE html>

                     <html>
                     <head>

                     <title> Using External Stylesheet</title>
                     <link rel="stylesheet" type="text/css" href="style.css">

                     </head>
                     <body>

                     Text with white colour and background colour is green
                     </body>

                     </html>
                     When you view the preceding web page in browser, you will get the following output:

                                                                                        Introduction to HTML5 & CSS3    51

| 48 49 50 51 52 53 54 55 56 57 58 |