CSS - Cannot override P.class because of * definition

Question

I have a site using 2 css : one global, one page specific.
By default, I want to set a font type and size for everything, and adjust it depending on my needs on some pages.

So I have :

global.css

* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
}

p {
    text-align:justify;
    margin:0px;
    margin-bottom:10px;
}

a:link {
    color: #993300;
    text-decoration: none;
}

a:visited {
    color:#993300;
    text-decoration: none;
}

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

news.css

div.news{
    width: 100%;
}

.news p.reminder {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #848484;
    margin:0px;
    margin-bottom:20px;
    text-align: center;
    position: relative;
    top: -10px;
    text-transform: uppercase;
}
.news p.reminder a:link, .news p.reminder a:visited {
    color: #848484;
}
.news p.reminder a:hover {
}

HTML file

       <HTML>
          <HEAD>
             <TITLE>the title</TITLE>

              <LINK href="global.css" rel="stylesheet" type="text/css">
              <LINK href="news.css" rel="stylesheet" type="text/css">
           </HEAD>
           <BODY>
              <DIV class="news"> 
                    <P class="reminder"> 
                        <A href="some_url">some text</A> 
                    </P>
                </DIV>
            </BODY>
        </HTML>

For a reason I don't see, the part :

.news p.reminder {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;

is not taken into account.
If I remove the * definition from the global.css, it's OK. But if I keep it, that part does not override it.

How may I do to make this work ?

Not the answer (see Quentin for that), but I would point our that rather than `font-family: Arial, Helvetica, sans-serif;` you can get away with just `font-family: sans-serif` (Arial and Helvetica are the the default sans-serif fonts on their respective OSs) — isNaN1247, Dec 11 '11 at 11:13
Did you know that the [Universal selector in `CSS` is considered harmful](http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful) ? It [affects the global performance of a website](http://stackoverflow.com/a/1714258/1029952) and can sometimes produce [unexpected results](http://stackoverflow.com/a/1714210/1029952) **like in your case**. — Pierre, Dec 11 '11 at 11:15
Not using the universal selector (and knowing why) is the first step toward a solution imo — FelipeAls, Dec 11 '11 at 11:56
@FelipeAlsacreations Ahh universal selector. This was the word i was looking for! Updating my answer, thanks! — Pierre, Dec 11 '11 at 12:00

score 6 · Accepted Answer · answered Dec 11 '11 at 11:10

6

The reason you don't see it is because, while the paragraph does take on the styles you want, the * selector matches <A href="some_url"> and promptly changes them back.

You could modify the selector to match the a element too, but I'd set the font styling on the body instead of *

answered Dec 11 '11 at 11:10

Quentin

914,110
126
1,211
1,335

1

@Oliver (and to whomever else may not realize this), the reason Quentin's answer states to "set the font styling on the `body` instead of `*`" is because font style is naturally inherited by child elements, so there is no reason to explicitly set the font on all elements. – ScottS Dec 11 '11 at 12:16
Ok, but in my case, if I dont put the font on the * element but on th ebody only, I have some font displayed that do not follow the rule. Still for a reason I don't understand as my site is well coded... That happens on some font for text in divs (not font styled), in Tables, ... – Oliver Dec 11 '11 at 12:33
1

Some browsers don't inherit font styles into tables when in quirks mode. Use a Doctype that triggers standards mode. Quirks mode is too inconsistent for serious use. – Quentin Dec 11 '11 at 12:35
As an example, without talking about news.css, if I remove the * css, put its content into the body, all my P paragraphs does not inherit the body font-style. If I also put the font-style in th ep css, they get it. It seems that there is not inheriting here... Using Firefox – Oliver Dec 11 '11 at 12:37

CSS - Cannot override P.class because of * definition

1 Answers1

Linked