Essential Series - CSS & DHTML 2nd Edition

The Examples

Example 2-1: view see code
Example 2-2: view see code
Example 2-3: view see code
Example 2-4: view see code
Example 2-5: view see code
Example 2-6: view see code
Example 2-7: view see code
Example 2-8: view see code
Example 2-9: view see code

Download code and images for Chapter 2 (32K)

Example 2-1

<html>
<head>
	<title>Stylesheet Example 1</title>
	<style type="text/css">
	
		.bigText
		{
			font-family: arial;
			font-weight: bold;
			font-style: italic;
			font-size: 40pt;
			color: red;
		}
	</style>
</head>
<body>

Here's some normal text
<p>
<span class="bigText">Monster Text!</span> Next to big text.

</body>
</html>

Example 2-2

<html>
<head>
	<title>Stylesheet Example 2</title>
	<style type="text/css">
	
		.bigText
		{
			font-family: arial;
			font-weight: bold;
			font-style: italic;
			font-size: 40pt;
			color: red;
		}
		
		.green
		{
			color: green;
			font-weight: normal;
		}
		
		.weeTiny
		{
			font-size: 8pt;
			font-style: normal;
			text-decoration: underline;
		}
		
	</style>
</head>
<body>

Here's some normal text
<p>
<span class="bigText">Monster Text!</span> Next to big text.
<p>
<span class="green">Here's some green text</span>
<p>
<span class="weeTiny">Here's some weeTiny text</span>
<p>
<span class="bigText">Big Text <span class="green">green inside bigText</span></span>
<p>
<span class="green">More green text <span class="weeTiny">weeTiny inside green</span></span>


</body>
</html>

Example 2-3

<html>
<head>
	<title>Stylesheet Example 3</title>
	<style type="text/css">
	
		.green
		{
			color: green;
			font-weight: normal;
		}	
		
	</style>
</head>
<body>

Here's some normal text
<p>
<span class="green">Here's some green text
<p>
<table border="1">
	<tr>
		<td>Is this green?</td>
	</tr>
</table>
</span>

</body>
</html>

Example 2-4

<html>
<head>
	<title>Stylesheet Example 4</title>
	<style type="text/css">
	
		.green
		{
			color: green;
			font-weight: normal;
		}	
		
	</style>
</head>
<body>

Here's some normal text
<p>
<span class="green">Here's some green text
<p>
<a href="http://www.wire-man.com/" class="green">Wire Man! Is this green?</a>
</span>

</body>
</html>

Example 2-5

<html>
<head>
	<title>Stylesheet Example 4</title>
	<style type="text/css">
	
		.green
		{
			color: green;
			font-weight: normal;
		}	
		
	</style>
</head>
<body>

Here's some normal text
<p>
<span class="green">Here's some green text</span>

<p style="font-family:verdana; font-size:25px; color:blue">Hi there!</p>
</body>
</html>

Example 2-6

<html>
<head>
	<title>Stylesheet Example 6</title>
	
	<link rel="stylesheet" type="text/css" href="classes.css">
	
</head>
<body>

Here's some normal text
<p>
<span class="bigText">Monster Text!</span> Next to big text.
<p>
<span class="green">Here's some green text</span>
<p>
<span class="weeTiny">Here's some weeTiny text</span>
<p>
<span class="bigText">Big Text <span class="green">green inside bigText</span></span>
<p>
<span class="green">More green text <span class="weeTiny">weeTiny inside green</span></span>

</body>
</html>

Example 2-7

<html>
<head>
	<title>Shelley Biotechnologies</title>
	<style type="text/css">
	
		#header
		{
			position: absolute;
			left: 32;
			top: 20;
		}
		
	</style>
</head>
<body bgcolor="#FFFFFF">

<div id="header">
	<img src="images/shelley.gif" alt="Shelley Biotechnologies" width="395" height="49">
</div>

</body>
</html>

Example 2-8

<html>
<head>
	<title>Shelley Biotechnologies</title>
	<style type="text/css">
	
		#header
		{
			position: absolute;
			left: 32;
			top: 20;
		}
		
		#mainnav
		{
			position: absolute;
			left: 32;
			top: 82;
		}
		
		#sidenav
		{
			position: absolute;
			left: 450;
			top: 120;
		}
		
		#heart
		{
			position: absolute;
			left: 124;
			top: 204;
		}
		
		#hearttext
		{
			position: absolute;
			left: 32;
			top: 149;
		}
		
		#rosehips
		{
			position: absolute;
			left: 397;
			top: 213;
		}
		
		#rosehipstext
		{
			position: absolute;
			left: 314;
			top: 149;
		}
		
		.sidenavtext
		{
			font-family: verdana, sans-serif;
			font-size: 10px;
			font-weight: normal;
		}
	</style>
</head>
<body bgcolor="#FFFFFF">

<div id="header">
	<img src="images/shelley.gif" alt="Shelley Biotechnologies" width="395" height="49">
</div>

<div id="mainnav">
	<img src="images/main_nav.gif" width="564" height="32">
</div>

<div id="sidenav" class="sidenavtext">
	Home     Search     Contact
</div>

<div id="hearttext">
	<img src="images/heart_text.gif" width="97" height="139">
</div>

<div id="heart">
	<img src="images/heart.jpg" width="171" height="222">
</div>

<div id="rosehipstext">
	<img src="images/rose_text.gif" width="142" height="138">
</div>

<div id="rosehips">
	<img src="images/rosehips.jpg" width="200" height="224">
</div>

</body>
</html>

Example 2-9

<html>
<head>
	<title>Example 2-9</title>
	
	<style type="text/css">
	
		A { text-decoration: none; font-style: italic;}
		B { font-family: verdana; font-size: 20px; font-weight: bold; }
	
	</style>
</head>
<body bgcolor="#FFFFFF">

Here's some normal text.
<p>
<a href="http://www.wire-man.com">Wire Man!</a>
<p>
<b>This is bold.</b>

</body>
</html>

Based on First Edition Feedback

Based on reader feedback from the first edition of this book, it has become clear that a few things mentioned in the book need to be brought clearly to light.

Resizing the browser window in Netscape 4.x messes up layers. It rearranges them or make them disappear. The only way around this is to reload the page. Try:
```
		<BODY onResize="location.reload()">
```
In Netscape 4.x, form elements are always on top of any layer. That means text fields, checkboxes, radio buttons, etc. will be on top of any layer in the browser, no matter what.