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, Aug 03 '17 at 14:09
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, Aug 03 '17 at 14:11
I understand your problem. just add !important to your font. like this font-family : arial !important. — Prabhakaran, Aug 03 '17 at 14:12
what happens if you write `#freeDeliveries {font-family:Arial !important;}`? — Huelfe, Aug 03 '17 at 14:12
Can't replicate the issue with the code provided. Something else is being overlooked here. — UncaughtTypeError, Aug 03 '17 at 14:15
I only added !important to the color property of #freeDeliveries, and then all other properties now show. Why? That shouldn't be the case. Being required to use !important is a little disturbing — Bobh, Aug 03 '17 at 14:16
Style gets rendered as per the last style. So in order to prevent the style being change we need to prevent by using !important. So that corresponding style gets fixed and cannot be overriden unless we use different selector combination — Prabhakaran, Aug 03 '17 at 14:19

Prabhakaran · Accepted Answer · 2017-08-03T14:16:54.957

0

just add !important to the freeDeliveries font-family. Which was being overridden by the body font-family.

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 !important;
    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;
}

<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>

edited Aug 03 '17 at 14:16

answered Aug 03 '17 at 14:14

Prabhakaran

1,524
2
13
21

2

This reads more like a game of spot-the-difference than an answer. What did you change? Why should it solve the problem? – Quentin Aug 03 '17 at 14:15
edited and added the description of what changes made – Prabhakaran Aug 03 '17 at 14:17
Careful. `!important` is a slippery slope. This can be solved by simply writing more specific rules. – basement Aug 03 '17 at 14:22
just added the explanation in comment section of question. Kindly refer there @basement – Prabhakaran Aug 03 '17 at 14:23
That's what is perplexing me. I was trained that !important isn't necessarily that important at all and should not be relied upon. The basic rules of cascading should take care of this, but they haven't been so far. Something to do with styling the body element itself I think. But what? – Bobh Aug 03 '17 at 14:26
I've read. Good job on fixing the problem I'm only pointing out that later on down the road using `!important` is likely to cause more. Changing the specificity or order of the rules would be my first solution. `!Important` should be a last resort. – basement Aug 03 '17 at 14:26
Adding important to one property made all properties show. Now i removed it and made font serif, and it works, Even the color changed. Too weird. – Bobh Aug 03 '17 at 14:27
@Bobh fiddle and update the link. Will try to figure out the issue – Prabhakaran Aug 03 '17 at 14:29
@basement, I agree with you 100%. We need to use the !important carefully or otherwise it'll be nightmare – Prabhakaran Aug 03 '17 at 14:31

score 0 · Answer 2 · answered Aug 03 '17 at 14:16

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>

score 0 · Answer 3 · answered Aug 03 '17 at 14:28

0

Declare in CSS:
@font-face: {font-family: Dosis; src: url ('http://www.fonts.googleapis.com/css?family=Dosis:800');

How do I install a custom font on an HTML site

answered Aug 03 '17 at 14:28

Sir Robert Casey

64
6

style sheet properties not being applied unless inline

3 Answers3