• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 13. Cascading Style Sheet Techniques > Designing for the Real World

Designing for the Real World

Creating Backward Compatible Style

If you'd like to create an HTML 4.0 document that uses style sheets and provides backward compatibility for non-compliant browsers, the way to go is to use HTML 4.0 transitional.

  1. To do this, first design a page that sets up the design in a more conventional HTML 3.2 fashion:

    <HTML>
    <HEAD>
        <TITLE>molly.com: info</TITLE>
    
    </HEAD>
    
    <BODY BGCOLOR="#FFCC66" TEXT="#000000" LINK="#999933" VLINK="#CC3300" ALINK="#CCCC66">
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#CC3300" SIZE="4">
    <H1>Molly Info</H1>
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#000000">
    <P>What do you do? I hate that question! I'm never sure what to answer,
    because people expect to hear one thing. We're all multi-faceted, and we are
    not our jobs.
    
    <P>So what do I do? I teach. I write. I design Web sites. I consult. I love
    people, music, animals, travel. Which of these things really defines me? I
    can't say. But here are some bits of information about me that might help
    others define me, if they feel it necessary to do so.
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#CC3300">
    <P><B>Molly's Current Bio</B>
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#000000">
    <P>An author, instructor, and designer, Molly E. Holzschlag brings her
    irrepressible enthusiasm to books, classrooms, and Web sites. Honored as one
    of the Top 25 Most Influential Women on the Web, Molly has spent an almost
    unprecedented decade working in the online world. She has written and
    contributed to more than ten books about the Internet and, in particular, the
    Web. She holds a B.A. in communications and writing, and a M.A. in media
    studies from the New School for Social Research.
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#CC3300">
    <P><B>Photos</B>
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#000000">
    <P>A few <A HREF="pics.html"><B>pics</B></A> for you to enjoy.
    </FONT>
    
    <DIV ALIGN="right">
    <FONT FACE="arial, helvetica, sans-serif" SIZE="2" COLOR="#999933">
    <P><A HREF="contact.html"><B>get in touch</B></A><BR>
    &copy; copyright 1999, molly e. holzschlag<BR>
    <A HREF="credits.html">click for credits & service mark info</A></FONT>
    </DIV>
    
    </BODY>
    </HTML>
    
    
    					  
  2. Test the page and see if you like the results (see Figure 13.10).

    Figure 13.10. An HTML 3.2 document provides the basis for the transitional 4.0 document with style.

  3. Create a style sheet that manages the style elements of the page. You can create this sheet as either embedded or linked:

    <HTML>
    <HEAD>
        <TITLE>molly.com: info</TITLE>
    
    
    <!-- begin style -->
    
    <STYLE>
    
    BODY  {
        color : #FFCC66;
    }
    
    P  {
        font-size : 11pt;
        font-family : arial, helvetica, sans-serif;
        color : #000000;
        line-height : 12pt;
    }
    
    H1 {
        font-size : 14pt;
        font-family : arial, helvetica, sans-serif;
        color: #CC3300;
    }
    
    A  {
        color : #999933;
        font-weight: bold;
    }
    
    A:Visited  {
        color : #CC3300;
    }
    
    A:Active  {
        color : #CCCC66;
    }
    
    A:Hover  {
        color : #FFFFFF;
    }
    
    .redheader  {
        font-size : 11pt;
        font-family : arial, helvetica, sans-serif;
        color: #CC3300;
        font-weight : bold;
    }
    
    .address  {
        font-size : 8pt;
        color: #999933;
        font-family : arial, helvetica, sans-serif;
    }
    </STYLE>
    
    </HEAD>
    
    <BODY BGCOLOR="#FFCC66" TEXT="#000000" LINK="#999933" VLINK="#CC3300" ALINK="#CCCC66">
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#CC3300" SIZE="4">
    <H1>Molly Info</H1>
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#000000">
    
    <P>What do you do? I hate that question! I'm never sure what to answer,
    because people expect to hear one thing. We're all multi-faceted, and we are
    not our jobs.
    <P>So what do I do? I teach. I write. I design Web sites. I consult. I love
    people, music, animals, travel. Which of these things really defines me? I
    can't say. But here are some bits of information about me that might help
    others define me, if they feel it necessary to do so.
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#CC3300">
    <P CLASS="redheader"><B>Molly's Current Bio</B>
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#000000">
    <P>An author, instructor, and designer, Molly E. Holzschlag brings her
    irrepressible enthusiasm to books, classrooms, and Web sites. Honored as one
    of the Top 25 Most Influential Women on the Web, Molly has spent an almost
    unprecedented decade working in the online world. She has written and
    contributed to more than ten books about the Internet and, in particular, the
    Web. She holds a B.A. in communications and writing, and a M.A. in media
    studies from the New School for Social Research.
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#CC3300">
    <P CLASS="redheader"><B>Photos</B>
    </FONT>
    
    <FONT FACE="arial, helvetica, sans-serif" COLOR="#000000">
    <P>A few <A HREF="pics.html"><B>pics</B></A> for you to enjoy.
    </FONT>
    
    <DIV ALIGN="right">
    <FONT FACE="arial, helvetica, sans-serif" SIZE="2" COLOR="#999933">
    <SPAN CLASS="address">
    <P><A HREF="contact.html"><B>get in touch</B></A><BR>
    &copy; copyright 1999, molly e. holzschlag<BR>
    <A HREF="credits.html">click for credits & service mark info</A></SPAN></FONT>
    </DIV>
    
    </BODY>
    </HTML>
    
    
    					  
  4. Test your page in a style-sheet–compliant browser.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint