Auto generate multiple CSS link styles?

Discussion in 'Web Design and Development' started by eyup, Jun 29, 2007.

  1. eyup macrumors regular

    eyup

    Joined:
    Aug 21, 2006
    Location:
    UK
    #1
    Hi all,

    Is there a programme that can automatically generate multiple link styles?

    I have text in the same block with various different colours and sizes. eg:

    .verdana12pxblue
    .verdana14pxgrey
    .verdana16pxblue

    Do i have to manually duplicate and change/add for each one like below?

    .verdana12pxblue a:link
    .verdana12pxblue a:visited
    .verdana12pxblue a:hover
    .verdana12pxblue a:active


    .verdana16pxblue a:link
    .verdana16pxblue a:visited
    .verdana16pxblue a:hover
    .verdana16pxblue a:active

    etc

    or is there an amazing app that can do it for me?
     
  2. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #2
    1: I haven't seen anything for what you're trying to do.

    2: EW! That's some terrible CSS practices there. Classes and IDs should have names that mean something, like #content or #navigation; they should NOT reflect what the actual style is!
     
  3. eyup thread starter macrumors regular

    eyup

    Joined:
    Aug 21, 2006
    Location:
    UK
    #3
    EW? - but then I'd end up with #contentA, #contentB, #contentC - if I describe it at least I know exactly what I'm applying?

    Surely no problem in that?
     
  4. Mal macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #4
    No, in that case you name them something more appropriate, such as #navlink or #internallink and #externallink. Without knowing the exact usage of these it's hard to say exactly how best to name them, and to each his own, but you really are defeating the purpose of those class and id tags somewhat by doing it the way you are.

    jW
     
  5. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #5
    Let's look at a scenario... say somewhere down the line you are sick of that blue and Verdana and you want to change all of your fonts to Helvetica and links to a shade of red... then you have to not only go through the CSS values, but change the classes in both your CSS docs AND every one of your HTML pages. Sounds like a pain in the ass to me.
     
  6. eyup thread starter macrumors regular

    eyup

    Joined:
    Aug 21, 2006
    Location:
    UK
    #6
    Now you're talking, that's a v good point.:eek:
     
  7. ppc_michael Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #7
    I'm not exactly sure what you're asking, so here are some possible answers. ;) I'll use .class instead of .verdana12pxblahblahblah to make it easier to type.

    - Defining .class a would take the place of all of the .class a:link, .class a:visited, .class a:hover, and .class a:active.

    - You can assign multiple classes to an element using the syntax <div class="class1 class2">. So maybe use class="verdanablue twelvepx" in one element and class="verdanablue sixteenpx" to make your CSS less redundant.

    - Not to nag, but as stated by the other people, those are some pretty nasty class names. ;)
     
  8. eyup thread starter macrumors regular

    eyup

    Joined:
    Aug 21, 2006
    Location:
    UK
    #8
    Hi, thanks for the reply.

    I'm wondering how a '.class a' can handle a hover colour change? Wouldn't that just define say the colour of the link text?
     
  9. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #9
    .class a:hover {stuff}
    .class a:visited {stuff}


    :p
     
  10. ppc_michael Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #10
    Define .class a first to cover all the bases, then overload the stuff you want changed. So if you want all anchors to be the same except when hovered over, your code would look like

    .class a { /* your styles */ }
    .class a:hover { /* hovered style */ }

    And that's it. a:link, a:active, and a:visited will all take on the .class a stuff, and the a:hover will take on .class a:hover.
     
  11. eyup thread starter macrumors regular

    eyup

    Joined:
    Aug 21, 2006
    Location:
    UK
    #11
    But given that I have multiple sizes/colours on the same page/block aren't I going to have to define more and more classes - until I end up with what I started with (see below).

    Also - is there no need for a:visited and active in the below if it is to be the same as .verdana12pxblue ?

    .verdana12pxblue a:link
    .verdana12pxblue a:visited
    .verdana12pxblue a:hover
    .verdana12pxblue a:active


    Also - I know you chaps hate my obvious names but when I'm in Dreamweaver selecting styles from the side pallet it makes it easy for me to see what I'm applying as I build/design the site without having to delve into the sub pallette to see that oh it's verdana, 12px and blue. Or using that slow 'styles view' pallet on the properties bar. (I do see the point about changing to Arial tho! - but I reckon i can do a site find-replace if it ever came to that).

    ps thatnks for your input here - bit of a css noob ;-)
     
  12. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #12
    Seriously change your class names to informative labels.

    WHAT are you using

    .verdana12pxblue a:link
    .verdana12pxblue a:visited
    .verdana12pxblue a:hover
    .verdana12pxblue a:active

    for? headings? links? maincolumnlinks?

    label it as such, youll thank yourself later.

    seriously. do it. and use the CSS tab within dreamweaver to see what your current selection is, thats what its for. You can also hover over things within the design view to see its css.


    and no you dont have to repeat style, it always reverts to "class a"if nothing else is defined.

    so if only hover needs to change, only define a:link and a:hover.

    correct me if im rong anyone.
     
  13. eyup thread starter macrumors regular

    eyup

    Joined:
    Aug 21, 2006
    Location:
    UK
    #13
    But that's just it - I may use them for multiple elements - a heading, a link or a maincolumnlink, or a sidecolumnlink- and it may change - as I build the site.
     
  14. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #14
    then you are supposed to used the H1, H2 etc heading tags.


    another way is:

    #maincolumn {describe this div}
    #maincolumn a{describe links found within this div}

    #sidecolumn {describe this div}
    #sidecolumn a {describe links found within this div}

    adding a:hover etc where needed.

    requires no marking of classes within your html markup really. wherever it finds a link within certain divs it applies the style

    does THAT work for you?


    i dont know what to tell you, if you want to do it that way, go right ahead. It is after all your site!
     
  15. eyup thread starter macrumors regular

    eyup

    Joined:
    Aug 21, 2006
    Location:
    UK
    #15
    That's very interesting - thanks for the advice!
     
  16. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #16
    Just came to me, DUH, i thought, thats the obvious way you are supposed to do what youd like to accomplish.

    cuts down on alot of the CSS and HTML code clutter.

    less, is always more with CSS.

    :D


    dont forget you can do alot of things with CSS like this:

    #maincolumn p a {describe links within <p> tags within this div}

    .class {anything you want}

    #maincolumn.class {change things for .class within this div}
     
  17. eyup thread starter macrumors regular

    eyup

    Joined:
    Aug 21, 2006
    Location:
    UK
    #17

    even more interesting :)
     

Share This Page