Why doesn't the text change color when I edit the css page?

Question

I created a new web application in visual web developer. I saw that the title of "Site.Master" (in code) is:

<div class="title">
    <h1>
        My ASP.NET Application
    </h1>
</div>

So I opened "Site.css" and added:

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
    color:Blue;
}

Showing "Default.aspx", though, doesn't show the text ("My ASP.NET Application ") in blue. Why?

EDIT: From the source code:

<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>

So I added color: Blue; in the css under body, page, header, title, and h1. I rebuilt, and pressed Ctrl + F5. Doesn't help. I'm trying this in IE and Firefox.

Did you refresh the page? I suggest using a tool like Firebug to see the styles applied to the h1. — Tuan, Apr 03 '12 at 16:30
Is this really the code you have? color: Blue surrounded by double asterisks? You don't need them here. Do you wanted to lay emphasis (bold)? — yunzen, Apr 03 '12 at 16:34
What browser are you using? each one have developer tools that make work a lot easier. In those tools you can select an element, like the title, and it show you what styles are being applied and were they come from. — daniloquio, Apr 03 '12 at 16:35
Press F12 when in IE and you'll see the developer tools. Then, click on the pointer button then, click on the page title. — daniloquio, Apr 03 '12 at 18:17

Kyle Trauberman · Answer 1 · 2012-04-03T16:37:22.613

6

The stylesheet is probably cached on the browser. Clear your browser cache, and you should see the change.

~~Also, You probably did this for emphasis, but you don't need to surround the css in asterisks.~~

You can prevent this from occurring in the future by appending a query string to the css link:

<link rel="stylesheet" type="text/css" href='site.css?v=<%= DateTime.Now.Ticks %>' />

Something like this will cause the browser to download the css file every time the page is requested.

edited Apr 03 '12 at 16:37

answered Apr 03 '12 at 16:31

Kyle Trauberman

25,414
13
85
121

@ispiro Then I would ensure that the stylesheet is getting loaded at all. What browser are you using? In chrome, you can press F12 to open the developer tools and inspect the styles (elements tab). You can do similar in IE 8+ as well. – Kyle Trauberman Apr 03 '12 at 16:46
@KyleTrauberman Thanks. I'm using IE9. F12 doesn't do anything. – ispiro Apr 03 '12 at 17:02
@ispiro Then look for something called "Developer Tools" on the Tools menu. – Kyle Trauberman Apr 03 '12 at 17:08

Pankaj · Accepted Answer · 2012-04-03T16:53:30.187

5

Update your css like below.

.title h1
{ 
    font-size: 1.6em !important; 
    padding-bottom: 0px !important; 
    margin-bottom: 0px !important; 
    color:Blue !important; 
}

edited Apr 03 '12 at 16:53

answered Apr 03 '12 at 16:36

Pankaj

9,749
32
139
283

1

Thanks. But didn't help. Not even after Rebuild + Ctrl+F5. – ispiro Apr 03 '12 at 16:44
This is overriding style sheet. – Pankaj Apr 03 '12 at 17:02
But the css file _is_ the style sheet! – ispiro Apr 03 '12 at 17:05
Evidence is, remove the `!important` from the style and check the output. – Pankaj Apr 03 '12 at 17:17
Thanks. You are correct. It returns to the old color. (After a Ctrl+F5.) – ispiro Apr 03 '12 at 17:23
So you either have a style tag in your page that overrides your css file, or you have another css file loaded after this one that also overrides it. – Tuan Apr 03 '12 at 17:35
@Tuan Thanks for the input .I discovered it's `.header h1` in the css overriding `h1`. (I think.) – ispiro Apr 03 '12 at 18:00
2

Using !Important is not recommended http://james.padolsey.com/usability/dont-use-important/ The right way is to handle css's specificity. – daniloquio Apr 03 '12 at 18:13
This article does not have strong basis for the same. Even the reply by the users are saying **One Step forward and two step back** – Pankaj Apr 03 '12 at 18:18
@PankajGarg using !important is a band-aid. Write your CSS correctly in the first place. I really don't think this is a good answer for best practice. – Kyle Macey Apr 04 '12 at 03:54
Please suggest to improve my code. Fianlly I will definitely ask to unaccept this answer if found a good approach. – Pankaj Apr 04 '12 at 05:55

score 3 · Answer 3 · answered Apr 03 '12 at 16:36

3

from: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Specificity is calculated by counting various components of your css and expressing them in a form (a,b,c,d). This will be clearer with an example, but first the components.
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

So, the class of div is over-riding the element setting of h1.

answered Apr 03 '12 at 16:36

Looks promising. I'm looking into it now. – ispiro Apr 03 '12 at 16:46
See updated question. Also: Pankaj Garg's answer (http://stackoverflow.com/a/9997622/939213) worked. Though I don't know why. – ispiro Apr 03 '12 at 17:07

score 2 · Answer 4 · answered Apr 03 '12 at 16:30

2

Try

color: blue;

instead of

**color:Blue;**

answered Apr 03 '12 at 16:30

Victor Bjelkholm

2,177
9
28
50

:) That just showed up that way. I was trying to **Bold** it. – ispiro Apr 03 '12 at 16:33
I think he was just emphatizing that line. He had to be! :D – Anderson Pimentel Apr 03 '12 at 16:34
Oh, my bad. I hoped it was that way but you can't be sure! – Victor Bjelkholm Apr 03 '12 at 16:37

Josh Darnell · Answer 5 · 2012-04-03T16:38:51.623

2

Two things:

It's possible you just need to do a "hard refresh" of the page. Try pressing Ctrl + F5 and see if that helps.
You may need a more specific selector to control that element if another CSS rule is affecting it. Try changing "h1" to ".title h1"

edited Apr 03 '12 at 16:38

answered Apr 03 '12 at 16:33

Josh Darnell

11,304
9
38
66

Thanks. But didn't help. Not even after Rebuild + Ctrl+F5. – ispiro Apr 03 '12 at 16:46
@ispiro Ah, gotcha. Then there must be more to the structure of the page, or more CSS rules affecting this. I'd take [tuan's suggestion](http://stackoverflow.com/questions/9997496/why-doesnt-the-text-change-color-when-i-edit-the-css-page/9997569#comment12778180_9997496) and look in FireBug (or Developer Tools) to see what CSS rules are affecting the h1 text. – Josh Darnell Apr 03 '12 at 16:49

score 0 · Answer 6 · answered Apr 11 '12 at 16:42

0

i dont know why it happens but u need to clean firefox cache and cookie then it works.

answered Apr 11 '12 at 16:42

gunce

1

score 0 · Answer 7 · answered Aug 14 '18 at 09:16

0

This cases are common and almost no solution to this issue (sadly, little can be done) if and only if your web page content was sourced from a template online. To confirm this, create two web forms with different templates and both web forms share the same 'sitemaster' page. it kind of inherits content design.

answered Aug 14 '18 at 09:16

philip_nj

18
1
4

There was no need to reopen this question some 6 and a half years after it was asked and already answered. More than that, your input is more fitting in comments to the question than it is fitting the answer form. Try putting more helpful answers on some of still opened questions to get more rep points which will grant you site privilege to post comments. – Goran Kutlaca Aug 14 '18 at 09:45

Why doesn't the text change color when I edit the css page?

7 Answers7