|
||||
|
As discussed in the previous tutorial, Cascading Style Sheets (CSS) provide a convenient way to create a uniform appearance of several web pages within the same web site. Various characteristics such as font, font sizes, margins, and colours can be specified on a master file, then each Web page refers to this list, with the styles "cascading" through the page or the entire site. This tutorial will move through various steps and experiments to see the behaviours and capabilities of CSS. |
||||
|
|
||||
|
|
||||
|
|
||||
 |
Using Notepad, TextEdit, or other plain-text editing program and create the file on the left. Make sure that you name it with a ".html" extension, ie. page1.html) The div id tags will encapsulate whatever styles are outlined in the stylesheet file to be added shortly. Click here to view Pretty plain looking, isn't it? |
|||
|
Fig.1
|
||||
|
|
||||
 |
Create a second file with the information shown in Fig. 2 to the left. Name it style1.css #cont1, #cont2, etc. define the properties of the respective <div id tags in the html file. In your first file, (page1.html or whatever you named it), add the reference to the stylesheet file: <link rel="stylesheet" type="text/css" href="style1.css">
|
|||
 |
||||
|
Fig. 2
|
Fig. 3 Click here to see how the new styles affect the original page. |
|||
|
|
||||
 |
Open the css file, (style1.css) and make the changes as shown to the left. Keep the original version of the css file so you can change back and forth to review the differences. Make the new copy by going Save as... and naming the new file style2.css.
z-index sets the layer order of the containers, with the higher number being closer to the top. Make the change in the page1.html file as shown below.
|
|||
 |
||||
|
Fig. 4
|
Fig. 5
Click here to see the changes. |
|||
|
|
||||
|
|
||||
 |
Make the change in the page1.html file as shown below.
|
|||
 |
||||
|
Fig. 6
|
Fig.7 Click here to see the changes. |
|||
|
|
||||
|
Place the following five lines at the top of the style3.css file:
|
||||
 |
||||
|
Fig. 8
Click here to see the changes. |
||||
|
|
||||
|
||||
|
|