Open Book Project

Validation Links

The following footer contains validation links for both HTML and CSS3:

<footer>
<a href="http://validator.w3.org/check/referer">
<strong> HTML </strong> Valid! </a> &nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">
<strong> CSS </strong> Valid! </a>
</footer>

Add this style to center the links:

footer {
    text-align: center;
}

Placing a vertical bar (|) between the links provides visual seperation and makes a nice minialist approach to including the links.

Here is a minimal page that has the links, footer style, and vertical bar included.

A more elaborate approach can be achived with the following styles, which combine to make CSS Buttons:

footer a {
    display: inline;
    margin-right: 10px;
    width: 50px;
    padding: 1px;
    font-size: 9px;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    text-align: center;
    color: #912;
    background-color: #DDD;
    border: 1px solid black;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
}
footer a strong {
    font-weight: bold;
    color: #FFF;
    background-color: #912;
    padding-left: 2px;
    margin-right: 5px;
}
footer a:hover {
    color: #FFF;
    background-color: #912;
}
footer a:hover strong {
    color: #912;
    background-color: #DDD;
}