Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 97 - 2611_SmartGPT Pro V(5.0) C-6
P. 97

    EXTERNAL CSS
                     External CSS is saved in a .css file and linked in the <HEAD> using <LINK>, allowing consistent

                     styles across pages.
                     The syntax to include the reference of the external CSS is as follows:

                     <HEAD>

                     <LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="PATH OF STYLE SHEET">
                     </HEAD>
                     Inline CSS has the highest priority, then internal and external has the lowest.

                     For example, if you have a file named style.css then the code will be:

                     <HEAD>

                     <LINK REL= "STYLESHEET" TYPE="TEXT/CSS" HREF="style.css">
                     </HEAD>
                     Code 3. Write the HTML code to present the given web page using external CSS.

                     The first step is to create the stylesheet. Open Notepad and type the following code:

                     BODY {BACKGROUND-COLOR: LIGHTBLUE;}

                     H1 {COLOR: FORESTGREEN; BACKGROUND-COLOR: HONEYDEW; }
                     P {COLOR: BLUE; BACKGROUND-COLOR: LIGHTGREEN;}
                     Now, save the file with the name style.css in the same location as your HTML file. If the file is saved

                     in a different location than the HTML file, you need to specify the complete or absolute path. Open
                     a new Notepad window and type the following code:

                     <!DOCTYPE HTML>
                     <HTML>

                     <HEAD>

                     <TITLE>External CSS</TITLE>
                     <LINK REL="STYLESHEET" TYPE="TEXT/CSS"
                     HREF="style.css">

                     </HEAD>

                     <BODY>
                     <H1>Importance of Recycling</H1>

                     <P>Recycling helps conserve natural resources, save energy and reduce
                     pollution. It is essential for a sustainable future. </P>

                     </BODY>
                     </HTML>

                     You can use 6-digit hex codes for colours, e.g., #000000 for black and #FFFFFF for white.

                                                                                                   CSS3—Styling Basics  95

| 92 93 94 95 96 97 98 99 100 101 102 |