Why are my page elements not respecting my local Site.css file?

Question

I have an old fiddle here that sets various properties for h1 elements, and has a smallcaps class:

h1 {
    font-family: "Lucida Sans", "Courier";
    text-shadow: -4px 4px 3px #999999;
    font-size: 3.5em;
}

.smallcaps {
    font-variant: small-caps;
}

There it works fine. I'm trying to do the same in an aspx page like so:

<head runat="server">
    <title>Flix 4 Fams</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
    <link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="dumboJr" style="text-align: center !important;">
            <h1>Flix 4 Fams (Flicks for Families)</h1>
            <h5>Select the Criteria you want to search by and then tap or click the "Find"      button</h5>
    </div>
    . . .

...with this at the end of the Site.css file:

#dumboJr h1 {
    border: 3px solid blue;
    text-align: center !important;
    font-family: "Lucida Sans", "Courier" !important;
    text-shadow: -4px 4px 3px #999999 !important;
    font-variant: small-caps !important;
    font-size: 3.5em;
}

.smallcaps {
    font-variant: small-caps !important;
}

...but it has no effect. So even with the "!important" directive, it is unacknowledged.

It's not that Site.css is "invisible"; at least one thing in Site.css is being applied, namely this:

input[type=number] {
    width: 60px;
    margin-left: 4px;
    margin-right: 4px;
}

...so it's not that Site.css is being totally ignored...

I tried more straightforward methods of getting the CSS to be applied before this, such as this (and at first without the "!important" directive):

h1 {
    border: 3px solid blue;
    text-align: center !important;
    font-family: "Lucida Sans", "Courier" !important;
    text-shadow: -4px 4px 3px #999999 !important;
    font-variant: small-caps !important;
    font-variant: small-caps !important;
    font-size: 3.5em;
}

...but that does nothing either.

I was at least able to get the text to center by adding this inline:

style="text-align: center !important;"

...but that's kind of messy and kludgy. I would rather find out why the CSS is not working and what it would take to get it to work.

In fact, even when I try to "brute force it" like so by inlining all of the style properties:

<h1 Style="border: 3px solid blue;
    text-align: center !important;
    font-family: "Lucida Sans", "Courier" !important;
    text-shadow: -4px 4px 3px #999999 !important;
    font-variant: small-caps !important;
    font-size: 3.5em;">Flix 4 Fams (Flicks for Families)
</h1>

...the only change it makes is putting a blue border around the h1 element - none of the other styles are applied.

What is sabotaging my CSS from being applied?

UPDATE

First, I was wrong about part of the Site.css having an effect. It was something else that was causing what I thought was the influence of the Site.CSS file.

So then, I followed the suggestion of looking at "ViewSource"

To recap, I include Site.css in my page:

<head runat="server">
    <title>Flix 4 Fams</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
    <link href="Site.css" rel="stylesheet" type="text/css" />
</head>

...and it does appear in the "View Source":

<head><title>
    Flix 4 Fams
</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
    <link href="Site.css" rel="stylesheet" type="text/css" />
</head>

But the directive I've added in Site.css have no effect. Even the inline styles I added to the h1 element in a brute-force approach, as shown below, have no effect:

<body>
    . . .
    <div id="dumboJr" style="text-align: center !important;">
        <h1 Style="border: 3px solid blue;
            text-align: center !important;
            font-family: "Lucida Sans", "Courier" !important;
            text-shadow: -4px 4px 3px #999999 !important;
            font-variant: small-caps !important;
            font-size: 3.5em;">Flix 4 Fams (Flicks for Families)
        </h1>
    . . .

UPDATE 2

This doesn't answer my question, but it solves my problem:

I got it to work by adding an id and a runat:server to the h1:

<h1 runat="server" id="fakeJumbotron">

...and then adding this in the code-behind, based on a comment by Robert C. Barth here:

protected void Page_Load(object sender, EventArgs e)
{
    fakeJumbotron.Attributes.Add("style", "font-family: \"Lucida Sans\", \"Courier\";");
    fakeJumbotron.Attributes.Add("style", "text-shadow: -4px 4px 3px #999999");
    . . .

you are saying site.css is getting called right? still go to view page source and check if it is getting called again . — sanket, Oct 06 '20 at 03:13
@B.ClayShannon not sure what could be wrong. Would you be able to share MVP? It is working for me: https://github.com/dipen08it419/AspNetCssTest — Dipen Shah, Oct 11 '20 at 16:38

score 1 · Answer 1 · answered Oct 06 '20 at 04:29

1

try being more specific such as div #dumboJr h1 instead of #dumboJr h1, if that doesn't work try removing the bootstrap link and see if the stylesheet applies all your css properties

answered Oct 06 '20 at 04:29

Legionnaire

60
1
8

I'll try the first suggestion, but if I remove bootstrap my page will go from looking like something the cat drug in to being 9 times uglier than a bag of butts. – B. Clay Shannon-B. Crow Raven Oct 06 '20 at 05:05
Prepending the "div" in the CSS made no difference – B. Clay Shannon-B. Crow Raven Oct 06 '20 at 16:12

Why are my page elements not respecting my local Site.css file?

UPDATE

UPDATE 2

1 Answers1