style sheet properties not being applied unless inline

Question

I can't seem to apply linked style sheet properties for a tag within body, as it seems like it won't let me overwrite body tag properties specified in the css file, so cascading doesn't seem to work in the situation. the id freeDeliveries maintains the same styling as body tag unless I add the style properties inline. Why? I even tried giving the body tag an id and referencing that for styling instead of body element itself and it still didn't work. Font face is still Dosis inside of freeDeliveries, and the color is still white.

EDIT: I took away the id="freeDeliveries" attribute from the p tag and wrapped the p in a div with that attribute, then on style sheets I added #freeDeliveries p referencing the actual p tag itself as a core tag, and a descendant selector, rather than referencing it's id and somehow that was finally able to overwrite the value on the core body tag. So it has to do with precedence between actual html tags and ids attached to tags, where it needed to reference the p tag itself because that gets preference over an id. That's why inline was working because that ALWAYS gets preference over everything. If someone can explain why, that would be the correct answer and I can mark it. Note I did not change the code below so that you can see what I had before, and piece it together with the description of my simple changes above

Here's my links

<link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet' type='text/css'/>
<link href='StyleSheets/stylesForms.css' rel='stylesheet' type='text/css'/>

I am importing a font from google and applying it to the body tag, and the path to my style sheet is correct, or I wouldn't see any styling at all, which I do.

style sheet

body {
    color:#FFF;
    font-family: 'Dosis', sans-serif;
    background-color:rgb(255,204,153);
    padding:0;
    margin:0;
    overflow-y: scroll;
    min-width:300px;
}

header {
    color:#FFF;
    margin:0;
    padding:5px;
    background-color: rgb(0,176,80);
    background-image: linear-gradient(to top, rgb(0,109,42) 10%, rgb(0,189,79));
    display:-webkit-flex;
    display:flex;
}

header h1{
    font-size:24px;
    text-shadow: 2px 1px 2px #22542d;
    padding:0;
    margin:0;
}

header div{
    margin-right:10px;
}

#freeDeliveries {
    color:black;
    font-family:Arial;
    font-size:16px;
    padding:10px;
}

#logo{
    width:32px;
    height:32px;
    border-radius:16px;
    border:2px solid rgb(255,106,0);
    background-color:rgb(255,204,153);
    background-image:url(../images/hippo28.png);
    background-repeat:no-repeat;
    background-position:center;
}

html

<body>
    <header>
        <div style="width:42px">
            <section id="logo"></section>
        </div>
        <div style="line-height:36px;width:90%">
            <h1>Registration</h1>
        </div>
    </header>
    <p id="freeDeliveries">Register to get 100 free deliveries.</p>
    <p>other content</p>
</body>

Your fonts styling works fine. Just check whether the style sheet gets download using network monitor tool of your browser. And also verify your path again — Prabhakaran
It's all there. If it wasn't, I would never see the Dosis font that I clearly see. But I can't overwrite that font set in body in freeDeliveries p unless I do it inline. But that shouldn't be the case. I don't want to do inline styling and should not have to — Bobh
I understand your problem. just add !important to your font. like this font-family : arial !important. — Prabhakaran
what happens if you write #freeDeliveries {font-family:Arial !important;}? — Huelfe

basement basement · Accepted Answer · 2017-08-03T14:16:52

Not sure if you had a mispelling but here I am changing #freedeliveries to a serif font in the CSS. View snippet. ( I commented where I changed font ). I used serif because it is easier to see the difference from Arial font. However this rule here will work with any font.

body {
    color:#FFF;
    font-family: 'Dosis', sans-serif;
    background-color:rgb(255,204,153);
    padding:0;
    margin:0;
    overflow-y: scroll;
    min-width:300px;
}

header {
    color:#FFF;
    margin:0;
    padding:5px;
    background-color: rgb(0,176,80);
    background-image: linear-gradient(to top, rgb(0,109,42) 10%, rgb(0,189,79));
    display:-webkit-flex;
    display:flex;
}

header h1{
    font-size:24px;
    text-shadow: 2px 1px 2px #22542d;
    padding:0;
    margin:0;
}

header div{
    margin-right:10px;
}

#freeDeliveries {
    color:black;
    font-family: serif; /* changed to serif font. it works */
    font-size:16px;
    padding:10px;
    color: red;
}

#logo{
    width:32px;
    height:32px;
    border-radius:16px;
    border:2px solid rgb(255,106,0);
    background-color:rgb(255,204,153);
    background-image:url(../images/hippo28.png);
    background-repeat:no-repeat;
    background-position:center;
}

<head>
  <link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet'>
  <link href='StyleSheets/stylesForms.css' rel='stylesheet'>
</head>
<body>
    <header>
        <div style="width:42px">
            <section id="logo"></section>
        </div>
        <div style="line-height:36px;width:90%">
            <h1>Registration</h1>
        </div>
    </header>
    <p id="freeDeliveries">Register to get 100 free deliveries.</p>
    <p>other content</p>
</body>

style sheet properties not being applied unless inline

3 Answers