Chapter 11. CSS in Action

11.1.1. Case 1: Consistent Look and Feel
<html>
<BODY>
<LINK REL=”stylesheet” TYPE=”text/css”
HREF=”http://www.mycomp.com/style/site.css”&gt;
</BODY>
</html>

11.1.2. Case 2: Library Catalog System Interface
<html>
<BODY>
<TABLE CELLSPACING=0 BORDER CELLPADDING=”10″>
<TR>
<TD ROWSPAN=2>sidebar</TD>
<TD COLSPAN=2>navigation bar</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>main display</TD>
</TR>
</TABLE>

<TABLE CELLSPACING=0>
<TR>
<TD>sidebar</TD>
<TD>navigation bar and main display</TD>
</TR>
</TABLE>
<P>
<FONT FACE=”Verdana” COLOR=”white” size=”+1″><B><U>Heading</U></B></FONT>
<BR>
<FONT FACE=”Verdana” SIZE=”-1″>
<A HREF=”link1.html”><FONT COLOR=”yellow”>Link</FONT></A><BR>
<A HREF=”link2.html”><FONT COLOR=”yellow”>Link</FONT></A><BR>
<A HREF=”link3.html”><FONT COLOR=”yellow”>Link</FONT></A><BR>
</FONT>
</P>

</BODY>
</html>

11.1.2

<html>
<BODY>
<TD><P>
<SPAN>Heading</SPAN>
<BR>
<A HREF=”link1.html”>Link</A><BR>
<A HREF=”link2.html”>Link</A><BR>
<A HREF=”link3.html”>Link</A><BR>
</P>
</TD>
<DIV>
icons
</DIV>
<TABLE CELLPADDING=”0″ CELLSPACING=”0″ BORDER>
<TR VALIGN=”top”>
<TD>
(sidebar)
</TD>
<TD>
<DIV>
(icons)
</DIV>
<DIV>
(content)
</DIV>
</TR>
</TABLE>

</BODY>
</html>
11.1.2.1

11.1.3. Case 3: Putting a Magazine Article Online

<html>
<body bgcolor=”aqua”>
<DIV STYLE=”float: left; width: 40%; margin-left: 10%; margin-right: 5%;”>
This causes the entire set of text in the first division to become a floating block on the left margin and the following text to flow past it on the right. In other words, a two-column layout! This first column is declared to be 40% as wide as the browser window, have a left margin 10% as wide as the browser window, and a right margin that is 5% of the window’s width. This will cause the second column to automatically calculate its overall width as 45% (40 + 10 + 5 = 55, and 100 – 55 is 45).
</DIV>
</body>
</html>

11.1.3

11.2.4. Styling Common Elements

<html>
<body bgcolor=”aqua”>
<TABLE BORDER CELLPADDING=”4″>
<TR>
<TD><A HREF=”home.html”>Home Page</A></TD>
<TD><A HREF=”read.html”>My Writing</A></TD>
<TD><A HREF=”fun.html”>Fun Stuff!</A></TD>
<TD><A HREF=”links.html”>Other Links</A></TD>
<TD><A HREF=”write.html”>Contact Me</A></TD>
</TR>
</TABLE>

<TABLE border cellpadding=”4″>
<TR>
<TD><A HREF=”home.html”>Home Page</A></TD>
<TD><A HREF=”read.html”>My Writing</A></TD>
<TD><A HREF=”fun.html”>Fun Stuff!</A></TD>
<TD><A HREF=”links.html”>Other Links</A></TD>
<TD><A HREF=”write.html”>Contact Me</A></TD>
</TR>
</TABLE>

</body>
</html>

11.2.4
11.2.7. Preserving Boldness

<html>
<body>
<P STYLE=”font-weight: normal;”>This is a paragraph which contains a
<B>boldface element</B>, but Navigator 4 won’t make the text bold.</P>
</body>
</html>
11.2.711.2.10. Disappearing Styles
<html>
<body>
<SCRIPT LANGUAGE=”JavaScript1.2″>
<!–
var agt = navigator.userAgent.toLowerCase( );
var is_major = parseInt(navigator.appVersion);
var is_nav = ((agt.indexOf(‘mozilla’) != -1) &&
(agt.indexOf(‘spoofer’) == -1) &&
(agt.indexOf(‘compatible’) == -1));
var is_nav4 = (is_nav && (is_major == 4));

if (is_nav4) {onresize = location.reload();}
//–>
</SCRIPT>
</body>
</html>