html - Stylesheet not displaying within div id tab? -

this code on webpage, i'm trying make stylesheet says "hello!" display on tab1, isn't displaying. changes need made display stylesheet pastebin in tab1? able in past i'm unsure i'm doing wrong here.

my webpage limited characters, must use pastebin put of writing page, since have 2000-2200 characters left can use, enough coding, not putting walls of text on each tab i'll making, well.

<style>      body{     color:#000000;     font-size:13px;     font-family:ebrima;     background-image: url() !important;     background-color:#ffffff !important;     background-position:bottom-center !important;     background-repeat:repeat !important;}      h1{     margin:0px 0px 0px;     font-size: 10px;     color:#ff0000;     font-family:ebrima;     letter-spacing:0px;     font-weight:normal;     text-shadow: 0px 0px 2px #880000;}      b, strong { font-family: ebrima; font-size: 12px;line-height: 10px; font-weight: bold;     color: #ff5555;}      i, em {color:#ff0000; font-family: ebrima; font-size:12px;}      #navi{     display: inline;     padding:40px;     color:#444444;     text-transform: uppercase;     margin: 12px 10px;     font-size: 15px;     font-family:garamond;     background: #;     transition: .2s;     -o-transition: .2s;     -webkit-transition: .2s;     -moz-transition: .2s;}      #navi:hover{     color:#ff0000;     cursor:hand;     cursor:pointer;     opacity: .80;     font-size:14px;     font-family:garamond;     filter:alpha(opacity=80);     transition: .2s;     -o-transition: .2s;     -webkit-transition: .2s;     -moz-transition: .2s;}      #a{     left:0px;     width: 100%;     top:15px;     padding: 0px;     text-align: center;     position: fixed;     height: 0px;     background:url('http://i.imgur.com/tebrlur.png');}      #b{margin-top:150px;}      #c{     position:fixed;     bottom:0px;     left:20px;     width:99%;     height:70%;     background-color:#;     color:#ffffff;     padding:0px;     overflow:auto;     -moz-border-radius: 10px 10px 10px 10px;     -webkit-border-radius: 10px 10px 10px 10px;     border-radius: 10px 10px 10px 10px; }      ::-webkit-scrollbar {width: 6px; height: 4px; background: #; }     ::-webkit-scrollbar-thumb { background-color: #222222; border: 1px solid #000000;-webkit-border-radius: 1ex; }       #navi a{     text-decoration:none;     color:#666;}      #navi a:hover{     text-decoration:none;     color:#666;}      </style>        <div id="a">     <div id="b">     <span id="navi" onclick="document.getelementbyid('start').innerhtml=document.getelementbyid('a').innerhtml;">tab1</span>     </div>     </div>          <div id="c">     <div id="start">  <font color="#ff0000">this opening page!</font>      </div>      <div id="a" style="display:none;">  <font color="#ff0000">this tab1!</font>  <br>  <link rel="stylesheet" type="text/css" href="http://pastebin.com/raw.php?i=fajtrcxf">  <br>  <font color="#ff0000">the stylesheet not display inside of tab. why?</font>       </div> </style> 

the problem same in other question pastebin not generate valid css file, text file.

think of in way. website interprets styles file extension of .css
if file not .css else, won't work.

pastebin not export code .css if inside valid css code. reason service provide not hosting, way of sharing code snippets, why export create there text files.

what want not possible pastebin.

is there special reason having css hosted somewhere else? not idea, unless want use cdn service.

pd: don't use <font> tag, has been deprecated. use instead combination of <p>, <span>, <h#> , add classes them when need specific styles.