could someone tell me whats wrong with this my links arnt coloring to the color i want them to. the background and text part works but i am brand new with css so could someoen tell me what i did wrong?

code:

---

body {
           background: #001b2b;
           color: #80c0c0;
           font: Verdana;
           font-size: 1;
           }
       a:hover {color: #80c0c0; text-decoration:underline}
       a:link { color: ##ff0000 }
       a:visited { color: #ff0000 }
       a:active { color: #ff0000 }

---

body {
           background: #001b2b;
           color: #80c0c0;
           font: Verdana;
           font-size: 1;
         }
           a:hover {color: #80c0c0; text-decoration:underline;}
           a:link { color: ##ff0000; }
           a:visited { color: #ff0000; }
           a:active { color: #ff0000; }

Blah, I hate CSS Styles...They're used on my new blogging site, and they're so stupid, i'd rather have everything just in HTML format and together than in a CSS Style

quote:

---

Originally posted by Dane
Blah, I hate CSS Styles...They're used on my new blogging site, and they're so stupid, i'd rather have everything just in HTML format and together than in a CSS Style

---

a:link { color: #ff0000; } is surely better. In fact, you can write that colour in shorthand as a:link { color: #f00; }

Also I would say that only using Verdana as a font is possibly a bad idea. I know Verdana is a cross platform font, but you should include a font family just in case.

Also you need to specify units for the font size really. Commonly used is pixels, but you can use % or ems values. Google them to find out what they mean. Sorry for trying to complicate your CSS

And to Dane, oh boy... CSS is a pain the backside at times, but it's a really great way to make consistent styles. Before you say templates do the same thing, CSS allows you to have multiple styles. In fact what is what I have done on my site. Check it out here. Created using valid XHTML 1.1, pure CSS layout and I even have 3 styles (to switch styles, use something like Firefox or similar. I can use javascript to do it in IE, but I feel like punishing IE users )

I also need help. I want certain borders to have the attribute bordercolor=black and I want it in css.

To my understanding, it should be:

code:

---

.double{bordercolor=black} in the css doc
and
class="double" in the table to call it

---

code:

---

/* style for background */
BODY {
scrollbar-face-color: #000088;
scrollbar-shadow-color: #0000cc;
scrollbar-highlight-color: #0000ee;
scrollbar-3dlight-color: #0000ff;
scrollbar-track-color: #6699ff;
scrollbar-arrow-color: #000000;}
}

/* style to color links */
A {
text-decoration : none;
color : yellow;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
}

---

The CSS Stylesheet for Internet Explorer wont always work on Mozilla. They both use different viewing engines when it comes to CSS.

Take a look at this website for CSS Development on a Mozilla based browser.
http://www.mozilla.org/catalog/web-developer/css/

ok, but I can't seem to find out how to make it work. Can you repost the code to make it work please?? Much thanks.

I also need help with this: I want certain borders to have the attribute bordercolor=black and I want it in css.

To my understanding, it should be: .double{bordercolor=black} in the css doc and class="double" in the table to call it but it doesn't work for some reason. Any ideas why??

quote:

---

Originally posted by king_of_cool_kids
To my understanding, it should be:

code:

---

.double{bordercolor=black} in the css doc
and
class="double" in the table to call it

---

but it doesn't work for some reason. Any ideas why??

---

quote:

---

Originally posted by king_of_cool_kids

code:

---

/* style for background */
BODY {
scrollbar-face-color: #000088;
scrollbar-shadow-color: #0000cc;
scrollbar-highlight-color: #0000ee;
scrollbar-3dlight-color: #0000ff;
scrollbar-track-color: #6699ff;
scrollbar-arrow-color: #000000;}
}

/* style to color links */
A {
text-decoration : none;
color : yellow;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
}

---

but they dont. Any ideas??

---

Thanks Mnjul. .double{border-color:black} works.

Stink about the scrollbar

And fianally, is it supposed to be:

code:

---

/* style to color links */
A:link, A:visited, A:hover{
text-decoration : none;
color : yellow;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
}

---

Well, let's be more precise


What link-effect do you want?

I want the link to be yellow, when you first visit, click and go back to the page. AKA A:link, A:visited, A:hover.

I want it to have: font-family : verdana, arial, helvetica, sans-serif;

Font size 11px

Bold

Basicly this:

A:link, A:visited, A:hover{
text-decoration : none;
color : yellow;
font-family : verdana, arial, helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
}

but it dont work.

Well I don't know if a space is allowed like you do with "color : yellow;", try "color: yellow; " and do it that way for all tags... I don't really know how specific CSS is... Maybe you should make a space between "A:hover" and the { as well, and remove the ; in the end... So it becomes something like this:

A:link, A:visited, A:hover {
text-decoration: none;
color: yellow;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold
}

I don't think they do matter, Mippo

The CSS mentioned above works good in IE and FireFox here, king_of_cool_kids. Now I wonder...how you use your <a> tags?

I do it on a seperate page:

styles.css
and call it using
<link href="styles.css" rel="stylesheet" type="text/css">

It still doesn't work :/

Hmm works for me as well, in both IE and Firefox... king_of_cool_kids how are you putting/trying to put the CSS in your webpages?

EDIT: Oh, he posted that right above this post...

New post:

A common mistake is that people put the <style> tags in the .css file... do you?

quote:

---

Originally posted by king_of_cool_kids
I do it on a seperate page:

styles.css
and call it using
<link href="styles.css" rel="stylesheet" type="text/css">

It still doesn't work :/

---

quote:

---

Originally posted by Mnjul
Now I wonder...how you use your <a> tags?

---

Dont worry. Getting rid of the scrollbar code fixed it and now it works. One thing though:

Can I intergrate this

code:

---

/* style to color links */
A:link, A:visited, A:hover {
text-decoration: none;
color: yellow;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold
}

---

code:

---

}
a:link , a:visited , a:active {
cursor : help;
}

---

code:

---

/* style to color links and change cursor */
A:link, A:visited, A:hover {
text-decoration: none;
color: yellow;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold
}
cursor : help;
}

---

yes except you don't want that curly bracket in between them, and you're missing a semicolon (.  Think of it as a list of attributes, that you can add cursor: help; to

Awesome. Thanks fluffy_lobster. It works perfectly.

Of course it does

quote:

---

Originally posted by chris
a:hover {color: #80c0c0; text-decoration:underline}
a:link { color: ##ff0000 }
a:visited { color: #ff0000 }
a:active { color: #ff0000 }

---

quote:

---

Originally posted by Mnjul
As for the A tag, It's always better to define
A:link, A:visited, A:hover{
blahblahblah
}

(Some say that A:active and A:focus are also needed, but I don't think they make differences )

---

(Oops, sorry. Thanks for the correction, Mnjul )

quote:

---

Originally posted by Jeronimo
Also you need to specify units for the font size really. Commonly used is pixels, but you can use % or ems values. Google them to find out what they mean. Sorry for trying to complicate your CSS

---

quote:

---

Originally posted by CookieRevised
"focus" is not a valid attribute/tag...

---

Yeah IE just doesn't support it (although there is a vbscript solution)

I want to combine (if possible)

code:

---

/* style to color links and change cursor */
A:link, A:visited, A:hover {
text-decoration: none;
color: ffff00;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
cursor : help;
}

/* style to underline links on mouse over */
a:hover {
text-decoration: underline;
}

---

I would leave them separate as there is no way to combine the 2 and have different colours. Is it really a problem to have them separate?

quote:

---

Originally posted by CookieRevised
No, you don't. When you don't specify units the default "pt" (points) is used. And using "pt" is way better then using "px" (pixels)!!! Many people forget that not all people have the standard 92DPI setting for there monitor. People with big monitors have for example 150DPI. This mean that a pixel shown with 150DPI is much much smaller then when it is shown on 92DPI, so if you use "px" your font will be very small compared to what you  intend to. If you use "pt" then your font will be measured in points, and points are always the same, no matter what DPI setting....
In short, try to realy avoid the use of "px"....

---

yep, I know what it says, but (without saying that they are wrong) there are much more things to consider in practice....

It's hard to explain in English for me... I once (not so long ago) found an excellent page which backup up my points that I wanted to came across, but sadly, lost the link....

sidenote: Image are of course in pixels, and that proofs that the fact that HT(ext)ML in in fact not meant to create graphical content where everything hangs together and is absolutely dependend on other objectsizes. Of course it depends on who your usergroup is and what they use to view the "web"... if you have a very heavy graphical content and you use text that absolutly must fit into this graphics then it's indeed usefull to use px, but in all other cases it is better to not use it at all.... You should always take in account (or try to) that a user will not have the same DPI, windows fontsize and browser then you use. Because all that makes how the users sees the page. Also for people with vision problems who use special tools to view pages, bad use of px can be realy annoying because px sizes are very very small on large DPI screens, while pt-sizes or em-sizes (I could be wrong there) are not....


EDIT: something to back me up a bit: http://www.web-graphics.com/mtarchive/001165.php
(not the site I meant above, and not the best explaination, but similar, oh well...)

Yeah I know what you mean and agree somewhat, about keeping it the same size, and keeping text legible. But I have found that its possible to use relative sizes and for it still to be legible at different resolutions and such (I am not sure how this compares to using different DPI's??)

Also, its possible for the user to change the font size. In Firefox its just a case of pressing Ctrl++ or Ctrl+-. This does not "break" the way my page looks (this does in fact damage my arguement about things scaling correctly, but let's ignore that)

I think overall, relative sizes are better. If you change resolution, things scale accordingly. If you have the chance, look at my website and tell me if it works ok with different DPI's. I have used ems for the sizes of the text, cos W3C told me to Your point about people with vision problems is true, which is why all of my images have alt tags (needed to make XHTML 1.1 validate). I also have given them title tags to make tooltips (title is the correct way to make tooltips, NOT alt tags!!)

I guess it all depends on the person. After all, although I think a bit about it, I do not cater too much for IE, or browsers that are not modern and don't support CSS. Also its designed for screen resolutions of 10x7. I think as long as you take into account these things, you can make your site however you like

/offtopic

ok, a friend told me how to make the line black

code:

---

/* style to color links and change cursor */
A:link, A:visited, a:hover { 
color: #ffff00;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
cursor : help; 
text-decoration: none; 
}

/* style to underline links on mouse over */
a:hover { 
border-bottom: 1px solid #000000;
}

/* double border */
table.double { border-color:000000; }

---

Not quite sure what they were, but you had some strange invisible characters at the ends of many lines of your code.

I deleted them, and added a # for the table.double part at the bottom. Check the attacted code to see all the differences I made

HTH

opps, your right. They were spaces.  I dont know how they got there thought :/

Thanks for that. The code is now css format.