Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Using specific CSS Styles?


  • Please log in to reply

#1
bluegang6

bluegang6

    Member

  • Member
  • PipPipPip
  • 222 posts
I have a Wordpress based website and basic knowledge of CSS (yeah, maybe not so much, but still :D)

I want to change the styling of links throughout my site. However, I have links everywhere and only want to modify content links.

This is the path to the content with CSS Styling:

div.entry-content -> p -> a

The one before it is the specific post, and I want to target all posts.

What is the best way to enable a style for that specific content?

Please forgive my terminology, this is my first time I get into CSS this deep.
  • 0

Advertisements


#2
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
I'm not to crazy about WordPress, :D, but maybe this info will help you as you can style indivudual or a set of links different from each other:

A link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

* link - this is a link that has not been used, nor is a mouse pointer hovering over it
* visited - this is a link that has been used before, but has no mouse on it
* hover - this is a link currently has a mouse pointer hovering over it/on it
* active - this is a link that is in the process of being clicked

Using CSS you can make a different look for each one of these states:

a:link {
color:#006;
text-decoration:none;
cursor:pointer;
}

a:visited {
color:#369;
}

a:hover {
color:#f60;
text-decoration:underline;
}

a:focus {
outline: none; /* remove the dotted outline added by Firefox */
}

a:active {
color:#fc9;
cursor:wait;
}

Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

Pseudo Classes

You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion:

#pseudo_content a:link {color: #090;}
#pseudo_content a:visited {color: #999;}
#pseudo_content a:hover {color: #333;}
#pseudo_content a:focus {color: #333;}
#pseudo_content a:active {color: #090;}

Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.

Then for the links in a column you could use the following:

#pseudo_column a:link {color: #090;}
#pseudo_column a:visited {color: #999;}
#pseudo_column a:hover {color: #333;}
#pseudo_column a:focus {color: #333;}
#pseudo_column a:active {color: #090;}

Once again, this assumes the name of the column division, just change the name to match yours.

This same method can be accomplished by declaring a class instead of an id.

a.pseudo_column:link {color: #090;}
a.pseudo_column:visited {color: #999;}
a.pseudo_column:hover {color: #333;}
a.pseudo_column:focus {color: #333;}
a.pseudo_column:active {color: #090;}

Though in this case you will need to add a class to each link

<a class="pseudo_column" href="" title="">some link text</a>

But, there is still yet an easier way

.pseudo_column a:link {color: #090;}
.pseudo_column a:visited {color: #999;}
.pseudo_column a:hover {color: #333;}
.pseudo_column a:focus {color: #333;}
.pseudo_column a:active {color: #090;}

Then in the (X)HTML file
<div class="pseudo_column">
<a href="" title="">some link text</a>
</div>

  • 0

#3
bluegang6

bluegang6

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 222 posts
Hey!
Thanks ;)!!

I decided to replicate the location through wordpress onto Dreamweaver :D.
Came up with this code ;)

div.entry-content p a{
color: #0000CC; text-decoration: none; font-weight: bold
}

div.entry-content p a:hover{
color: #2400ff; text-decoration: underline; font-weight: bold;
}


And it worked ;))

Thanks again :(
  • 0

#4
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
You're very welcome. Good solution.
  • 0

#5
bluegang6

bluegang6

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 222 posts
:D I am getting ready to get into web design much more in depth, mind if I can stay intouch with you? You seem to be great at this kind of stuff! (Looking at your profile) ;)
  • 0

#6
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Sure. Just give a shout. I'm either working on a pro site or answering questions at Yahoo Answers.
  • 0

#7
bluegang6

bluegang6

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 222 posts
You are AWESOME :D

Will keep you in my contact list if that's alright ;)

Thanks again ;)
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP