Link Mods to the CSS for Your Website
You have already modified background colors for key page elements, and customized the major text styles for your website. (If you haven't done this, get back to the first CSS Modifications assignment before proceeding.)
In this assignment you will customize your link colors and effects. This is fairly easy to do, though there are a few specific kinds of links that need adjusting.
A great resource for us is Head First HTML, especially Chapters 8 & 9. Use these as a resource.
Your Task
- Identify the hex codes and link effects you want for links in the Main Navigation page element.
- Do you want an "underline" for active links?
- Do you want an "underline" on the link when the mouse hovers over the link?
- Do you want links to have a different font or style? (You might want "small-caps" style, for example.)
- Identify the hex codes and link effects you want for regular links in the Content page element.
- Identify the hex codes and link effects you want for links in the Site Info page element.
- Identify the hex codes and link effects you want for links in the Branding page element.
- Open your Template (or any page in your personal website, really). Using the CSS Pane in the upper right corner of the Dreamweaver interface, begin to apply the various link styles. Look for the following CSS Properties, and make the modifications:
- a - This is the very basic or default "link" style. In the CSS files I provide, the "a" styles control the look of links in the Content page element. (a:link, a:visited, and a:hover all help style the actions of this link. Modify these as well!)
- #branding a - This is the link style in the Branding page element. You can add a "visited" style and a "hover" style to the #branding a CSS Property.
- #mainnav a - This is the link style for the MainNav page element. Changes here control how your navigation is styled.
- #siteinfo a - This controls the link style for the SiteInfo page element at the foot of your page.
- Save your Template or page. Using the Files Pane (bottom right portion of the Dreamweaver interface), find and highlight your CSS file. Hit the blue PUT arrow to upload your CSS file to your web server space. Check your website. You SHOULD see the design changes reflected on every page in your website.
Use the Screencasts for Cascading Stylesheets found in the Web Development & Dreamweaver area of the Screencast Resources site for some help.
Don't like the look? Restyle!
Dr. Reid | Produce | Wikiwiki | Escher
| Cloisonne | The
Blues | Negative | Skinless