Hi, I am having some trouble with my CSS link structure. To start with, I don't know so much of CSS, though i can do a few things with it. I have this website I am doing and everything seems fine as for now, but the only thing is that the links on the site are not blue! As of now, the only way to identify a link is that they are underlined. I would want that the the links be also blue, and when they are clicked, they should be.... say red, and when hovered on, they should have another color too.... I guess you understand what i am talking about. Could anyone please help me out? And to make this happen, do i have to place the codes on the css file, or on the ....html file? This may be dumb question, but guys, i am not good at this, so please help me out. here is the CSS codes i am using * { margin:0; padding:0; } body { margin:0; padding:0; font-size:15px; font-family:verdana, tahoma, helvetica, sans-serif; color:#000; background:#fff url('template-2-image-1.gif') 0 0 repeat-x; } a { color:#000; text-decoration:underline; } a:hover { color:#000; text-decoration:none; } #header-wrap { width:960px; margin:0 auto; padding:0; } #header { position:relative; width:960px; margin:0; padding:0; height:85px; } #header h1 { position:absolute; margin:0; padding:0; font-size:38px; font-weight:bold; font-family:'Trebuchet MS', arial, sans-serif; letter-spacing:-2px; top:0; left:0; } #header h1 a { color:#000; text-decoration:none; } #header h1 a:hover { color:#000; text-decoration:none; } #header h1 .color-red { color:#cc0000; } #header h1 .color-blue { color:#282844; } #header h2 { position:absolute; top:40px; left:50px; margin:0; padding:0; color:#000; font-size:22px; font-weight:normal; font-family:tahoma, 'trebuchet MS', sans-serif; } #header ul { position:absolute; margin:0; padding:0; list-style-type:none; right:0; bottom:5px; font-size:17px; font-weight:normal; font-family:arial, 'Trebuchet MS', tahoma, verdana, sans-serif; } #header ul li { display:inline; margin:0; padding:0; } #header ul li a { float:left; background:url('template-2-image-2.gif') left top no-repeat; margin:0; padding:0 0 0 4px; font-weight:normal; text-decoration:none; } #header ul li a span.header-list-background { float:left; background:url('template-2-image-3.gif') no-repeat right top; margin:0; padding:6px 5px 3px 4px; color:#fff } #header ul li a:hover span { color:#fff; } #header ul li a:hover { background-position:0% -42px; } #header ul li a:hover span.header-list-background { background-position:100% -42px; } #header #current a { background-position:0% -42px; color:#fff; } #header #current a span.header-list-background { background-position:100% -42px; color:#fff; } #content-outer-wrap { width:100%; margin:0 auto; padding:0; background:#fff; } #content-inner-wrap { width:960px; margin:0 auto; padding:5px 0 0 0; background:#fff; } #columns-wrap { float:right; width:410px; margin:0; padding:0; } #content-center { float:left; width:200px; margin:0 0 0 5px; padding:0; } #content-center .center-top { margin:0; padding:0; height:3px; background:url("template-2-image-4.gif") no-repeat left top; } #content-center .center-bottom { margin:0 0 15px 0; padding:0; height:3px; background: url("template-2-image-5.gif") no-repeat left bottom; } #content-center .center-content { margin:0; padding:5px 1px; background:#fff url("template-2-image-6.gif") repeat-y left top; } #content-center .center-content-box { margin:10px 0; padding:0; } #content-center h1 { margin:0; padding:0 0 0 5px; font-family:'Trebuchet MS', arial, sans-serif; font-size:20px; color:#cc0000; } #content-center p { margin:0; padding:8px 4px; font-size:14px; font-family:arial, tahoma, sans-serif; color:#000; } #content-center a { color:#000; text-decoration:underline; } #content-center a:hover { color:#000; text-decoration:none; } #content-center ul { margin:5px 0; padding:0; } #content-center ul li { margin:0; padding:0; display:block; color:#000; font-size:15px; font-family:'Trebuchet MS', arial, sans-serif; list-style-type:none; line-height:1.5em; border-bottom:1px solid #cc0000; } #content-center ul li a { margin:0; padding:0 0 0 15px; text-decoration:none; color:#000; font-size:15px; font-family:'Trebuchet MS', arial, sans-serif; color:#000; } #content-center ul li a:hover { color:#cc0000; background:url('template-2-image-7.gif') left center no-repeat; } #content-center .content-center-images { margin:0; padding:0; text-align:center; } #content-center img { border:0 solid #fff; margin:0; padding:0; } #content-right { float:left; width:200px; margin:0 0 0 5px; padding:0; } #content-right .right-top { margin: 0; padding: 0; height: 3px; background: url("template-2-image-4.gif") no-repeat left top; } #content-right .right-bottom { margin:0 0 15px 0; padding:0; height:3px; background: url("template-2-image-5.gif") no-repeat left bottom; } #content-right .right-content { margin: 0; padding:5px 0; background:#fff url("template-2-image-6.gif") repeat-y left top; } #content-right .right-content-box { margin: 10px 0; padding: 0; } #content-right h1 { margin:0; padding:0 0 0 5px; font-family:'Trebuchet MS', arial, sans-serif; font-size:20px; color:#cc0000; } #content-right p { margin:0; padding:8px 4px; font-size:14px; font-family:arial, tahoma, sans-serif; color:#000; } #content-right a { color:#000; text-decoration:underline; } #content-right a:hover { color:#000; text-decoration:none; } #content-right ul { margin:5px 0; padding:0; } #content-right ul li { margin:0; padding:0 0 0 1px; display:block; color:#000; font-size:15px; font-family:'Trebuchet MS', arial, sans-serif; list-style-type:none; line-height:1.5em; border-bottom:1px solid #cc0000; } #content-right ul li a { margin:0; padding:0 0 0 15px; text-decoration:none; color:#000; font-size:15px; font-family:'Trebuchet MS', arial, sans-serif; color:#000; } #content-right ul li a:hover { color:#cc0000; background:url('template-2-image-7.gif') left center no-repeat; } #content-right .content-right-images { margin:0; padding:0; text-align:center; } #content-right img { border:0 solid #fff; margin:0; padding:0; } #content-left { float:left; width:550px; margin:0; padding:0; background:#fff; } #content-left a { color:#000; text-decoration:underline; } #content-left a:hover { color:#000; text-decoration:none; } #content-left h1 { margin:10px 5px 10px 5px; padding:0; color:#cc0000; font-size:32px; font-family:"Trebuchet MS", arial, sans-serif; font-weight:normal; } #content-left h2 { margin:10px 5px 5px 5px; padding:0; color:#cc0000; font-size:22px; font-family:"Trebuchet MS", arial, sans-serif; font-weight:normal; } #content-left p { margin:10px 5px 10px 5px; padding:0; color:#000; font-size:15px; font-family:"Trebuchet MS", arial, sans-serif; } #content-left .img-float-left { float:left; margin:5px 15px 5px 0px; padding:0; border:1px solid #444; width:150px; height:150px; } #content-left .img-float-right { float:right; margin:5px 0px 5px 15px; padding:0; border:1px solid #444; width:150px; height:150px; } #content-left ul { margin:0; padding:5px 0 5px 10px; } #content-left ul li { display:block; list-style-type:none; margin:0; padding:3px 0; } #content-left ul li a { margin:0; padding:0 0 0 15px; color:#000; text-decoration:underline; background:url('template-2-image-7.gif') left center no-repeat; } #content-left ul li a:hover { text-decoration: none; } #content-left table { border-collapse:collapse; margin:10px 0; } #content-left th { background:#cc0000; height:29px; padding-left:11px; padding-right:11px; color:#fff; text-align:left; border-left:1px solid #b6d59a; border-bottom:solid 2px #fff; } #content-left tr { height:30px; } #content-left td { padding-left:11px; padding-right:11px; border-left:1px solid #fff; border-bottom:solid 1px #fff; } #content-left tr.rowa { background:#e5e5e5; } #content-left tr.rowb { background:#c1c1c1; } #footer { width:955px; margin:0 auto; padding:20px 0 0 0; background:#fff; } #footer p { text-align:center; margin:0; padding:5px 0 0 0; font-size:14px; font-family:arial, tahoma, sans-serif; color:#000; } #footer a { color:#000; text-decoration:underline; } #footer a:hover { color:#000; text-decoration:none; } .clear { clear:both; }
As brian says there is no default a color defined you can use a default a:link,a:hover,a:active,a:visited /* remove or edit a types as needed */ { color: #000 } if you have a class that is a specific color .class_name a:link,a:hover,a:active,a:visited { color: #000; font-stuff... etc }
Thanks for your relplies I Tried all these and nothing seems to be working still!! Don't know why. I am using this template: http://free3columnwebsitetemplates.com/template-2/template-2-page-preview.php It is the last but one template here: http://free3columnwebsitetemplates.com/ Can anyone please take a look at it and help me out? Just want to make the link within the content area to be blue... Thank you
Here is your code, and I have marked each spot where the color of your anchor tags (links) is specified.. so go through, and change them to the color you want. a { } is the standard view you will see, a:hover { } will be when it is moused over and a:visited { } will be after it has been visited There you go, keep in mind i only put a note before the anchor tag specifications started, and you will need to change more than just the one below it; like the a:hover properties You will also need to add a:visited if you want to specify a color for visited links other than what has already been specified. I don't think there were any specifications though, so you should be able to just add "a:visited { color: #900; } to the body tag up top. Change the color to whatever you want, i'm not sure what "#900" is haha. I'm pretty sure that is all you have to do though, sorry I dont want to put all that effort into it. I think i'm right though, i'm relatively new to CSS also, but i think i have a pretty good grasp on it
Hi MakingThisSucked, Thank you so much for your distinction and full explanation. Thanks to it, I identified the precise area where i wanted the links to be blue and it was called Content-left!!! So i played around with it a little and Kachin... the links became just as i wanted them to be. All this while i have been making the mistake of using the first or main a: value, which as you said only affects links that don't have any class or id definde to them. Guess CSS is a tricky thing, but when you start getting the basics, it becomes really interesting. Thank you once more
Not a problem, for the most part i'm in the beginning stages too, and this site has helped me tons. I'm glad to help.