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;}

Table of Contents

 About This Book

 Ideas on Publishing Books using XML

 Overview of hyPub - A Simple XML Publishing Tool

 Writing Book Contents in XHTML Source Files

 Transforming Book Source Files with XSL Technology

 Designing Web Page Layouts with Tables

Controlling Web Page Appearance with CSS

 What Is CSS?

Suggested CSS Definitions for Book Web Pages

 Assigning CSS Files to Web Pages

 Sharing HTML Codes with JavaScript Files

 Generating Web Pages with hyPub

 Formatting Printable Documents with XSL-FO

 Generating PDF Documents with hyPub

 Areas of Future Improvements


 Full Version in PDF/ePUB