The techniques

Java Applets

Java Scripts

Style Sheets

DHTML tags

ColdFusion tags

Download


When you want to leave foreign sites, press Reset at bottom to launch Assists

[TOP]
Variable Image
Popups by overLIB
Assists - Tips 'n Tricks
Assists - Tips 'n Tricks

 Style Sheets

CSS - cascading style sheets or only style sheets is a method to define "macros" adaptable by HTML. What can you do ? You have already experienced that writing html-code you repeat tags too often. And if you have to change something you have to scan the whole site for values to change.


Here is a typical html-code :


 
<TABLE width="100%" border="0" cellspacing="0" cellpadding="2">
<TR bgcolor="#993300">
<TD><FONT face="Arial" size="1" color="#191970">Class</FONT>
</TD>
<TD><FONT face="Arial" size="1" color="#191970">Pos #</FONT>
</TD>
<TD><FONT face="Arial" size="1" color="#191970">Start #</FONT>
</TD>
<TD><FONT face="Arial" size="1" color="#191970">Name</FONT>
</TD>
<TD><FONT face="Arial" size="1" color="#191970">Club</FONT>
</TD>
<TD><FONT face="Arial" size="1" color="#191970">Race 1</FONT>
</TD>
</TR>
</TABLE>

Using a style sheet the html-code could be like this :


 
<TABLE width="100%" border="0" cellspacing="0" cellpadding="2">
<TR bgcolor="#993300">
<TD>Class
</TD>
<TD><H4>Pos #</H4>
</TD>
<TD><H4>Start #</H4>
</TD>
<TD><H4>Name</H4>
</TD>
<TD><H4>Club</H4>
</TD>
<TD><H4>Race #1</H4>
</TD>
</TR>
</TABLE>

How to implement style sheets...
Actually we are using the same technique as with scripts - the explicit and the implicit way.

Explicit way


 
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">

H4 {
color: #191970;
font-family: Arial,Tahoma,Verdana,serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 2px;
line-height: 14px;

}
</style>
</HEAD>
<BODY>
.....
.....

Implicit way


 
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<LINK rel="STYLESHEET" type="text/css" href="../style01.css">
</HEAD>
<BODY>
.....
.....

and this is the content of style01.css


 
H4 {
color: #191970;
font-family: Arial,Tahoma,Verdana,serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 2px;
line-height: 14px;

}

If you like to go further into the concept you have a good collection of links below -




Web title


Practical use of CSS
Tutorials
Practical CSS Layout
CSS Work
CSS Layout Techniques
SiteExperts CSS
 


Authorized by


CSS Pointers Group
W3Schools Online
Mark Newhouse
Eric Meyer
Eric Costello
Scott Isaacs
 


By the way, did you notice that the menu on left is made with CSS except for the fading graphic on top and bottom ??
Before I forget it - if you like to shadow your text like top heading, here's the style -


 
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">

#xlayer1 { position:relative;
left: 20px;
color: silver;
font-family: Tahoma,Verdana,serif;
font-size: 20px;
font-style: italic;
font-weight: 600;
margin-top: 30px;
margin-bottom: 0px;
margin-right: 10px;
line-height: 26px;
text-align: left; }

#xlayer2 {position:relative;
margin-left: 22px;
color: #191970;
top:-28px;
font-family: Tahoma,Verdana,serif;
font-size: 20px;
font-style: italic;
font-weight: 600;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 10px;
line-height: 26px;
text-align: left;
}
</style>


Stay tuned
EriX