Overriding Base Styling with Classes

/* Default styling for paragraphs */
p {
color:#F00;
font-size:12px;
}
/* Use this style to turn anything light gray */
.bleached {
color:#CCC;
}
All paragraphs will still be red by default, but this can still be overridden when necessary
by identifying an element with the bleached class, as in this (X)HTML:
<p>This paragraph has red text.</p>
<p class="bleached">This paragraph has light gray text.</p>
The second paragraph will now be light gray, as the color declaration in bleached overrides
the red. Note that the paragraph is still rendered 12 pixels high, as bleached does not redefine
font-size. Add a font-size declaration in bleached, and that value will override the original
size for all paragraphs identified with class="bleached".

Styling a table by Css : Adding borders to tables

As mentioned earlier, it’s a good policy to avoid using the default HTML table border. It
looks ugly and old-fashioned, and it’s a far cry from a clean, flat, 1-pixel border. You might
think it’s a straightforward process to add CSS borders to a table—logically, it makes sense
to simply add a border property/value pair to a grouped selector that takes care of both
the table headers and table data cells.
th, td {
border: 1px solid #c9c9c9;
}
But this doesn’t work. As the screenshot to the right shows, this method
results in the correct single-pixel border around the edge of the table,
but creates double-thick borders everywhere else. This is because the
borders don’t collapse by default, meaning that the right-hand border of
one cell sits next to the left-hand border of an adjacent cell, and so on.
Designers have historically gotten around this by using a rule to define a style for the top
and left borders of the table, and another to define a style for the right and bottom
borders of table cells. However, there’s a perfectly good property that
deals with the double-border syndrome: border-collapse. When this
property, with a value of collapse, is applied to the table element via an
element selector, borders collapse to a single border wherever possible.
The other available border-collapse property value, which reverts
borders back to their “standard” state, is separate.
table {
border-collapse: collapse;
}
With this brief explanation of table borders completed, we’ll now move into exercise
mode and style the table.

Defining link states with CSS

CSS has advantages over the obsolete HTML method of defining link states. You gain control
over the hover and focus states and can do far more than just edit the state colors—
although that’s what we’re going to do first.
Anchors can be styled by using a tag selector:
a {
color: #3366cc;
}
In this example, all anchors on the page—including links—are turned to a medium blue.
However, individual states can be defined by using pseudo-class selectors (so called
because they have the same effect as applying a class, even though no class is applied to
the element):
a:link {
color: #3366cc;
}
a:visited {
color: #666699;
}
a:hover {
color: #0066ff;
}
a:focus {
background-color: #ffff00;
}
a:active {
color: #cc00ff;
}

Creating and styling web page links

With the exception of search boxes, which are forms based on and driven by server-side
scripting, online navigation relies on anchor elements. In its simplest form, an anchor element
looks like this:
<a href="http://www.friendsofed.com/">A link to the friends of ED
å website</a>

The href attribute value is the URL of the destination document, which is often another
web page, but can in fact be any file type (MP3, PDF, JPEG, and so on). If the browser can
display the document type (either directly or via a plug-in), it does so; otherwise, it downloads
the file (or brings up some kind of download prompt).

There are three ways of linking to a file: absolute links, relative links, and root-relative
links. We’ll cover these in the sections that follow, and you’ll see how to create internal
page links, style link states in CSS, and work with links and images. We’ll also discuss
enhanced link accessibility and usability, and link targeting.

Absolute links
The preceding example shows an absolute link, sometimes called a full URL, which is typically
used when linking to external files (i.e., those on other websites). This type of link
provides the entire path to a destination file, including the file transfer protocol, domain
name, any directory names, and the file name itself. A longer example is
<a href="http://www.wireviews.com/lyrics/instar.html">Instar lyrics</a>
In this case, the file transfer protocol is http://, the domain is wireviews.com, the directory
is lyrics, and the file name is instar.html.
If you’re linking to a website’s homepage, you can usually leave off the file name, as in the
earlier link to the friends of ED site, and the server will automatically pick up the default
document—assuming one exists—which can be index.html, default.htm, index.php,
index.asp, or some other name, depending on the server type. However, adding a trailing
slash after the domain is beneficial (such as http://www.wireviews.com/). If no default
document exists, you’ll be returned a directory listing or an error message, depending on
whether the server’s permissions settings enable users to browse directories.

Relative links
A relative link is one that locates a file in relation to the current document. Taking the
Wireviews example, if you were on the instar.html page, located inside the lyrics directory,
and you wanted to link back to the homepage via a relative link, you would use the
following code:
<a href="../index.html">Wireviews homepage</a>

The index.html file name is preceded by ../, which tells the web browser to move up one
directory prior to looking for index.html. Moving in the other direction is done in the
same way as with absolute links: by preceding the file name with the path. Therefore, to
get from the homepage back to the instar.html page, you would write the following:
<a href="lyrics/instar.html">Instar lyrics</a>
In some cases, you need to combine both methods. For instance, this website has HTML
documents in both the lyrics and reviews folders. To get from the instar.html lyrics
page to a review, you have to go up one level, and then down into the relevant directory
to locate the file:
<a href="../reviews/alloy.html">Alloy review</a>

Root-relative links
Root-relative links work in a similar way to absolute links, but from the root of the website.
These links begin with a forward slash, which tells the browser to start the path to the file
from the root of the current website. Therefore, regardless of how many directories deep
you are in the Wireviews website, a root-relative link to the homepage always looks
like this:
<a href="/index.html">Homepage</a>
And a link to the instar.html page within the lyrics directory always looks like this:
<a href="/lyrics/instar.html">Instar lyrics</a>
This type of link therefore ensures you point to the relevant document without your
having to type an absolute link or mess around with relative links, and is, in my opinion,
the safest type of link to use for linking to documents elsewhere on a website. Should a
page be moved from one directory to one higher or lower in the hierarchy, none of the
links (including links to style sheets and script documents) would require changing.
Relative links, on the other hand, would require changing; and although absolute links
wouldn’t require changing, they take up more space and are less modular from a testing
standpoint; if you’re testing a site, you don’t want to be restricted to the domain in
question—you may wish to host the site locally or on a temporary domain online so that
clients can access the work-in-progress creation.
All paths in href attributes must contain forward slashes only. Some software—
notably older releases from Microsoft—creates and permits backward slashes (e.g.,
lyrics\wire\154.html), but this is nonstandard and does not work in non-Microsoft
web browsers.