Cascading Style Sheets
Cascading Style Sheets
HRDIODB makes use of Cascading Style Sheets (CSS) for various look and feel
settings. CSS allow a web designer to specify how HTML elements should be
displayed in the browser window. CSS are supported in all modern browsers,
though the level and detail of support varies greatly. Based on that fact,
some page layout and alignment properties were specified via HTML tags to
maintain a consistent look across browsers and platforms. For an overview
and tutorial of CSS, please reference the
W3Schools CSS Tutorial.
Written by Ziba R. Scott
and Adam D. Gorski
Table of Contents
hrdi.css
The main HRDIODB CSS is located in the hrdi.css file.
The file contains styles for base HTML elements as well as specific element
ids and classes. Changing the look and properties of any element in the
file will affect that element throughout all of the pages. For example,
let's say we want to change the font size of all text which isn't
controlled by any other element style, meaning all of the text outside the
layout tables and not within any other spans or divs. We would open the
hrdi.css file and locate the following block of code:
/* Main body */
body {
color: #000000;
font-family: helvetica, sans-serif;
font-size: 10pt;
background-color: #FFFFFF;
margin: 0px;
}
To change the font size from 10pt to 8pt, we would modify the block of code to
look like this:
/* Main body */
body {
color: #000000;
font-family: helvetica, sans-serif;
font-size: 8pt;
background-color: #FFFFFF;
margin: 0px;
}
print.css
It would be possible to print out HRDIODB pages without a specific print
CSS, but chances are that the page wouldn't look as good as one would hope.
In order to make the HRDIODB more printer friendly, a special print CSS is
used. It is possible to tell a browser which CSS to use for which
rendering. In the header.php file, we specify two CSS;
hrdi.css and print.css. The
hrdi.css file is used for "all" media, meaning for any
rendering. The print.css file is used for the "print"
media, meaning rendering for a printer. The HTML for specifying these CSS
is shown below.
<
link rel=
"stylesheet" media=
"all" href=
"hrdi.css" type=
"text/css" />
<
link rel=
"stylesheet" media=
"print" href=
"print.css" type=
"text/css" />
The print.css file should be a modified version of the
hrdi.css file. The modifications could consist of
changing colors to printer safe colors, such as blacks and grays for a
non-color printer. Font sizes could be adjusted and font styles could be
changed. A common function of the print CSS is to hide certain page
elements, specifically those which do not need to be included on a print
out of the page. As an example, consider the HRDIODB navigational bar (the
blue bar at the top of the page). In the hrdi.css file,
the style for that bar is defined as follows:
/* Navigational bar */
.nav_bar {
color: #FFFFFF;
font-size: 10pt;
background-color: #0066FF;
width: 100%;
border: 0px solid;
padding: 0px;
margin: 0px;
}
If we want the navigational bar to be hidden for the printable version of
the page, we would specify it in the print.css file as
follows:
/* Navigational bar */
.nav_bar {
display: none;
}
The property display: none tells the browser to not
display the page element. The PHP code has not changed, as far as PHP is
concerned the navigational bar is still being displayed. It is the CSS that
tells the browser to hide it if the user goes to print the page. This can
be done for almost any style in order to hide unwanted page elements.
