Frame with Cascading Style Sheet

 

This lesson is about creating a frame with pages that uses CSS.  Before starting this lesson, review the Style Definitions and Frameset

Preview the outcome of this lesson here.


First, create a CSS definition file with code below using Notepad.  

BODY{background: "#FF9966"}

Save the file as cssfile.css in a new folder.  Be sure to put the css file extension to the name.

It is a very simple definition file that defines the background color for HTML pages.  You may use this definition for the entire Web site.  One advantage of this scheme is that you can change the background color of all pages of the Web site with this file instead of changing from individual pages. 


Create a frameset file with the following code.

<html>
<head>
<title>Frame with CSS</title>
</head>

<frameset border="5" rows="100,*">
   <frame src="banner.htm" scrolling="no" noresize>
   <frameset cols="110,*">
      <frame src="menu.htm" scrolling="no" noresize>
      <frame src="main.htm" name="right_fr">
   </frameset>
</frameset>
</html>

Save the file as index.htm in the same folder as the CSS file.  By naming the frameset file as index.htm, you are designating this file as the "home" page of the Web site.  


Create a Web page that will be displayed on the top frame.

<html>
<head>
<LINK REL=STYLESHEET HREF="cssfile.css" TYPE="text/css">


<STYLE TYPE="text/css">
<!--
h1 { 
font-weight: bold;
font-size: 30pt;
color: "#aa44ff"; 
margin-top: 40px; 
line-height: 10pt;
font-family: forte;
font-style: italic;
text-align: center

-->
</STYLE>


</head>
<body>

   <h1>Three Major News Agency Sites</h1>

</body>
</html>

Save the file as banner.htm in the same folder as other files.  As the name of the file implies, it will be the banner page of the frame window.


Create a menu page with the following codes:

<html>
<head>
<LINK REL=STYLESHEET HREF="cssfile.css" TYPE="text/css">

<STYLE TYPE="text/css">
<!--
A.1 {text-decoration: none; color: "#33ff33"; font-size: 30px} 
A.2 {text-decoration: none; color: "#3333ff"; font-size: 30px} 
A.3 {text-decoration: none; color: "#ff3333"; font-size: 30px} 
A.4 {text-decoration: none; color: "#33ffff"; font-size: 30px} 

TD {text-align: "center"}

Table {background: "#99aaaa"; margin-top: 50px } 
-->
</STYLE>
</head>
<body>

<table border="1" bordercolor="#2255cc">
<tr><td>
<A Class="1" Href="npr.htm" Target="right_fr">NPR</a>
</td></tr>
<tr><td>
<A Class="2" Href="nyt.htm" Target="right_fr">NYT</a>
</td></tr>
<tr><td>
<A Class="3" Href="ap.htm" Target="right_fr">AP</a>
</td></tr>
<tr><td>
<A Class="4" Href="main.htm" Target="right_fr">Home</a>
</td></tr>
</table>

<p align="center">Notice that the links do not have underline.</p>

</body>
</html>

Save the file as menu.htm in the same directory as other files.


Create the default page that will be displayed in the right_fr frame when the frame page ( index.htm) is opened. 

<html>
<head>
<LINK REL=STYLESHEET HREF="cssfile.css" TYPE="text/css">
<STYLE TYPE="text/css">
<!--
H2 {font-size: 16pt; 
font-weight: bold; 
color: "#33ffff"; 
margin-top: 30px; 
text-align: "center"}

P {color: "#666666"; font-size: 20px; text-align: "center"} 
-->
</STYLE>
</head>
<body>

<H2>This is the default page for the frame</H2>

<P>Every page on this frameset has some sort of CSS definitions.<BR>

They could be either linked style sheet that uses a CSS definition file<BR>

or block style sheet that is defined inside of the HEAD section of the page.</P>

<P>The only linked style sheet definition used here is the background color which is defined in a CSS file named cssfile.css. And all pages on the frame is link to the CSS file</P>

<P>One advantage of this scheme is that you can change the background color of all pages with the CSS file and you don't have to change them individually.</P>

</body>
</html>

Save the file as main.htm in the same folder with other files.  


Create and save three Web pages that are hyperlinked from the menu page.  Save them in the same folder as other files.

File Name: npr.htm

<html>
<head>
<LINK REL=STYLESHEET HREF="cssfile.css" TYPE="text/css">
<STYLE TYPE="text/css">
<!--
h1 { 
font-weight: bold;
font-size: 50pt;
color: "#55dd55"; 
margin-top: 40px; 
line-height: 50pt;
font-family: ravie;
font-style: italic;
text-align: center

-->
</STYLE>
</head>
<body>

<h1>NPR</h1>

<h3 align="center">The H1 tag is defined with CSS.</h3>

</body>
</html>

File name: nyt.htm

<html>
<head>
<LINK REL=STYLESHEET HREF="cssfile.css" TYPE="text/css">
<STYLE TYPE="text/css">
<!--
h1 { 
font-weight: bold;
font-size: 50pt;
color: "#3333ff"; 
margin-top: 40px; 
line-height: 50pt;
font-family: times new roman;
font-style: italic;
text-align: center

-->
</STYLE>
</head>
<body>

<h1>New York Time</h1>

<h3 align="center">The H1 tag is defined with CSS.</h3>

</body>
</html>

File name: ap.htm

<html>
<head>
<LINK REL=STYLESHEET HREF="cssfile.css" TYPE="text/css">
<STYLE TYPE="text/css">
<!--
h1 { 
font-weight: bold;
font-size: 50pt;
color: "#ff3333"; 
margin-top: 40px; 
line-height: 50pt;
font-family: times new roman;
font-style: italic;
text-align: center

-->
</STYLE>
</head>
<body>

<h1>Associated Press</h1>

<h3 align="center">On this page, the H1 tag is defined with CSS.</h3>

</body>
</html>

 


Open index.htm page in a browser, and see the results.  To see how it supposed to look like, please click here.