Publishing Books Using XML Technologies
Dr. Herong Yang, Version 4.01

Suggested CSS Definitions for Book Web Pages

This section describes how CSS is used in hyPub to support the default Web page layouts.

hyPub does include a CSS file called _hypub.css that contains a number of interesting settings to support the default Web page layout.

1. CSS properties assigned to the "body" element to set a dark background color; align the border layout to the center of the window; select verdana as the font; set the font size to 12px. I used px as the fond size instead of pt.

body {background-color: #a0a0a0; margin: 0px; 
   font-family: 'verdana'; font-size: 12px; 
   text-align: center;}

2. In order to put my book Web pages on the center of the browser window, I used a "div" element right inside the "body" element as <body><div class="body"> ... </div></body>. This "div" element is assigned with the following CSS properties to move the page to the center of the window and a witdh of 780 pixels:

div.body {margin: auto; width: 780px;}

3. hyPub uses "p" elements to define variables. We need to hide those elements on Web pages using this CSS setting:

p.variable {display: none;}

4. hyPub provides a default layout called border layout using a "table" element. Here are the CSS properties to control how each area will look like in the border layout:

table.frame {width: 750px; height: 100px; 
   border: 0px solid transparent; margin-left: 0px; 
   padding: 0px; background-color: transparent;}
td.frameTop {border-width: 0px; background-color: #a0a0a0;}
td.frameLeft {background-color: #fbfbfb; vertical-align: top;}
td.frameCenter {border-width: 0px; background-color: #a0a0a0; 
   vertical-align: top; width: 650px; height: 200px;}
td.frameRight {background-color: #fbfbfb; vertical-align: top;}
td.frameBottom {border-width: 0px; background-color: #a0a0a0;}

Sections in This Chapter

What Is CSS?

Suggested CSS Definitions for Book Web Pages

Assigning CSS Files to Web Pages

Dr. Herong Yang, updated in 2007
Suggested CSS Definitions for Book Web Pages