Here's a first glance at some CSS where we introduce the <STYLE> tag and position our first layer.
<HTML> <HEAD> <TITLE>Welcome to Shelley Biotechnologies, Inc.</TITLE> <STYLE TYPE="text/css"> #companyName { position: absolute; top: 20px; left: 20px; } </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> ... </BODY> </HTML>
Here's where we define what's in that first layer:
<BODY BGCOLOR="#FFFFFF"> <DIV ID="companyName"> <IMG SRC="images/home/company_name.gif" HEIGHT="128" WIDTH="428" ALT="Shelley Biotechnologies, Inc."> </DIV> </BODY>
Here's the code for some more layers:
#logo { position: absolute; top: 9px; left: 304px; }
#mainNavigation { position: absolute; top: 138px; left: 25px; }
#resourceNavigation { position: absolute; top: 173px; left: 189px; }
#feature { position: absolute; top: 194px; left: 19px; }
#companyName { position: absolute; top: 16px; left: 29px; }
...and the HTML that goes with the layer declarations above.
<DIV ID="companyName"> <IMG SRC="images/company_name.gif" ALT="Shelley Biotechnologies, Inc." WIDTH="426" HEIGHT="126" BORDER="0"> </DIV> <DIV ID="logo"> <IMG SRC="images/logo.jpg" ALT="Shelley Logo" WIDTH="275" HEIGHT="117" BORDER="0"> </DIV> <DIV ID="mainNavigation"> <IMG SRC="images/main_nav.gif" ALT="Main Navigation" WIDTH="561" HEIGHT="42" BORDER="0" USEMAP="#mainnav"> </DIV> <DIV ID="resourceNavigation"> <IMG SRC="images/resource_nav.gif" ALT="Resource Navigation" WIDTH="396" HEIGHT="31" BORDER="0" USEMAP="#resnav"> </DIV> <DIV ID="feature"> <IMG SRC="images/feature_1.gif" ALT="Salsa!" WIDTH="571" HEIGHT="299" BORDER="0" USEMAP="#feature"> </DIV>
Here's what the book's first look at z-index looks like.
#companyName { z-index: 1; position: absolute; top: 20px; left: 20px; }
Here's a few examples of modifying HTML tags.
<STYLE TYPE="text/css"> ...[ your layer declarations would go here ]... A { text-decoration: none; } B { font-size: 10pt; font-family: verdana, sans-serif; } I { font-size: 9 pt; font-color: #333333; font-family: verdana, sans-serif; } </STYLE>
An extra layer we'll be dealing with below...
#text { position: absolute; top: 200px; left: 10px; }
...and here it is
<DIV ID="text"> <CENTER> <P CLASS="superBig"> <A HREF="products/index.html">Products</A> | <A HREF="services/index.html">Services</A> | <A HREF="training/index.html">Training</A><BR> <A HREF="commongood/index.html">Common Good Projects</A> | <A HREF="news/index.html">Genetic News</A> | <A HREF="about/index.html">About Shelley</A> </P> <P CLASS="green"> <A HREF="search/index.html">Search</A> | <A HREF="sitemap.html">Site Map</A> | <A HREF="jobs/index.html">Jobs</A> | <A HREF="contact/index.html">Contact Us</A> </P> <P CLASS="copyright"> © 1999 shelley biotechnologies, inc. all rights reserved. </P> </CENTER> </DIV>
Here's another example.
<BODY> <!-- text that's big, red, and arial --> <H1 STYLE="color:red; font-size:24pt; font-family:arial;"> Shelley Biotechnologies </H1> <!-- regular H1 text --> <H1>Bringing Biotech into the Home (not red)</H1> </BODY>
Here's a look at some classes and how to implement them.
<STYLE TYPE="text/css"> <!-- layer declarations --> #text { position: absolute; top: 400px; left: 10px; } <!-- tag modifications --> A { text-decoration: none; } <!-- classes --> .regular { color: red; } .superBig { font-size: 16pt; font-weight: bold; color: red; } .copyright { font-size: 9pt; font-style: italic; text-transform: capitalize; } </STYLE>
Here's how to implement these classes.
<DIV ID="text"> <CENTER> <P CLASS="superBig"> <A HREF="products/index.html">Products</A> | <A HREF="services/index.html">Services</A> | <A HREF="training/index.html">Training</A> | <A HREF="commongood/index.html">Common Good Projects</A> | <A HREF="news/index.html">Genetic News</A> | <A HREF="about/index.html">About Shelley</A> </P> <P CLASS="regular"> <A HREF="search/index.html">Search</A> | <A HREF="sitemap.html">Site Map</A> | <A HREF="jobs/index.html">Jobs</A> | <A HREF="contact/index.html">Contact</A> </P> <P CLASS="copyright"> © 1999 shelley biotechnologies, inc. all rights reserved. </P> </CENTER> </DIV>
You can bind a class specifically to a tag:
P { font-weight: bold; font-size: 12pt; font-family: verdana, sans-serif; } P.small { font-size: 9pt; margin-left: 5em; margin-right; 5em; }
Here's how to apply the class:
<P> Shelley Biotechnologies is the uncontested leader in affordable biotechnology products. </P> <P CLASS="small"> How often does a company get to say that they don't have any competition? (No, the military doesn't count.) </P>
Now, let's add a nontag-specific class to the mix:
.cool { color: blue; font-style: italic; }
Here's a new, handy tag. There's a few more variations on this theme in the book.
<P CLASS="small"><SPAN CLASS="cool"> Shelley Biotechnologies is a family-oriented company - <SPAN STYLE="font-weight: bold; font-size: 16pt;"> safety is extremely important to us</SPAN>, which is why we require a one-week training period before anyone is allowed to use our flagship product, the Portable BioLab. </SPAN></P>
Here's an ID Selector declared in the <STYLE> of a document
#specialOffer {font-family: gadget, serif; font-size:40;}
To call an ID Selector:
<P CLASS="small" ID="specialOffer">