Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    my CSS is not appearing in webbrowsers!

    hello codingforums users.

    lately i wanted to learn how to design my own webiste so followng simple tuts online on youtube and such i started working on my test project on a trial version of dreamweaver cs6. the codes are fairly simple here's the problem i finished entering the content of my website and i wanted to start working on my css so i entered a test code but it didnt appear on my webbrowser (both chrome and firefox, i even tried IE.)

    the CSS code is :

    Code:
    h1 { color:f#F00   }
    and the html code which is a bit longer:

    Code:
    <!doctype html>
    
    <html>
    
    <head>
     <title>rock madness</title>
     
      <link href="css/styles.css" rel="stylesheets" type="text/css" media="screen"> 
    </head>
    
    
            <body>
     <div id="top">
    
      <div id="logo">
        <img src="images/logo.JPG">
          </div>
       
        <div id="social media">
         <p>if you liked the page<br>don't forget to share, and tweet it!<br>and visit our        youtube channel!</p>
          <ul>
             <li><a href="http://www.facebook.com"><img src="images/facebook 32x32 icon.png"></a         ></li>
             <li><a href="http://www.twitter.com"><img src="images/twitter 32x32 icon.png"></a>         </li>
             <li><a href="http://www.youtube.com"><img src="images/youtube_icon_32x32.png"></a>         </li>
          </ul>
        </div>
        
          <div id="topnav">
          <ul>
             <li><a href="main.html">homepage</a></li>
             <li><a href="#">about us</a></li>
             <li><a href="#">contact us</a></li>
             <li><a href="#">newest albums</a></li>
    
    
    
          </ul>
          </div>
       
          <div id="banner">
          <img src="images/guitar1-900x300.jpg">
          </div>
       
    </div>
       
    <div id="contant-wrapper>
        
         <div id="contant>
         
         <h1>Newest articles and news</h1>
         
         <p>news article inserted here</p>
         
         <div id="poll-box">
         <form method="post" action="http://poll.pollcode.com/sla3u"><table border=0 width="164" bgcolor="969696" background="http://cdn.boardhost.com/bg/circles.gif" cellspacing="2" cellpadding="0"><tr><td colspan="2" height="10"><font face="Lucida Console" size="3" color="DDDDDD"><b>favourite guitarist?</b></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="1" id="sla3uanswer1"></td><td>&nbsp;<font face="Lucida Console" size="3" color="DDDDDD"><label for="sla3uanswer1">michael batio</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="2" id="sla3uanswer2"></td><td>&nbsp;<font face="Lucida Console" size="3" color="DDDDDD"><label for="sla3uanswer2">randy rhoads</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="3" id="sla3uanswer3"></td><td>&nbsp;<font face="Lucida Console" size="3" color="DDDDDD"><label for="sla3uanswer3">angus young</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="4" id="sla3uanswer4"></td><td>&nbsp;<font face="Lucida Console" size="3" color="DDDDDD"><label for="sla3uanswer4">dave mustain</label></font></td></tr><tr><td colspan="2" height="10"><center><input type="submit" value=" Vote ">&nbsp;&nbsp;<input type="submit" name="view" value=" View "></center></td></tr><tr><td colspan="2" align="right"><font face="Lucida Console" height="5" size="1" color="DDDDDD"> <a href="http://pollcode.com/"><font face="Lucida Console" size="1" color="DDDDDD"></font></a>&nbsp;</font></td></tr></table></form>
    </div>
         
         
         <div id"video box">
         </div>
         
         
    </div>
        
         <div id="rightside">
        <div id="googlesearch">
        <form method="get"action="http://www.google.com/search">
    <input style="width:140px"type="text"name="q"size="31"maxlength="255"value=""/><br/>
    <input type="submit"value="Google Search"/>
         </div>
      
      <div id="facebookfeed">
        <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fwwe&amp;width=490&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;height=435" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:260px; height:240px; background: white; float:left; " allowTransparency="true"></iframe  
        ></div> 
        
       
       <div id="twitterfeed">
        <a class="twitter-timeline" href="https://twitter.com/test" data-widget-id="372794937474940929">Tweets by @johnicezero</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    
        </div>
      
      
    </div>
    
        <div id="footer">
       <p>©copyright 2013 test co</p>
        </div>
    </body>
    
    </html>
    there's my html code please tell me what's wrong and how can i fix it!
    i did take codes fromt he internet to insert the facebook feed and the twitter
    feed and the poll box and the google search thing. the h1 color did NOT change and i tried change the <p> but still the folder of my website contains a folder in it called CSS and that folder contains styles.css


    thank you
    Last edited by VIPStephan; 09-01-2013 at 01:37 AM. Reason: corrected code BB tags

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    h1 { color:f#F00 }
    That should be something like
    Code:
    h1 { color:#fff000; }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    That should be something like
    Code:
    h1 { color:#fff000; }


    it didn't work man i don't know why i opened the styles.css page and copied the code then i saved both the styles.css and the html and i opened it in google chrome but still nothing :l

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    <link href="css/styles.css" rel="stylesheets" type="text/css" media="screen">
    Are you sure that the path/name of the CSS file in the <link> tag is correct?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Are you sure that the path/name of the CSS file in the <link> tag is correct?
    yeah im pretty sure


    Code:
    <link href="css/styles.css" rel="stylesheets" type="text/css" media="screen">

    i deleted the "css/styles.css" and i wrote another " then i entered browse
    and i went to the folder that contains the styles.css same thing :l

  • #6
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Not sure what that means, but you should provide us with a URL to the site.
    My signature :)

  • #7
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ttkim View Post
    Not sure what that means, but you should provide us with a URL to the site.
    1)problem is it's not a site i mean i'm still just coding it in Dreamweaver i don't know how to make it a real site o.o

    2)i only meant that its the correct path that mean I'm certain that i linked my html to the correct .css file

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    To verify that the css file is loaded, open the dev tools (F12). In Chrome, open Network tab, then at the bottom choose Stylesheets. In the list you will see if styles.css is loaded successfully. Status should be 200 OK not 404 Not Found.

  • #9
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    To verify that the css file is loaded, open the dev tools (F12). In Chrome, open Network tab, then at the bottom choose Stylesheets. In the list you will see if styles.css is loaded successfully. Status should be 200 OK not 404 Not Found.
    thank you for replying to me
    i have done exactly what you told me and it showed me the number 200 but can you please explain to me why isn't the color of the <h1> changing in the website even though in the styles.css page i have entered the code
    Code:
    h1 { color:#fff000; }
    thank you

  • #10
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,139
    Thanks
    7
    Thanked 257 Times in 256 Posts
    You are missing two quotes I've shown in red here:
    Code:
    <div id="contant-wrapper">
    
    <div id="contant">
    
    <h1>Newest articles and news</h1>
    There may be other issues in the code as well, one or more of which may be responsible for your issue.

  • #11
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    You are missing two quotes I've shown in red here:
    Code:
    <div id="contant-wrapper">
    
    <div id="contant">
    
    <h1>Newest articles and news</h1>
    There may be other issues in the code as well, one or more of which may be responsible for your issue.
    thank you for your answer,
    I corrected the quotes and removed codes that i got from the outside, and i simplified the codes but still nothing i'll you the code now please tell me what's wrong and how can i fix it this is the code now:
    Code:
    <!doctype html>
    
    <html>
    
    <head>
    
         <link href="css/styles.css" rel="stylesheets" type="text/css" media="screen">
    
         <title>rock madness</title>  
    </head>
    
    
    
    <body>
            
     <div id="top">
    
      <div id="logo">
        <img src="images/logo.JPG">
          </div>
       
      <div id="social media">
        
         <p>if you liked the page<br>don't forget to share, and tweet it!<br>and visit our        youtube channel!</p>
       <ul>
       <li><a href="http://www.facebook.com"><img src="images/facebook 32x32 icon.png"></a></li>
       <li><a href="http://www.twitter.com"><img src="images/twitter 32x32 icon.png"></a></li>
       <li><a href="http://www.youtube.com"><img src="images/youtube_icon_32x32.png"></a></li>
       </ul>
          
      </div>
        
     <div id="topnav">
          <ul>
             <li><a href="main.html">homepage</a></li>
             <li><a href="#">about us</a></li>
             <li><a href="#">contact us</a></li>
             <li><a href="#">newest albums</a></li>
    
          </ul>
          
          
      </div>
       
      <div id="banner">
          <img src="images/guitar1-900x300.jpg">
      </div>
       
    </div>
       
    <div id="contant-wrapper">
        
         <div id="contant">
         
         <h1>Newest articles and news</h1>
         
         <p>news article inserted here</p>
         
         <div id="poll-box">
         
    </div>
          
      <div id"video box">
         
      </div>
         
         
    </div>
        
    <div id="rightside">
         
         <div id="googlesearch">
        
         </div>
      
        <div id="facebookfeed">
        
        </div> 
        
       
         <div id="twitterfeed">
      
         </div>
      
      
    </div>
    
    <div id="footer">
        
       <p>&#169;copyright 2013 walid co</p>
       
    </div>
        
    </body>
    
    
    </html>

    sorry if i'm annoying you guys but it's really irritating that i can't change the css thank you again.

  • #12
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,139
    Thanks
    7
    Thanked 257 Times in 256 Posts
    Ah.
    Code:
      <link href="css/styles.css" rel="stylesheets" type="text/css" media="screen">
    should be:
    Code:
      <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
    i.e. it's rel="stylesheet" (singular) not rel="stylesheets" (plural)

  • #13
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Check the name of CSS file

    At first check the name of the CSS file and the name you've put in HTML file.

    <link href="css/styles.css" rel="stylesheets" type="text/css" media="screen">

    After that check the folder css position and your HTML file position. I mean their folder's position.

    You can try this instead of the upper HTML

    <link href="./css/styles.css" rel="stylesheets" type="text/css" media="screen">

    And you change the color code to following :

    h1 { color:#f00; }
    Last edited by VIPStephan; 09-01-2013 at 11:22 PM. Reason: removed ad link


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •