Different colored links on same page?

Discussion in 'Web Design and Development' started by ingenious, Feb 26, 2007.

  1. ingenious macrumors 65832

    ingenious

    Joined:
    Jan 13, 2004
    Location:
    Virginia, United States (Kansan in exile)
    #1
    Does anyone know of a way in Dreamweaver MX 6.0 to make links in different places different colors without CSS? I'm new to CSS (I mean brand-spankin' new) and have no idea what I'm doing in it; I'm willing to learn, but I haven't found a good tutorial yet, so I'm happy (minus y +ier) doing in it without CSS if it's possible.

    Thanks!
     
  2. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #2
    No, you can only do this with CSS, and it's so ridiculously simple I don't understand why would go out of your way to avoid it.

    For example, if you have links in two different parts of your page:

    Code:
    <div id="header">
      <a href="#">Link in header</a>
    </div>
    
    <div class="navigation">
     <a href="#">Nav link</a>
    </div>
    
    Then to give them two different colors you would have something like this in your CSS file:

    Code:
    #header a {
       color: #990000; /* red */
    }
    
    .navigation a {
       color: #000099; /* blue */
    }
    
    What you're seeing there is very basic CSS selectors. Having "#header a" as the selector says "For any <a> tag inside of something with an ID of 'header', the following applies." Same deal with navigation, except I used a class instead of an ID.

    You can take this idea further and define their hover behaviors differently:

    Code:
    #header a {
       color: #990000; /* red */
       text-decoration: none;
    }
    #header a:hover {
       text-decoration: underline;
    }
    
    .navigation a {
       color: #000099; /* blue */
    }
    
    That addition removes the default underline on the links in the #header div only, but applies the underline when you hover over them. The behavior of other links on the page remains unchanged.

    I have a hard time believing you haven't found a good tutorial for CSS yet. There's literally thousands out there. And I've said this before and I'll say it again: you will spend more time learning bad habits with something like Dreamweaver than you would spend learning how to do this stuff by hand with a decent tutorial. If you would have learned anything about CSS, you wouldn't have gotten stuck on something like this and wasted time trying to figure it out; I guarantee you'll run into things like this *constantly* if you depend on a WYSIWYG editor like Dreamweaver all the time. In the long run, it will cost you more time and suffering.
     
  3. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
  4. ingenious thread starter macrumors 65832

    ingenious

    Joined:
    Jan 13, 2004
    Location:
    Virginia, United States (Kansan in exile)
    #4
    It's because I have absolutely no idea what I'm doing... like I said, I'm a complete n0ob with CSS.

    I've looked through four and found nothing I could understand because I've had no CSS background. Thank you for your help.
     
  5. ingenious thread starter macrumors 65832

    ingenious

    Joined:
    Jan 13, 2004
    Location:
    Virginia, United States (Kansan in exile)
    #5
    I agree.
     
  6. grapes911 Moderator emeritus

    grapes911

    Joined:
    Jul 28, 2003
    Location:
    Citizens Bank Park
    #6
    Add a style tag to each link.

    Code:
    <a href="#" style="color:#990000">Some Red Link</a>
    <a href="#" style="color:#000099">Some Blue Link</a>
     
  7. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #7
    Good tip. For the OP, using that "style" tag is basically just inline CSS. The disadvantage, of course, is that you'll have to do that on every tag you want to be different.
     
  8. ingenious thread starter macrumors 65832

    ingenious

    Joined:
    Jan 13, 2004
    Location:
    Virginia, United States (Kansan in exile)
    #8
    Thank you! That will work perfectly for what I need.

    Also, if someone can recommend a good CSS either in book format or on the web, that'd be great. :D
     
  9. chepistolas macrumors member

    chepistolas

    Joined:
    Apr 21, 2005
    Location:
    Chicago
    #9
    Best resource

    Ok, so I am recomending, CSSThe Missing Manualby David Sawyer McFarland. I heard about it in Leo Laport's podcast one day last year and gave in and tried it. I always wanted to learn CSS quickly and effectively because I didn't have much free time as a student. I seriously learned more than the basics, or 75% of the book in three 5 hour days. Great book, I actually don't miss my copy of Dreamweaver at all, CSSedit all the way.
    You should go pick it up, I got it for less than $20 at Amazon.
     
  10. grapes911 Moderator emeritus

    grapes911

    Joined:
    Jul 28, 2003
    Location:
    Citizens Bank Park
    #10
    That is a pretty good book. My two favorites are Cascading Style Sheets: The Definitivie Guide by Eric A. Meyer and CSS Cookbook by Christopher Schmitt.
     
  11. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #11
    One or two useful links here

    And that's a massive understatement.
     
  12. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #12
    Designing with Web Standards by Jeffery Zeldman (now in its 2nd edition) is required reading (IMO) for anyone looking to start using CSS. It won't teach you everything you need to know, but by the time you get done with it you can at least do the basics and can understand the more detailed stuff.
     
  13. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #13
    Yes, this will work...and it's "simple," but it COMPLETELY defeats the purpose of using CSS in the first place.

    If I were the OP, I'd skip the books for now and check out http://www.w3schools.com/ for a decent CSS primer.

    CSS is enormously helpful if used correctly, but if you're going to use inline styles, you might as well be using <font> tags.
     
  14. chepistolas macrumors member

    chepistolas

    Joined:
    Apr 21, 2005
    Location:
    Chicago
    #14
    I like the site! Thanks for the link. :)
     
  15. grapes911 Moderator emeritus

    grapes911

    Joined:
    Jul 28, 2003
    Location:
    Citizens Bank Park
    #15
    No freaking kidding? :rolleyes:
    The OP said:
    While its not the way I'd personally do it, it is exactly what ingenious asked for.
     
  16. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #16
    Good call. I must've glossed over the "without CSS" part. This day and age, the concept of no CSS is almost completely foreign to me. ;)
     
  17. jelloshotsrule macrumors G3

    jelloshotsrule

    Joined:
    Feb 7, 2002
    Location:
    serendipity
    #17
    as a not very experienced web designer who recently needed to succumb to the inevitable use of css for a site i was working on, i'd just voice to the original poster that it's not as complicated as it seems, so don't be afraid to give it a try. it's a great way to change things on a large scale without having to micromanage things within the code... after doing a lot of "find and replace" i was happy to have a better way to do it!
     
  18. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #18
    I highly recommend that site! i learnt everything i know about css from that site!
     

Share This Page