7 Replies Latest reply: Mar 26, 2012 9:55 AM by Nancy O. RSS

    How to apply style to multiple links?

    jljudson

      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?

        • 1. Re: How to apply style to multiple links?
          Nancy O. MVP

          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/

          • 2. Re: How to apply style to multiple links?
            Ken Binney MVP

            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

             

            • 3. Re: How to apply style to multiple links?
              jljudson Community Member

              Thanks for the responses Ken and Nancy.  I would like to add a monkey wrench to this.  I only need to color *some* of my links - not all.  What I'd like to do is be able to select (highlight) several links at once and change the text for them at the same time.  Some of the links (the unselected ones) would stay in the default color.  Can you tell me how to do that?  Thanks ahead!

              • 5. Re: How to apply style to multiple links?
                Nancy O. MVP

                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/

                • 6. Re: How to apply style to multiple links?
                  jljudson Community Member

                  Nancy, I'll have to work a bit on my divs.  I'm not sure if that idea would work for what I'm trying to accomplish.  Here's a picture of a portion of the webpage in question:

                  example.jpg

                  As you can see, there are headlines in blue, which are holdovers from the previous published page, and some in red which are latest additions.  In Visual Web, I merely highlight the headlines with my mouse and click on a foreground color to make them red (the default is blue).  The code then reflects a CSS style for those links with the color red.  I can select as many links as I want at a time to make this color change.  I was hoping to be able do do the same function as easily in Dreamweaver, as this is the program of choice to work in for me.  This page I've created is very dynamic, and changes constantly, so an easy way to pick headlines to color in groups would be much easier to handle than hard-coding or picking them individually.

                   

                  What do you think?

                  • 7. Re: How to apply style to multiple links?
                    Nancy O. MVP

                    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/