LoVe:HAte and links

a:link, a:visited, a:hover, a:active, this order can not be reversed, otherwise it won't work. This is due to the cascade rule. If two rules have the same specificity, the last rule to be defined wins out.

a:link, a:visited {text-decoration: none;} a:hover, a:active {text-decoration: underline;}

Designer tend to dislike link underlines as they add too much weight and visual clutter to a page. If you decide to remove link underlines, you could choose to make links bold instead. That way your page will look less cluttered, but the links will still stand out, and you can then reapply the underlines when the links are hovered over or activated.

a:link, a:visited { text-decoration: none; font-weight: bold; } a:hover, a:active { text-decoration: underline; }

However, it is possible to create a low-impact underline using borders instead. In the following example, the default underline is removed and replaced iwth a less obstuctsive dotted line. When the link is hovered over or clicked, this line turns solid to provide the user with visual feedback that something has happend:

a:link, a:visited { text-decoration: none; border-bottom: 1px dotted #000; } a:hover, a:active { border-bottom-style: solid; }

You can create fancy links iwth image

a:link, a:visited { color:#666; text-decoration: none; background: url(images/underline1.gif) repeat-x left bottom; } a:hover, a:active { background-image: url(images/underline1-hover.gif); }

You can you attribute selector to style different links.

a[href^="http:"] { background: url(images/externalLink.gif) no-repeat right top; padding-right: 10px; } a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"] { background-image: none; padding-right: 0; } a[href^="mailto:"] { background: url(images/email.png) no-repeat right top; padding-right: 10px; } a[href^="aim:"] { background: url(images/im.png) no-repeat right top; padding-right: 10px; } a[href$=".pdf"] { background: url(images/pdfLink.gif) no-repeat right top; padding-right: 10px; } a[href$=".doc"] { background: url(images/wordLink.gif) no-repeat right top; padding-right: 10px; } a[href$=".rss"], a[href$=".rdf"] { background: url(images/feedLink.gif) no-repeat right top; padding-right: 10px; }

Make you web more semantic

Here are some guidline how to make your web page more sematic.

1. Use only one <h1> tag per page, and use it to identify the main topic of the page. Think of it as a chapter title: you only put one title per chapter. Using <h1> correctly has the added benefit of helping the page get properly indexed by search engines
2. Use headings to indicate the relative importance of text. Again, think outline. When two headings have equal importance in the topic of your page, use the same level header on both. If one is less important or a subtopic of the other, then use the next level header. For example, follow a <h2> with a <h3> tag. In general, it's good to use headings in order and try not to skip heading numbers. For example, don't follow a <h2> tag with a <h5> tag.
3. Use the <p> tag for, duh, paragraphs of text.
4. Use numbered lists to indicate steps in a process, or define the order of a set of items.
5. To create a glossary of terms and their definitions or descriptions, use the <dl> (definition list) tag in conjunction with the <dt> (definition term) and <dd> (definition description) tags. <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
6. If you want to include a quotation like a snippet of text from another Web site, a movie review, or just some wise saying of your grandfather's, try the <blockquote> tag for long passages, or the <q> tag for one-liners.
7. Take advantage of obscure tags like the <cite> tag for referencing a book title, newspaper article or Web site, and the <address> tag to identify and supply contact information for the author of a page (great for a copyright notice).
8. steer clear of any tag or attribute aimed just at changing the appearance of a text or image.
9. When there just isn't an HTML tag that fits the bill, but you want to identify an element on a page or a bunch of elements on a page so that you can apply a distinctive look, use the <div> and <span> tags .
10. Remember to close tags. The opening <p> tag needs its partner in crime (the closing </p> tag), as do all other tags, except the few self-closers like <br /> and <img />.
11. Validate your pages with the W3C validator. Poorly written or typo-ridden HTML causes many weird browser errors.