CSS in Dreamweaver Tutorial: Configuring Link CSS Styles
Creating Link Styles in Dreamweaver CSS
Parts 1 of this Macromedia Dreamweaver CSS tutorial provided an overview of how to create a Cascading Style Sheet in Dreamweaver and add specific styles using the various options provided with the software. Part 2 discussed the two ways to incorporate CSS styles into your HTML pages while using Dreamweaver CSS, and part 3 highlighted some of the text attributes that can be set in the Dreamweaver CSS rules palette. Now, Part 4 discusses how you can configure your HTML page links with a customized look using CSS in Dreamweaver. It will also show you how to make links in different areas of your page look different by applying different CSS link styles.
By defining the standard “a:link,” “a:visited,” a:hover" and “a:active” CSS classes, you can set the specific parameters for the appearance of all text links in your HTML documents. The “a:link” class governs the appearance of a link before it is clicked. The “a:visited” class controls how it appears after a user visits it once. The “a:hover” class provides a way to control the roll-over appearance of the text. The Dreamweaver CSS bold or underline options are common methods of indicating a hover. The “a:active” class governs the appearance of the link as a user actually clicks. For example, some web developers might change the color of the link when active so the user has a visual reference that their click is being executed.
When you choose Text > CSS Styles > New from the Dreamweaver menu, click the “Advanced” radio button to begin. From the drop-down menu beside the button, you can choose from the above options, click OK and choose your attribute selections just like you would any other Dreamweaver CSS style. Although it is not one of the standard options, another useful CSS style to employ in managing the appearance of your links is the “a:visited:hover” class. It controls the roll-over appearance of a link after a user has already visited the link. To add it to your Dreamweaver CSS file, simply type the above class designation into the “New” palette input field with the “advanced” radio button checked. Once your styles are saved, it is not necessary to apply them to specific links throughout your pages. They will automatically appear on the text links for pages that have your Dreamweaver CSS style sheet attached.
Sometimes website developers find it helpful to change the way text links appear in different parts of a page. For example, you may want your main menu links to have one set of attributes and the links in the body of your text to have another look. This is easy to accomplish with CSS in Dreamweaver using the same Text > CSS Styles > New window. Designating a specific set of links to be governed by a style requires defining a unique name for the class. The correct syntax is to name your style “a.mainmenu:link” where “mainmenu” is replaced by your desired name. You can OK and configure these styles just as you would any other class. Be sure to create the same complete set of link styles for your designated link set as you did your standard set to fully control the look of your links.
Because your designated link set is separate from the standard CSS link classes, you must manually apply it to the specific links where you want it to appear. To apply the style, simply highlight the linked text and choose the unique name of your link set from the Styles drop-down menu in the Dreamweaver Properties window. Only those links with the class manually applied will appear with the link set’s attributes.
With these and the other Dreamweaver CSS tools, web developers can greatly control the look of text and features on their web pages, offering a very customized look within the standard HTML format.
This post is part of the series: Tutorial of CSS in Dreamweaver
This tutorial provides easy-to-follow steps for using CSS in Dreamweaver. Part 1 offers an overview of how CSS files are created and the types of CSS styles available. Part 2 explains the two ways Dreamweaver incorporates CSS into HTML, and parts 3 & 4 highlight CSS attributes for text and links.
