Solved

Why are my links black?

Posted on 2011-03-03
10
195 Views
Last Modified: 2012-06-22
I find CSS very confusing.  Can you please tell me what to change to make my links a more traditional blue

http://wordswithfriends.net/?page_id=1779
0
Comment
Question by:wordswithfriends
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
Somewhere you have a CSS class that has this definition:

a
{
    color: #000;
}

Open in new window

Replace with:

a
{
    color: #9dd334;
}

Open in new window


Don't forget to set attributes for visited forms and such.
0
 
LVL 6

Expert Comment

by:jello024
Comment Utility
It looks like
#sidebar a
in
style.css
is changing the link color. you can remove that or change the color value.
0
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
To see what is going on. Navigate to the URL you provided and in IE7 or IE8 press F12. In the new window click on the mouse pointer at the far left. Now ALT+TAB back to your URL and mouse over the link and click it. Then go back to the F12 window and it will show you the class that has defined the attributes of your a tag. When I view it IE tells me that "style.css" is what is setting your a attributes.
0
 

Author Comment

by:wordswithfriends
Comment Utility
rawinnlnx9, it's not just a, I have sidebar a, footer a etc and I don't know which one to choose

jello024, it's not sidebar a which is currently 3c3c3c.

I know it's some type of a but I can't figure out which one
0
 

Author Comment

by:wordswithfriends
Comment Utility
rawinnlnx9, good tip.  I've tried modifying content a but this changes both the heading and the body.  I wish to change only the body
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Line 156 of your style.css file contains the following:

#content a {
      color: #000;
}

If you want to set the links to their default colours, simply remove these lines. If you want to set another colour, change it.


0
 

Author Comment

by:wordswithfriends
Comment Utility
I've tried that but it changes both my heading and content colors.  I just want the content anchor changed but the heading to remain black
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
OK, Sorry. Didn't notice that. It's because your heading is also a link (not sure if this is want you want.)

You could either remove the link from the header, or change the rule in your CSS to style only links within H2.

Change line 156 so that it only styles the H2 links
Instead of
     #content a { color:#000000; }

set it to
     #content h2 a { color: #000000; }

Open in new window

0
 

Author Comment

by:wordswithfriends
Comment Utility
That works but there are a few other undesired secondary effects e.g. "Older Posts" turns blue I would like it to stay black.  There must be some piece of code that affects just the links I want because those links are underlined and the others are not.

Would it be possible to find the CSS that is responsible for underlining and then modify that so that only the within post links are affected?  The
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 250 total points
Comment Utility
There is no CSS that defines the underline in your styles. Underlined links are the default, so your style sheet removes the underline, but only for links in the sidebar (style.css - line 265).

For CSS to style links differently, it needs to be able to identify them. For example, your style sheet says to colour all links within the content DIV to black (#content a { color:#000; }. If you only want some links to be black, then you will have to identify these separately, maybe adding a class and styling that.

Example
HTML
<a href="whatever.html" class="redlink">This will be black</a>

CSS
a.redlink { color: #f00; }
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now