Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html css * {...} : can't change the font-size

Tags:

html

css

class

Seems like I'm stucked. Why does the code below display a message of 12px, but not 50px? Isn't class1 have the highe How to fix it if I'm not allowed to change the * properties? Even !important does not help.

<html>
    <head>
        <style type="text/css">
            *
            {
                font-size : 12px
            }

            .class1
            {
                font-size : 50px;
            }
        </style>
    </head>
    <body>
        <div class="class1">
            <span>why it is not 50px font size?</span>
        </div>
    </body>
</html>
like image 953
Haradzieniec Avatar asked Nov 29 '25 06:11

Haradzieniec


2 Answers

That's because * also selects the <span> tag inside your <div>.

So * is more specific in this case and thus has priority.

.class1 span
{
    font-size : 50px;
}

The above would work.

like image 82
Rick Kuipers Avatar answered Nov 30 '25 21:11

Rick Kuipers


Or You can use !important

.class1 {font-size : 50px !important;}

A working example:

http://jsfiddle.net/gWQeZ/

like image 43
Razmig Avatar answered Nov 30 '25 23:11

Razmig



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!