javascript - master page does not load css file -

so referenced css file in master page this:

<link rel="stylesheet" type="text/css" href="~/default.css" runat="server" /> 

and shows in visual studio in design view, reason not show in web browser. why that? btw css file , masterpage , image folder in root directory. css file:

*  {  padding: 0em;  margin: 0em;  }    body  {  background:url('images/bg1.jpg');  padding: 30px 0px 35px 0px;  }    body,input  {  font-size: 10pt;  font-family: "georgia", "times new roman", serif;  color: #333333;  }    p  {  line-height: 1.5em;  margin-bottom: 1.0em;  text-align: justify;  }     {  color: #b96d00;  text-decoration: underline;  }    a:hover  {  text-decoration: none;  }      h3 span  {  font-weight: normal;  }    h3,h4  {  display: inline;  font-weight: bold;  background-repeat: no-repeat;  background-position: right;  }    h3  {  font-size: 1.7em;  padding-right: 34px;  background-image: url('images/db1.gif');  }    h4  {  font-size: 1.2em;  padding-right: 28px;  background-image: url('images/db2.gif');  }    .contentarea  {  padding-top: 1.3em;  }    img  {  border: solid 1px #6f5230;  }    img.left  {  position: relative;  float: left;  margin: 0em 1.8em 1.4em 0em;  }    img.right  {  position: relative;  float: right;  margin: 0em 0em 1.8em 1.8em;  }    .divider1  {  position: relative;  background: #fff url('images/border2.gif') repeat-x;  height: 14px;  margin: 2.0em 0em 1.5em 0em;  clear: both;  }    .divider2  {  position: relative;  height: 1px;  border-bottom: solid 1px #eaeaea;  margin: 2.0em 0em 2.0em 0em;  }    .post .details  {  position: relative;  top: -1.5em;  font-size: 0.8em;  color: #787878;  }    .post ul.controls  {  clear: both;  }    .post ul.controls li  {  display: inline;  font-size: 0.8em;  }    .post ul.controls li  {  background-repeat: no-repeat;  background-position: left;  padding: 0em 1.0em 0em 20px;  }    .post ul.controls li a.printerfriendly  {  background-image: url('images/icon-printerfriendly.gif');  }    .post ul.controls li a.comments  {  background-image: url('images/icon-comments.gif');  }    .post ul.controls li a.more  {  background-image: url('images/icon-more.gif');  }    .box  {  position: relative;  background: #fdfcf6 url('images/boxbg.gif') repeat-x;  left: -1.5em;  top: -1.5em;  padding: 1.5em;  border-bottom: solid 1px #e1d2bd;  margin-bottom: 1.0em;  }    ul.linklist  {  list-style: none;  }    ul.linklist li  {  line-height: 2.0em;  }    #upbg  {  position: absolute;  top: 0px;  left: 0px;  width: 100%;  height: 275px;  background: #fff url('images/bg2.jpg') repeat-x;  z-index: 1;  }    #outer  {  z-index: 2;  position: relative;  width: 82%;  border: solid 7px #fff;  background-color: #fff;  margin: 0 auto;  }    #header  {  position: relative;  width: 100%;  height: 8.0em;  background: #2b2b2b url('images/topbg.gif') repeat-x;  margin-bottom: 2px;  }    #headercontent  {  position: absolute;  bottom: 0em;  padding: 0em 2.0em 1.3em 2.0em;  }    #headercontent h1  {  font-weight: normal;  color: #fff;  font-size: 2.5em;  }    #headercontent h1 sup  {  color: #777;  }    #headercontent h2  {  font-size: 1.0em;  font-weight: normal;  color: #aaa;  }    #search  {  position: absolute;  top: 5.5em;  right: 2.0em;  padding-right: 0.0em;  }    #search input.text  {  margin-right: 0.5em;  vertical-align: middle;  border-top: solid 1px #000000;  border-right: 0px;  border-bottom: solid 1px #777777;  border-left: 0px;  padding: 0.15em;  width: 10.0em;  }    #search input.submit  {  background: #939b00 url('images/buttonbg.gif') repeat-x;  border: solid 1px #5f6800;  font-weight: bold;  padding: 0.25em;  font-size: 0.8em;  color: #f2f3de;  vertical-align: middle;  }    #headerpic  {  position: relative;  height: 200px;  background: #fff url('images/hdrpic.jpg') no-repeat top left;  margin-bottom: 2px;  }    #menu  {  position: relative;  background: #7f8400 url('images/menubg.gif') repeat-x top left;  height: 3.5em;  padding: 0em 1.0em 0em 1.0em;  margin-bottom: 2px;  }    #menu ul  {  position: absolute;  top: 1.1em;  }    #menu ul li  {  position: relative;  display: inline;  }    #menu ul li  {  padding: 0.5em 1.0em 0.9em 1.0em;  color: #fff;  text-decoration: none;  }    #menu ul li a:hover  {  text-decoration: underline;  }    #menu ul li a.active  {  background: #7f8400 url('images/menuactive.gif') repeat-x top left;  }    #menubottom  {  background: #fff url('images/border1.gif') repeat-x;  height: 14px;  margin-bottom: 1.5em;  }    #content  {  padding: 0em 2.0em 0em 2.0em;  }    #primarycontainer  {  float: left;  margin-right: -18.0em;  width: 100%;  }    #primarycontent  {  margin: 1.5em 22.0em 0em 0em;  }    #secondarycontent  {  margin-top: 1.5em;  float: right;  width: 18.0em;  }    #footer  {  position: relative;  height: 2.0em;  clear: both;  padding-top: 5.0em;  background: #fff url('images/border2.gif') repeat-x 0em 2.5em;  font-size: 0.8em;  }    #footer .left  {  position: absolute;  left: 2.0em;  bottom: 1.2em;  }    #footer .right  {  position: absolute;  right: 2.0em;  bottom: 1.2em;  }

master page:

<%@ master language="c#" autoeventwireup="true" codebehind="site1.master.cs" inherits="project3.site1" %>    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />      <title>zahra moradi</title>      <meta name="keywords" content="" />      <meta name="description" content="" />      <link rel="stylesheet" type="text/css" href="~/default.css" runat="server"  />  </head>  <body>      <form id="form1" runat="server">      <div id="upbg">      </div>      <div id="outer">          <div id="header">              <div id="headercontent">                  <h1>                      e-library</h1>              </div>          </div>          <form method="post" action="">          <div id="search">              <input type="text" class="text" maxlength="64" name="keywords" />              <input type="submit" class="submit" value="search" />          </div>          </form>          <div id="headerpic">          </div>          <div id="menu">              <!-- hint: set class of menu link below "active" make appear active -->              <ul>                  <li><a href="home.aspx">home</a></li>                  <li><a href="library.aspx">library</a></li>                  <li><a href="about.aspx">about</a></li>                  <li><a href="contact.aspx">contact</a></li>              </ul>          </div>          <div id="menubottom">          </div>          <div id="content">              <asp:contentplaceholder id="contentplaceholder1" runat="server">              </asp:contentplaceholder>          </div>          <div id="footer">              <div class="left">                  &copy; 2015 zahra moradi. rights reserved.</div>              <div class="right">                  design <a href="http://www.nodethirtythree.com/">nodethirtythree design</a></div>          </div>      </div>      </form>  </body>  </html>

i've tried other solutions posted on similar questions didn't work me. adding runat="server" , on...

same suggestion @tyr. try loading css file web link instead of local file. example:

<link rel="stylesheet" type="text/css" href="https://example.com/website/css/default.css"/> 

that should work. if doesn't, use developer tools on browser (google chrome best). in chrome, right click anywhere on page , click 'inspect element'. there errors coming css file being displayed on bar on right? if there is, they?