Style sheet changes not reflecting on the page

Question

User-1334761962 posted

In the asp.net web pages tutorial part :

Introducing ASP.NET Web Pages 2 - Creating a Consistent Layout 

When I create a seperate css file as mentioned in the tutorial Movies.css ...

none of the style sheet changes are reflected in the browser , I tried using both internet explorer and chrome , only the page loads but none of the style features show up on the page .Please help me in getting the style sheet layout for the web site .Thanks.

Answer 1

User-821857111 posted

When you make changes to a style sheet, hit Ctrl + F5 to clear your cache. Otherwise the amended style sheet is not requested.

Answer 2

User281315223 posted

As Mike mentioned, this issue is likely just related to your browser actually caching the previous CSS file and serving it from the cache (instead of the updated one from the server). The previous suggestion of using CTRL+F5 will typically perform a "hard-refresh" and force your browser to pull all of the available files from the server (as opposed to the cache).

If that doesn't work, try manually clearing out the cache and any other temporary Internet Files through your browser's options menu. If you want to ensure that your browser never actually caches the CSS files (while you are debugging at least) you can consider adding a QueryString parameter to the URL so that you always grab a fresh file : 

<link href="<%= String.Format("{0}dt={1}",ResolveUrl("~/Style/YourStyleSheet.css"),DateTime.Now.Ticks) %>" rel="stylesheet" type="text/css" />

Just remember that caching can actually be quite helpful when you actually deploy your website and can save a great deal of bandwidth, so I would just recommend doing this during the debugging process.

Answer 3

User-1106109124 posted

Did you reference the new Movies.css file in the HTML?

Answer 4

User-1334761962 posted

I tried doing ctrl+f5 and manually clearing the cache but it didnt help either .. the resultant page is not even getting any grid look of the web grid helper that it was getting earlier before seperating the styles in the css file ... 

wanted to ask , in which file to include this line of code : 

<link href="<%= String.Format("{0}dt={1}",ResolveUrl("~/Style/YourStyleSheet.css"),DateTime.Now.Ticks) %>" rel="stylesheet" type="text/css" />

 

Answer 5

User-1334761962 posted

html{ height:100%; margin:0; padding:0; }

body {
  height:60%;
  font-family:'Trebuchet MS',  'Arial', 'Helvetica', 'sans-serif';
  font-size:10pt;
  background-color: LightGray;
  line-height:1.6em;
}

h1{ font-size:1.6em; }
h2{ font-size:1.4em; }

#container{
   min-height:100%;
   ;
   left:10%;
}

#header{
  padding:8px;
  width:80%;
  background-color:#4b6c9e;
  color:White;
}

#main{
  width:80%;
  padding: 8px;
  padding-bottom:4em;
  background-color:White;
}

#footer{
  width:80%;
  height:2em;
  padding:8px;
  margin-top:-2em;
  background-color:LightGray;
}

.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }

.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E8E8E8; color: #000; }
.selected {background-color:Yellow;}
span.caption {width:100px;}
span.dataDisplay {font-weight:bold;}




.field-validation-error
            {
                font-weight: bold;
                color: red;
                background-color: yellow;                
            }
.validation-summary-errors {
    border: 2px dashed red;
    color: red;
    background-color: yellow;
    font-weight: bold;
    margin: 12px;
}

Above is the code for the Movies.css file....

i didnt understand how to reference it in the html ...

i am sorry if my questions sounds very silly , i am a complete novice to this .

thanks 

Answer 6

User-821857111 posted

wanted to ask , in which file to include this line of code : 

N one of them. Use this instead:

<link href="/style/yourstylesheet.css" rel="stylesheet" type="text/css" />

That assumes that your style hseet file is called yourstylesheet.css and is placed in a folder called styles in the root of your site. If oyu are following the movies tutorial, it should be called movies.css. You put it in the head section of layout page as described in the tutorial you are following: 

  <head>
    <title>My Movie Site</title>
    <link href="~/Styles/Movies.css" rel="stylesheet" type="text/css" />
  </head>

Answer 7

User-1205895928 posted

Hi priya

if you face difficulty to mention the path to the css file, You can simply open the page in Design view and drag the css file from solution explorer on to anywhere on the page.

for details check the below link:

http://msdn.microsoft.com/en-us/library/tbze79kd(v=vs.80).aspx

Let us know if you still face the problem. I can get you some reference links to get to know about CSS and linking external CSS to the page.

Answer 8

User-821857111 posted

You can simply open the page in Design view

There is no Design View in ASP.NET Web Pages.

Answer 9

User-1205895928 posted

Oops!! Sorry I missed.. thanks for letting me know. :)

Answer 10

User281315223 posted

You would add the following code :

<link href="<%= String.Format("{0}dt={1}",ResolveUrl("~/Styles/Movies.css"),DateTime.Now.Ticks) %>" rel="stylesheet" type="text/css" />

where you are currently referencing your stylesheet itself (perhaps at the top of one of your files) which might look like :

<link href="~/Styles/Movies.css"" rel="stylesheet" type="text/css" />

If you are not using an external file then your changes should be visible with each refresh of your page.

Answer 11

User-735851359 posted

Hello,

Connecting a CSS file and HTML, you can use the follwing code int he HTML file in the head section:

 <link href="~/Styles/Movies.css" rel="stylesheet" type="text/css" />

In the html you can use a class style (starting with a point .) as follows:

<div class="field-validation-error">
...
</div>

You can use an ID class (starting with # sign) as follows;

<div id="container">
...
</div>

The difference between ID and Class style: 
The ID sytle can be used only one time on a page. But Class style can be used many times on a page.

If it helped, mark as answer!