Override properties

Question

I have a class *, but I can't override the proporties in this class later on? Why...?

* {
    font-family:tahoma;
    font-size:11px;
    color:#3c6b93;
}

eg

.test {
    font-size:17px;
    color:red;
}

only way the .test class can override is I delete each specific proporty in the * class

It's working for me: http://jsfiddle.net/FnS8A/ .... probably there are some other errors i.e., typo in class names.... — MD Sayem Ahmed, Sep 04 '11 at 21:14
I'm not sure, but maybe the problem is this: http://jsfiddle.net/fPxcq/ (note ). Solution: Do not use `*` selector. — Floern, Sep 04 '11 at 21:20
@Floem - While I don't necessarily disagree, adding another `*` to the `.test` declaration resolves that. The problem is, where does it end? http://jsfiddle.net/userdude/fPxcq/1/ — Jared Farrish, Sep 04 '11 at 21:23
if its a bad idea to use the `*` selector, what are the alternatives? — clarkk, Sep 04 '11 at 21:26
@clarkk - Have you looked into [CSS Resets](http://stackoverflow.com/questions/116754/best-css-reset)? — Jared Farrish, Sep 04 '11 at 21:27
@clarkk Well `body` since those properties "trickle down" (descendants inherit them)... — Šime Vidas, Sep 04 '11 at 21:28
Here: http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful/1714210#1714210 first comment (by ApoY2k) explains it nicely. — Adam Jurczyk, Sep 04 '11 at 21:28

score 1 · Accepted Answer · answered Sep 04 '11 at 21:35

So this is how I do it:

body {
    font:11px/1.2 Tahoma, sans-serif;
    color:#3c6b93;
}

.test {
    font-size:17px;
    color:red;
}

The above properties trickle down (to descendant elements). Therefore, you define the most general rules on the body element. Now, unless overridden, those rules will apply to all elements on the page.

score 0 · Answer 2 · answered Sep 04 '11 at 21:19

<html>
<head>
    <style type="text/css">
        * {
                font-family:tahoma;
                font-size:11px;
                color:#3c6b93;
        }
        .test {
            font-size:17px;
            color:red;
        }
    </style>
</head>
<body>
    <div>Text</div>
    <div class="test">Text</div>
</body>
</html>

works as expected in my browser.

Override properties

2 Answers2