CSS classes being called but not having effect

Question

I currently have the following code:

<html>
<head>
<style>
.gr {
    color: "#ffffff";
    background: "#00ff00";
    border-radius: 8px 0 0 15px;
}

.or {
    color: "#00ff00";
    background: "#ffa500";
    border-radius: 0 15px 8px 0;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>

But the classes aren't having any effect at all. It remains this way even if I call an external stylesheet. But, if I do <span style="color:#ffffff;background:#00ff00;border-radius:8px 0 0 15px"> then it works. Can anyone help me with this?

score 3 · Answer 1 · answered Apr 14 '15 at 20:11

3

you need to take away the quotes around the hex codes. and change background to background-color (EDIT: I guess technically you don't need to it's more of a preference really)

fiddle here: http://jsfiddle.net/zy8yq6rj/

answered Apr 14 '15 at 20:11

dhershman

341
2
12

score 2 · Accepted Answer · answered Apr 14 '15 at 20:12

You need remove the quotes in your css.

.gr {
    color: #ffffff;
    background: #00ff00;
    border-radius: 8px 0 0 15px;
}

.or {
    color: #00ff00;
    background: #ffa500;
    border-radius: 0 15px 8px 0;
}

Working jsfiddle here http://jsfiddle.net/u36k17v6/1/

Alejandro Teixeira Muñoz · Answer 3 · 2015-04-14T20:39:01.613

0

It seems you have another CSS file that is overriding your config.

When you make a style="" inside a DOM object, it is the most important rule to follow. There you have a little explanation about that things.

Then add to your CSS code !important to make them the first to check:

<html>
<head>
<style>
.gr {
    color: #ffffff !important;
    background: #00ff00 !important;
    border-radius: 8px 0 0 15px !important;
}

.or {
    color: #00ff00 !important;
    background: #ffa500 !important;
    border-radius: 0 15px 8px 0 !important;
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>

You can check the rules applying to the DOM object, for example in chrome, clickng second button on mouse over the desired object to check, and choose Inspect Element. On the Styles panel you´ll be able to see the rules aplying to this object, and the file they are coming from.

Hope it helps!! Regards!

EDIT

I did´nt realize about the "" in the color and background !! Sorry!! Anyways I´m living the answer here. Thanks a lot to @deebs for the semicolon must go after the !important advice. will check better next time!!

edited Apr 14 '15 at 20:39

answered Apr 14 '15 at 20:13

Alejandro Teixeira Muñoz

2,758
1
22
31

1

In most cases you want to avoid using !important when possible check out this link here: http://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css – dhershman Apr 14 '15 at 20:20
1

Thanks for the add!! ;) i know about that, but I thought @accidentalbrine was a new one around that!! just trying to help him to discover his problem by watching the rules!! Maybe a better solution would have been to make more restricted rules instead of important!. Thanks!!! – Alejandro Teixeira Muñoz Apr 14 '15 at 20:25
1

I agree that sometimes it is helpful to determine the issue when using !important... but note that it should be before the semi-colon, not after (i.e. #ffffff !important;) – deebs Apr 14 '15 at 20:28
s...t i´m at home lazing with another thins in hands and did not check it correctly!! just assumed the priorities problem!! thanks a lot !!. Correcting it now!!! – Alejandro Teixeira Muñoz Apr 14 '15 at 20:34

score -1 · Answer 4 · answered Apr 14 '15 at 20:40

When specifying a color in CSS, you need to use the background-color tag. Also, you don't need to add quotations when specifying a HEX code.

So, your code should be:

<html>
<head>
<style>
.gr {
    color: #ffffff; !important
    background-color: #00ff00; !important
    border-radius: 8px 0 0 15px; !important
}

.or {
    color: #00ff00; !important
    background-color: #ffa500; !important 
    border-radius: 0 15px 8px 0; !important
}
</style>
</head>
<body>
<span class="gr">test1</span><span class="or">test2</span><br>
</body>
</html>

Welcome to the world of CSS!

Here's some light reading for you: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Also, as a go-to reference for all things CSS, I go to the MDN: https://developer.mozilla.org/en-US/

This is wrong. `background: hex;` works fine to create a background color. — Alexei Darmin, Apr 14 '15 at 22:28
Ahhhhh, my bad! It's not exactly wrong, its just the usual way to do it. — Gregory Worrall, Apr 15 '15 at 07:48

CSS classes being called but not having effect

4 Answers4