styles.css

The style sheet used for this project is shown in Example 21-13. There are a number of sets of declarations, as follows:

*: Sets the default font family and size for the project using the universal selector.
body: Sets the width of the project window, centers it horizontally, specifies a background color, and gives it a border.
html: Sets the background color of the HTML section.
img: Gives all images a border, a shadow, and a righthand margin.
li a, and .button: Remove underlines from hyperlinks in all <a> tags that are within a <li> element, and all elements employing the button class.
li:ahover and .button:hover: Set the color in which <li> elements and the button class should display text when hovered over.
.appname: Sets the properties for the heading (which uses the appname class), including centering, background and text colors, the font family and size, and the padding.
.fieldname: Sets the width of elements using the fieldname class by first floating them.
.main: Applies an indent to elements that use it.
.info: Used for displaying important information: sets a background and foreground text color, applies a border and padding, and indents elements that employ it.
.menu li, and .button: Ensure that all <li> elements and the button class display inline, have padding applied, and have a border, a background and foreground text color, a right margin, rounded borders, and a shadow (resulting in a button effect).
.subhead: Emphasizes sections of text.
.taken, .available, .error, and .whisper: Set the colors and font styles to be used for displaying different types of information.

Example 21-13. The project’s style sheet

/* styles.css */

* {
    font-family:verdana,sans-serif;
    font-size  :14pt; }

body {
    width     :700px;
    position  :relative;
    margin    :7px auto;
    background:#f8f8f8;
    border    :1px solid #888; }

html {
    background:#fff }

img {
    border            :1px solid black;
    margin-right      :15px;
    -moz-box-shadow   :2px 2px 2px #888;
    -webkit-box-shadow:2px 2px 2px #888;
    box-shadow        :2px 2px 2px #888; }

li a, .button {
    text-decoration:none; }

li a:hover, .button:hover {
    color:green; }

.appname {
    text-align :center;
    background :#eb8;
    color      :#40d;
    font-family:helvetica;
    font-size  :20pt;
    padding    :4px; }

.fieldname {
    float:left;
    width:120px; }

.main {
    margin-left:40px; }

.info {
    background :lightgreen;
    color      :blue;
    border     :1px solid green;
    padding    :5px 10px;
    margin-left:40px; }

.menu li, .button {
    display           :inline;
    padding           :4px 6px;
    border            :1px solid #777;
    background        :#ddd;
    color             :#d04;
    margin-right      :8px;
    border-radius     :5px;
    -moz-box-shadow   :2px 2px 2px #888;
    -webkit-box-shadow:2px 2px 2px #888;
    box-shadow        :2px 2px 2px #888; }

.subhead {
    font-weight:bold; }

.taken, .error {
    color:red; }

.available {
    color:green; }

.whisper {
    font-style:italic;
    color     :#006600; }

And that, as they say, is that. If you write anything based on this code, or any other examples in this book, or have gained in any other way from it, then I’m glad to have been of help, and thank you for reading this book.

But before you go out and try out your newly learned skills on the Web at large, please take a browse through the appendixes that follow, as there’s a lot of additional information there that you should find useful.