advice on Creating Different hyper link color attributes

[tanya]

I am new to dreamweaver and CSSS etc I know how to do hyperlinks to different pages within a website.... BUT I am stuck how to go about creating the right CSS so as to have DIFFERENT hyper links attributes not all have the same color or end up doing the same color change when clicked on taking them to pages within my website etc, and certain hyperlink words in the main content areas.

 

here is the simple scenario what I mean:

 

If I want to have some menu links placed on say two separate parts of the header area maybe for example on a colored strip that is blue ( lets call this "main menu") and underneath this blue strip is also another strip that is say red (lets call this the "sub menu" and both of which by the way I did these ?menu colored strips? by simply using a table i.e. 2 row/1 cols table with each cell a different color background ) and please note also on the left of the page will be another menu with a color background using again say a table 1 col and 1 row table or do a div etc (and I can call this ?left menu?).

 

In short I do not want to have all hyperlinks ending up having all the same attributes (say all in blue and change to orange etc) in the 3 menus scenarios as above or where I have other hyper links within some sentences in the main content to all be the same colors or behaviour changes colors when clicked !

 

What I want to be able to do is some links on the main content area be a certain color BUT different to the menus etc, say for example maybe have the "blue table cell MAIN menu" hyperlinks to pages say in a black (and turns to red when clicked and also become underlined ) - BUT on say the "sub menu (table red cell)" those hyperlink to pages might be in blue and turn to white and lastly say the Left menu the hyperlinks to other pages maybe be in a white and turn to a blue.

 

so my question is how do you go about logically applying the Css rules and what Rules specifically and what selector tags would be the one to choose i.e. Class, id or Tag to apply etc so as to being able to actually have different attributes such as hover, and when clicked after being visited.

 

I am just getting to grips with basic concepts to CSS I can't do any code but understand a liitle of what some of the typical tags are such as p tags, td, table and so on)

 

If someone can help me how to do this I would be most grateful and simple step by step and how to do the appropriate css rules ? what id tags to use many thanks guys

 

Tanya

[Wickham]

You give each set of links a different class or id and then set different attibutes like color, underline, italic, etc. for each class or id.

 

See http://www.wickham43.net/specialeffects.php#linkcolors item 3a

 

Remember to repeat the class or id for each state eg visited, hover, etc. like this

 

.darkgreen a:link, .darkgreen a:visited, .darkgreen a.hover { color:#335500; text-decoration: none }

as .darkgreen a:link, a:visited, a.hover { color:#335500; text-decoration: none } will only change the link state and the others will be the browser default style.

 

Split each state into different styles where they are different eg color.

 

If you want all states of a link to be different from eachother and different from the default setting, create different classes for each state:-

 

This method uses a class for a span tag (but it could be the p tag or any other element like a div):-

 

.newlink a:link { color: red;}

.newlink a:visited { color: blue; text-decoration: none; }

.newlink a:hover { color: green; }

.newlink a:active { color: pink; text-decoration: none; }

 

The class would be applied like this:-

 

Sentence with a link in it page description

 

or like this:-

 

Sentence with a link in it page description

 

or like this:-

 

Sentence with a link in it page description

Edited June 21, 2009 by Wickham

[tanya]

Wow I am a little overwhelmed and still stuck from what Wickham said I need to do etc for having different hyperlink attributes for areas in my new website I am doing.

 

Please let me explain myself another way and maybe I can get to grips with it and get this solved for me In short I am only just learning css and dreamweaver but I have no idea how to write ANY css code etc.

 

If you or someone can maybe just explain how to go about and select the appropriate css set 'new rules' and what I should do and logical choosing the appropriate selector type when the menu box open i.e. do I select class, tag or i.d settings ? for the following 3 things I want to have happen and trying to figure out regarding hyperlinks attributes in different areas for my website

 

1) In the content area where all the typical writing goes...... ALL these such hyperlinks I may have within the content these can all be set to the same attributes i.e. say all in a blue and turn to orange and underlined when hovered over and once you have visited that hyperlink it stays on say purple.

 

So question ONE is How would you go about setting this up and defining this please?

 

Because I have no idea how to write code what do I need to do select the appropriate css set new rules and selector type i.e. class, tag or i.d settings

 

Next scenario 2) Now here is where I am stuck!

 

I am placing a menu on the LEFT of my website with hyper links to pages etc, so, I'll call this "LEFT MENU"..... and I want these links to maybe not have the same attributes as for the above content.

 

Instead this ?LEFT MENU in this case all the hyper links ( say 7 of them) are starting off as a WHITE font and are UNDERLINED and then, when hovered over change to red and once visited stay on purple.

 

Again; How would you go about setting this up Because I have no idea how to write code what do I need to do select the appropriate css set new rules and selector type i.e. class, tag or i.d settings

 

*Please NOTE Though* (the hyperlinks by the way for the LEFT MENU here been placed in a colored box i.e. a div or probably a 1 column and 1 row table that has say a blue background . I thought I would mention this use of a table in case you need to bare in mind for the CSS rules?)

 

Then lastly scenario 3) a main menu and just underneath another, ?sub menu? (placed in a two cell table or a div)

 

I will have a menu in the Header area and let?s call this ?MAIN Menu ?and let?s say there will be required 5 hyperlinks to take the reader off to other areas in the website . And on this ?MAIN Menu? I want those attributes for the hyperlinks, to maybe APPLY the Same as the attribute for any hyperlinks as placed in the Content Area (described as in number 1 above).

 

How would you go about setting this up and defining this please?

 

*Again NOTE * (the hyperlinks for the MAIN MENU here have been placed in a colored box i.e. a div or probably more LIKELY I will do a 1 column and a 2 row table ? that has a shaded background thought I would mention this use of Table to bare in mind for the CSS rules?)

 

And lastly?. I may have in this 2 row table another menu (below the main menu ) and lets call this ?SUB menu? and here the hyperlink attributes maybe the same as for ONLY the LEFT menu above as mentioned.

 

*Again NOTE * (the hyperlinks for the Man and sub MENU here have say been placed in a colored box i.e. a div or probably a 1 column and 2 row table that has a shaded background thought I would mention this to bare in mind for the CSS rules?)

 

So hoping you can be patient with me !! And explain how to logically simply do this without me needing to write code as I was hoping it is merely knowing how to specifically go about applyng/select the right CSS rules and apply the right Selector tags?

 

Many thanks!

Tanya

[Andrea]

If you're serious about learning how to build websites, you need to learn how to write CSS and HTML. Stef has a bunch of great tutorials right here on killersites, then there's www.how-to-build-websites.com, and www.idea22.com.

 

If you just want to try and get by with a wysiwyg editor - Stef also has great dreamweaver tutorials at www.killerdreamweaver.com and www.killersites.com/dreamweaver.

[Guest shirin]

why my text turns to red and become underlined?

[virtual]

That is a default for links, so you probably have not set a different colour or text-decoration:none in your css for your different link states.

[virtual]

@Tanya

 

From a design and usability point of view it is not a good idea to have 4 sets of different colours for the different link states on your page. It will be confusing to the user and visually garish. Consistency in a web page is a must for the above mentioned reasons.