Auto generate multiple CSS link styles?

[eyup]

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?

 

[mnkeybsness]

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!

 

[eyup]

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!

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?

 

[Mal]

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

 

[mnkeybsness]

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.

 

[eyup]

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.

Now you're talking, that's a v good point.

 

[ppc_michael]

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.

 

[eyup]

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.

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?

 

[Sdashiki]

.class a:hover {stuff}
.class a:visited {stuff}

 

[ppc_michael]

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.

 

[eyup]

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.

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 ;-)

 

[Sdashiki]

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.

 

[eyup]

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.

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.

 

[Sdashiki]

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!

 

[eyup]

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!

That's very interesting - thanks for the advice!

 

[Sdashiki]

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.




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}

 

[eyup]

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.




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}

even more interesting