Sign in to follow this  

[web] css syntax for this

This topic is 4593 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

<html>
<head>

<style>
#menu a:link
{
	color: #00ff00;
}
#menu a:visited , a:hover , a:active
{
	color: #ff0000;
}
</style>

</head>
<body>

<div class="menu">
	<a href="http://www.google.com">google</a>
</div>

</body>
</html>

[Edited by - Genjix on May 17, 2005 1:25:04 PM]

Share this post


Link to post
Share on other sites
I don't either but I can guess!

I think he wants to know if the syntax of his CSS is correct for that file. He wants to edit the look of the link to google with CSS by assigning properties to the menu class that is assigned to the google link.

I dont know about using #menu since I don't use anything like that and therfore I guess it would be incorrect however I do remember seeing something about assigning IDs using #foo (example)

Bell rung and I have to run to art before I get a detention for being late =
Go to www.webmonkey.com and look at the CSS section there. It will show you the correct syntax and how to control the looks of links and whatnot.

~Brandon Haston~

Share this post


Link to post
Share on other sites
If you're having a problem with the styles not being applied it is probably because in your stylesheet you are specifying that the style will only be applied to things with id="menu" not class="menu". Change the '#' to a '.' in your stylesheet and it should work.

Share this post


Link to post
Share on other sites
oh sorry for not being clear enough.

basically it just doesn't work.

<html>
<head>

<style>
.menu a:link
{
color: #00ff00;
}
.menu a:visited , a:hover , a:active
{
color: #ff0000;
}
</style>

</head>
<body>

<div class="menu">
<a href="http://www.google.com">google</a>
</div>

</body>
</html>


makes the link green, but hovering does not work.


<html>
<head>

<style>
#menu a:link
{
color: #00ff00;
}
#menu a:visited , a:hover , a:active
{
color: #ff0000;
}
</style>

</head>
<body>

<div class="menu">
<a href="http://www.google.com">google</a>
</div>

</body>
</html>


makes the link my browsers default but hovering works


<html>
<head>

<style>
.menu a:link
{
color: #00ff00;
}
#menu a:visited , a:hover , a:active
{
color: #ff0000;
}
</style>

</head>
<body>

<div class="menu">
<a href="http://www.google.com">google</a>
</div>

</body>
</html>




just makes it green (hovering doesn't work).


I simply assumed I wasn't using selectors in the correct way and someone would pick up on it.

Share this post


Link to post
Share on other sites
I know your problem.
"a" in a:link is like the

tag properties. Behaves the same way when assigning the different styles and such. So the next part of a:link (link) is the status of a. When the mouse hovers over it you gotta tell CSS what it should do to the HTML.

so type this...

<style>

a:link {
#00F673;
}
a:hover {
#000333;
}
a:visited {
#444200;
}
a:active {
#8790F2;
}

</style>

should work fine

~Brandon Haston~

Share this post


Link to post
Share on other sites
While in CSS, the "#" sign denotes things you're assigning an ID, and "." is used for CLASS. If you use neither, the browser assumes you're changing a preexisting tag. Both "#" and "." serve the same function, so I assume a distinction is only made to support scripting languages. For HTML/CSS though, the above is all you need to know.

EDIT: By the way, I'm pretty sure "A:VISITED" is supposed to appear after "A:ACTIVE".

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
Quote:
Original post by I Like Bread

EDIT: By the way, I'm pretty sure "A:VISITED" is supposed to appear after "A:ACTIVE".


Could be. Im not saying that you HAVE to write the css like I typed it up. I was just giving a general idea =) So if the css doesn't work, Try I Like Bread's info and put Active before Visited. Hell just do it anyways to save you the trouble =)

Share this post


Link to post
Share on other sites
Quote:
Original post by I Like Bread
While in CSS, the "#" sign denotes things you're assigning an ID, and "." is used for CLASS. If you use neither, the browser assumes you're changing a preexisting tag. Both "#" and "." serve the same function, so I assume a distinction is only made to support scripting languages. For HTML/CSS though, the above is all you need to know.

The difference is that ID attributes are required to be unique (though it's not enforced by most browsers). id's and classes serve fundamentally different functions.

Share this post


Link to post
Share on other sites
Your problem is here: .menu a:visited, a:hover, a:active. Needs to be like this: .menu a:visited, .menu a:hover, .menu a:active. Each element seperated by a comma is seperate, and the class/ID you applied to the first one doesn't cascade through the whole lot.

[Edited by - Yezzy on May 20, 2005 10:08:27 PM]

Share this post


Link to post
Share on other sites
Quote:
Original post by Yezzy
Your problem is here: .menu a:visited, a:hover, a:active. Needs to be like this: .menu a:visited, .menu a:hover, .menu a:active. Each element seperated by a comma is seperate, and the class/ID you applied to the first one doesn't cascade through the whole lot.


oh right. thanks very much all.

Share this post


Link to post
Share on other sites

This topic is 4593 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this