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
