HTML not loading external CSS problem

Discussion in 'Web Design and Development' started by Compile 'em all, Feb 28, 2012.

  1. Compile 'em all macrumors 601

    Compile 'em all

    Joined:
    Apr 6, 2005
    #1
    I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory.Any idea what might be the problem?

    index.html
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Home Page</title>
          
         <link rel="stylesheet" href="style.css" media="screen" />
         		<meta name="viewport" content="width=1100">    
        </head>
        <body>
            <div id="main">
                Hello
            </div>
        </body>
    </html>
    
    and style.css which is in the same directory

    Code:
    body{
        background-color: #F9F9F9;
    	background-image: url(images/bg3.png);
    	background-position: center top;
    	background-repeat: repeat;
        text-shadow: #FFFFFF 0px 1px 0px;
    	font-family: "Georgia", "Times", serif;
    	-webkit-font-smoothing: antialiased;
    }
    
    a{
        text-decoration: none;
    }
    
    #main{
        margin: 50px auto 50px auto;
        width: 1000px;
        min-height: 500px;
        padding: 0px 20px 0px 20px;
    }
    
    however, this works

    Code:
     <!DOCTYPE html>
    <html>
        <head>
            <title>Homepage</title>
          
    
      
      
      <style type="text/css" media="screen">
      
      
      body{
        background-color: #F9F9F9;
    	background-image: url(images/bg3.png);
    	background-position: center top;
    	background-repeat: repeat;
        text-shadow: #FFFFFF 0px 1px 0px;
    	font-family: "Georgia", "Times", serif;
    	-webkit-font-smoothing: antialiased;
    }
    
    a{
        text-decoration: none;
    }
    
    #main{
        margin: 50px auto 50px auto;
        width: 1000px;
        min-height: 500px;
        padding: 0px 20px 0px 20px;
    }
    
    </style>
         		<meta name="viewport" content="width=1100">    
        </head>
        <body>
            <div id="main">
           Hello
            </div>
        </body>
    </html>
     
  2. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #2
    Is it actually called style.css, not Style.css or similar?
     
  3. Compile 'em all thread starter macrumors 601

    Compile 'em all

    Joined:
    Apr 6, 2005
    #3
    Nope. style.css. I even changed the name just to to make sure, and nothing. Same problem.
     
  4. MasConejos macrumors regular

    MasConejos

    Joined:
    Jun 25, 2007
    Location:
    Houston, TX
    #4
    Check that the file permissions on style.css match the permissions on index.html
     
  5. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #5
    My external stylesheet declarations have one more attribute than yours:

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

    I'm not sure that will make a difference, it was just a thought.
     
  6. Apple Key macrumors 6502a

    Apple Key

    Joined:
    Jan 4, 2012
    #6
    A direct copy and paste of your code works for me.
     
  7. karl878 macrumors member

    Joined:
    Dec 8, 2005
    Location:
    CA
    #7
    My first step in figuring out why HTML/CSS code is not working as I expected, is to run the code through a validator. The validator I use the most is the W3C Markup Validation Service.

    http://validator.w3.org/

    There is a link on the above page to also validate CSS stylesheets.
     
  8. adamtehbadam macrumors newbie

    Joined:
    Jan 10, 2008
    #8
    Have you tried running your CSS through a validator? Perhaps you left a bracket or semicolon off somewhere...

    What about shift-refreshing the page or clearing the cache?
     
  9. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #9
    I'm going with MasConejos idea – permissions.

    Open the page in Safari, open the webkit inspector, go to the network tab and then see what it says for "style.css".

    If it's a 404 and it is in the same directory, then it will more than likely be permissions.

    How you are accessing index.html:
    [1] file://
    [2] localhost?
    [3] remote server?

    Hope that make sense? I was being brief because I am lazy, but I am happy to provide a more in depth explanation of the above if required.
     

Share This Page