HOME
          About US
          Contact Us

CSS Style Sheet

Exercise - 1.2 (Designing Basic Page - CSS Style Sheet): (Page 2/3)    


(Cotinued from previous page)
a) Modify style.css: Lets us modify our 'Style Sheet' for above mentioned style shown in FIG- 1.4. To open the 'Style Sheet', put your mouse on style.css and 'Right Click'. Open the file in 'Note Pad'. Write the following in the style sheet

CSS Style Sheetheader { background: grey; width: 800px; height: 100px;
position: absolute; left: 100px; top: 0px;}
CSS Style Sheetcenter {background: yellow; width: 800px; height: 60px;
position: absolute; left: 100px; top: 100px;}
CSS Style Sheetleft { background: green; width: 300px; height: 300px;
position: absolute; left: 100px; top: 160px;}
CSS Style Sheetright {background: pink; width: 500px; height: 300px;
position: absolute; left: 400px; top: 160px;}
CSS Style Sheetbottom {background: brown; width: 800px; height:50px;
position: absolute; left: 100px; top: 460px;}

Save the file and close.

b) Modify index.html: Now we will modify the 'index.html' file for web page shown in FIG- 1.4. Open the file 'index.html' in 'Note Pad'. Write the following between <body> and </body>

<div id='header'> </div>
<div id='center'> </div>
<div id='left'> </div>
<div id='right'> </div>
<div id='bottom'> </div>

Save the file and close.


c) Create style_sample.css: Now we will make another 'style' file for our 2nd web page as per FIG 1.5, by the name 'style_sample.css'. Open 'Note Pad' and write the following

html { margin: 0; padding: 0; }
CSS Style Sheetheader2 { background: grey; width: 800px; height: 100px;
position: absolute; left: 100px; top: 0px;}
CSS Style Sheetcenter2 {background: gold; width: 800px; height: 200px;
position: absolute; left: 100px; top: 100px;}
CSS Style Sheetleft2 {background: pink; width: 200px; height: 300px;
position: absolute; left: 100px; top: 300px;}
CSS Style Sheetright2 {background: green; width: 600px; height: 300px;
position: absolute; left: 300px; top: 300px;}

Save the file as 'style_sample.css'
(Contiued to next page (Pg-3))
CSS Style Sheet © funandhobby.com (CSS Style Sheet)