1. Chapter 9

2. Links  When styling a link, you must tell CSS both what you want to style, and when you want the style to happen  Web browsers keep track of how a visitor interacts with links, and then displays the link differently depending on the link’s status or state.

3. Understanding Link States  Most browsers recognize four basic link states:  Unvisited  Visited  Mouse over  Clicked  CSS provides four pseudo-class selectors for these states:  :link :visited :hover :active (:focus firefox & safari only)

4. TIP  Want to change the text color of an unvisited link from boring blue to glaring orange?  a:link {color: #f60; }  Once visited, the state changes to a purple, but you want to change it to a vivid red!  a:visited {color: #900; }  What if you wanted to style both?  a:link a:visited (use a group selector)

5. :hover offers the greatest possibilities!  When a mouse passes over a link, you can style that link any way you want.  You can use any of the CSS properties you wish:  no underline/underline/bold/italic  color changes (active/inactive)  style changes (uppercase/lowercase/spread)  background changes (color/graphic)

6. Think LoVe/HAte  For those designers who leave no stone unturned:  a:active {color: #b2f511;}  You can ALWAYS use a.class selector to pinpoint any link (or group of links) on a web page.  Link states must be in a particular order:  a:link  a:visited  a:hover  a:active

7. EXAMPLES:  With a class selector named external:  a.external:link {color: #f60;}  a.external:visited {color: #900;}  Leave off the a, and only specifying the class: .external:link {color: #f60;} .external:visited {color: #900;}

8. Use Descendent Selectors  Target a tag that appears within another tag:  Wrap the link in a and apply a class or ID:  #mainNav a:link {color: #f60;}  #mainNav a:visited {color: #900;}  These properties give you the what and when to style.  They do not give you the how to style

9. Styling Links  Make a link look like a button  add a border  add a background color or graphic  add a highlight (color change on mouse over)  Lets start with UNDERLINING

10. Underlining Links  Remove the underline:  a:link {text-decoration: none;}  Underline on mouse over:  a:link, a:visited { text-decoration: none; background-color: #f00;}  a:hover { background-color: transparent; text-decoration: underline; }

11. Underlining Continued  Use a bottom border:  a { text-decoration: none; border-bottom: dashed 2px #9f3; }  Use a background image:  a { text-decoration: none; background: url(images/underline.gif) repeat-x left bottom padding-bottom: 5px; }

12. Create a Button  The main style elements are  border, background-color, and padding  Add a class and a border to create a basic box around your link:  a.button { border: solid 1px #000;}  Add a background color:  a.button { border: solid 1px #000; background-color: #333;}

13. Fancy Borders = Fancy Buttons  All four borders do not have to be the same width, type, or color  You don’t even have to have 4 borders  Add a beveled look using different border colors  a.button {  background: #b1b1b1;  color: #fff;  font-width: 4px;

14. Beveled Look Continued  a:button {  background: b1b1b1;  color: #fff;  font:weight: bold;  border-width: 4px;  border-style: solid;  border-top-color: #dfdfdf;  border-right-color: #666;  border-bottom-color: #333;  border-left-color: #858585;}

15. Use Graphics  Use the background image property:  don’t forget no-repeat  control placement with background-position  for the best placement, use a specific value such as pixels or ems  combine with percentages for vertical placement  background-position: 10px 50%;  (first value is horizontal, the second vertical)  padding gives you room  Remember, a link is an inline element, adding top/bottom padding has no effect. Change to a block

16. Building Navigation Bars  Use an unordered list  The XHTML for a navigation bar is simple   Home  News  Reviews,/li> 

17. Nav Bars Continued  The CSS varies depending on whether your want a horizontal or vertical navigation bar.  Remove the bullets: ul.nav {list-style-type: none;}  Eliminate padding and margins: ul.nav { list-style-type: none; padding-left: 0; margin-left: 0;}  This makes the list look like a plain block-level element

18. Vertical Navigation Bars  A bunch of links stacked one on top of the next.  Removing bullets, padding and margins get you almost there.  Now you want to actually style the link.  display as a block  this gives each button the same width  makes the entire area clickable  Constrain the width  if you don’t, the button will extend the width of the page

19.  ul.nav a {  display: block;  width: 8em;}  You would not have to set a width if the buttons are set within a constraining element such as a side bar, or div.  However, when you don’t set a width, IE will have trouble with the link and displays large gaps. If you set a width, this won’t happen.

20. Horizontal Navigation Bars  Use display: inline;  Make sure you don’t have too many buttons, or they will wrap  Style them as you would vertical links  Add top and bottom padding to the tag as well as the tag. This adds space to accommodate any borders or backgrounds you have added.  To make the horizontal bar appear in the center of the page, add text-align: center;

21. Pop-Up Menus  Son of Suckerfish Son of Suckerfish  Multi-Level Drop Down Multi-Level Drop Down  Vertical Drop Down with Pop Up Vertical Drop Down with Pop Up  Free Java Script Menus Free Java Script Menus  Ultimate Drop Down Menu Ultimate Drop Down Menu

22. Using Floats for Horizontal Navigation Bars  Although using the display: inline; is simple  Has one flaw: There is no way to create equally sized buttons. setting a width on either the or tag has no effect  Nav bars made up of floated elements are difficult to center

23. Float the List Items  Add float: left to the tags  ul.nav li {float: left;}  The floated list items slide right next to each other  Add display: block to the links  ul.nav a {display: block;}  Style the links  Add a width to the tag using ems  To center the text in the middle of the button, add text-align: center to the link’s style.

24. See Page 226 for the Code:  If you place a border, background color, or an image, on the float the tag also.  If you don’t, the list items float OUTSIDE the and you get an overflow  Because the is floated, the text or elements below may try to wrap around the nav bar.  To prevent: apply the clear property to the element following the

25. Where Do I Get Help?  List Tutorial List Tutorial  Cool List Based Designs Cool List Based Designs  List Tabs (Like Amazon) List Tabs (Like Amazon)  List-o-Matic Wizard List-o-Matic Wizard