Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 117 - CodePilot V5.0 C6
P. 117

    <HEAD>

                     <TITLE>Internal CSS</TITLE>
                     <STYLE>

                     BODY {
                     BACKGROUND-COLOR: LIGHTGREEN; }

                     H1 { COLOR: BROWN; TEXT-ALIGN: CENTER; }
                     P { COLOR: BLUE; }

                     </STYLE>
                     </HEAD>

                     <BODY>
                     <H1>Water Conservation</H1>
                     <P>We should conserve water to protect our planet. Every drop matters

                     and every effort creates an impact.
                     Together, we can safeguard our precious water resources. </P>

                     </BODY>
                     </HTML>

                     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.
                                                                                       Professional websites mostly
                     For example, if you have a file named style.css then the                use external CSS.
                     code will be:

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

                     </HEAD>

                        Code     Write the HTML code to present the given web page using external CSS.
                          3

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

                     BODY {BACKGROUND-COLOR: LIGHTBLUE;}

                                                                                                                      115
                                                                                                    CSS3–Styling Basics

| 112 113 114 115 116 117 118 119 120 121 122 |