Skip navigation
jljudson
Currently Being Moderated

How to apply style to multiple links?

Mar 25, 2012 6:20 AM

Tags: #html #dreamweaver #links #css

I'm a newbie here, so maybe this is a simplistic question.  I am having trouble applying a color style to multiple links on a webpage at the same time.  I have a page setup with a layout similar to the Drudge Report, which posts href links separated by horizontal rule lines.  I want to apply a color style to these links, but I'm finding I have to select each link individually in design mode to apply the style.  When I select multiple links in design mode, the color doesn't apply to the text.  It's time consuming to select each link individually.  I can do this easily in Microsoft Visual Web.  How can I do it in Dreamweaver?

 
Replies
  • Currently Being Moderated
    Mar 25, 2012 10:16 AM   in reply to jljudson

    Use CSS to style your links.  Change colors as desired.

     

    a:link {color:red}             /**unvisited link**/

    a:visited {color:gray}     /**visited link**/

    a:hover {color:blue}       /**on mouse over**/

    a:active {color:purple}  /**on click**/

     

    Using  DW Page Properties to create a basic CSS style sheet

    http://kb2.adobe.com/community/publishing/505/cpsid_50576.html

     

     


    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 10:29 AM   in reply to jljudson

    Welcome

     

    If you wish to change the color of ALL links, add this to your CSS stylesheet

     

    a:link {color:#FF0000;}  /* unvisited link */

    a:visited {color:#00FF00;}  /* visited link */

    a:hover {color:#FF00FF;}  /* mouse over link */

    a:active {color:#0000FF;}  /* selected link */ 

     

    These are called pseudo-classes, and they must be listed in this exact order.

     

    Also,note this

    http://forums.adobe.com/thread/691654?tstart=0

     

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 2:30 PM   in reply to jljudson
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 2:32 PM   in reply to jljudson

    The best way is to put all related links into a division. 

    Let's say you want to have red links in your #header and white links in your #footer which has a black background.

     

     

    CSS, set up two sets of link styles:

     

    #header a {text-decoration:none}

    #header a:link {color:red}     /**unvisited**/

    #header a:visited {color:gray} /**visited**/

    #header a:hover,               /**on mouse over**/

    #header a:active,              /**on click**/

    #header a:focus                /**on tab key**/

        {text-decoration:underline}

     

     

    #footer {background: #000;}

     

    #footer a {text-decoration:none}

    #footer a:link {color:white}

    #footer a:visited {color:yellow}

    #footer a:hover,

    #footer a:active,

    #footer a:focus 

        {text-decoration:underline}

     

    HTML:

     

    <div id="header">

    <a href="some-link.html">Link in the header</a> |

    <a href="some-link.html">Link in the header</a> |

    <a href="some-link.html">Link in the header</a> |

    </div>

     

    <div  id="footer">

    <a href="some-link.html">Footer link</a> |

    <a href="some-link.html">Footer link</a> |

    <a href="some-link.html">Footer link</a> |

    </div>

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2012 9:55 AM   in reply to jljudson

    DW isn't a word processor.   For what you want to do, create two sets of CSS link styles:  one for default links and another for .latest links.

     

    .latest a:link {color:blue}

    .latest a:visited {color:gray}

    .latest a:hover,

    .latest a:active,

    .latest a:focus {color: purple}

     

    Apply .latest class to the anchor tag.

     

    <a class="latest" href="some-link.html">Latest link</a>

    <a class="latest" href="some-link.html">Latest link</a>

    <a href="some-link.html">Default link</a>

    <a href="some-link.html">Default link</a>

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points