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

Rebuilding the Design

Because our goal is to re-create the original design using CSS for both content styling and layout, we'll want to refer to the table-driven design throughout the rest of the project. Although we won't worry about exact to-the-pixel reproduction, we'll do our best to get as close as possible to the original, starting with some basic styles and working our way through the document, styling each piece as we come to it.

Basic Styles

Before we start reconstructing the overall layout, let's set some “global” styles (that is, styles that apply to the document as a whole). The first thing to do is bring the font size back in line with how it looked in the original HTML-driven design. The HTML approach used <font size="-2"> to set most of the font sizes, and the closet CSS equivalent is the keyword x-small. Thus, we'll change the property font-family to font and drop in the size value.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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