WEB STANDARDS CREATIVITY

First, start by styling the short paragraph of text inside the footer. Transform its content into uppercase letters, and reduce
its type size and contrast to de-emphasize it.
div[id="siteinfo"] p {
padding-top : 40px;
font-size : 82%;
text-transform : uppercase;
color : #999; }
div[id="siteinfo"] p a {
display : block; }
Wouldn’t it be fantastic if you could be more specific about the anchors that you target, perhaps by styling
external links differently from those links to other pages on your site? Now, in many circumstances you can.
With the exception of Internet Explorer 7, all the major standards-aware browsers support selectors such
as this:
div[id="siteinfo"] a[href^="http"] {
display : block; }
The selector with the ^ is a type of substring matching attribute selector, a mouthful to say, but one of the
most interesting selector types in CSS. From now on, I’ll refer to it as a substring selector, to save ink and trees.
There are different varieties of this type of selector, many of which could make accomplishing this design
much easier. The example here targets all links contained within the siteinfo division, where the href
begins with http. You will see more substring selectors as you progress through this chapter.
Now it is time to turn your attention to adding the small WorrySome.net logo. A peek into the markup for this page reveals
that there is no in-line logo image present. There is just the link to the top of the page, inside an unordered list. Start by
removing any margins from this list.
div[id="siteinfo"] ul {
margin : 0; }
Now you can use a combination of positioning and image replacement to transform this humble link into a shiny logo. First,
set its proportions and position it absolutely: 240px from the left and 50px above its positioned ancestor.
div[id="siteinfo"] ul a {
position : absolute;
display : block;
top : -50px;
left: 240px;
height : 120px;
width : 230px; }
Apply a background image and slide its text off screen, and you are good to go.
div[id="siteinfo"] ul a {
background : url(../images/a-t.png) no-repeat;
text-indent : -9999px; }
chapter 4 Designing for Outside the Box
99