body styles not cascading to button

Question

check out the following HTML , its for demo purpose :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Untitled</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="author" href="humans.txt">

        <style>
            body {
                padding: 0;
                margin: 0;
                font-family: verdana;
                font-size: 2em;
                color: #444;
            }
            .primary-btn {
                color: #eee;
                outline:none;
                border:none;
                padding:10px 20px;
                text-transform: uppercase;
                cursor: pointer;
                text-shadow: 1px 1px 1px rgba(0,0,0,.3);
                display: block;
                background: tomato;
                margin: 0 auto;
                font-weight: bold;
            }

            .modal {
                height: 200px;
                max-width: 400px;
                border-radius: 5px;
                line-height: 200px;
                text-align: center;
                margin: 30px auto;
                -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.1);
                box-shadow: 1px 1px 4px rgba(0,0,0,.1);
                -webkit-transition:  .5s;
                -o-transition:  .5s;
                transition:  .5s;
                position: relative;
                border: 1px solid rgba(0,0,0,.2);
                text-transform: uppercase;
            }

            .fade {
                transform: translate(0 , -50px);
                opacity: 0;
            }

            .in {
                transform: translate(0 , 0px);
                opacity: 1;
            }
        </style>
    </head>
    <body>


        <div class="modal fade" id="modal">
                Hey i am a modal        
        </div>

        <button data-toggle="#modal" class="primary-btn">Show Modal</button>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="js/smallest-modal.js"></script>
    </body>
</html>

the following styles from the <body> tag were not cascading to the button element , so i had to apply them explicitly to <button> :

font-family: verdana;
font-size: 2em;
color: #444;

whats the problem ??

Have a look at this : http://stackoverflow.com/a/6080482/3168107. — Shikkediel, Apr 22 '15 at 09:02
I taught everything inherits from body :( any doc's on what does and what does't ? — Alexander Solonik, Apr 22 '15 at 09:07
I think it's not so much the inheritance as it is the button itself that makes the exception. Must be in the spec somewhere but that's usually a '*this is how it is*' instead of a larger logic. — Shikkediel, Apr 22 '15 at 09:31

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

The body element is not in connection with your button. Or you need to do it like this: Why doesn't inherit the font from body?

If you use 'body' you are speaking to the body element and not what is inside. If you use classes you can give multiple elements the same CSS and if you are using an id you can speak to just that one element.

edited May 23 '17 at 11:58

Community

1
1

answered Apr 22 '15 at 09:13

CrazzyMarc

33
8

body styles not cascading to button

1 Answers1