Can't Link CSS to HTML

Hi I’m working along with a web design tutorial video and no matter what I do my Css will not link to the HTML. I will attach my code.

Html:

<html>
      <head>
          <title>boomaaaa</title>
          <link rel="stylesheet" href="style.css">
        </head>
        <body>
           <div id="container">
              <div id="header"></div>
              <div id="navigation"></div>
              <div id="mid">
                    <div id="left"></div>
                    <div id="right"></div>
              </div>
              <div id="footer"></div>
           </div>
        </body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
}

#container {
	background: green;
	width: 1200px;
	height: 400px;
	margin: 0 auto;	
	border: 1px;
}
	#Header {}
	#navigation {}
	#mid {}
		#left {}
		#right {}
	#footer {}

When I check the page resources in browser it tell me the css is linked but for some reason the css file looks like this:

{\rtf1\ansi\ansicpg1252\cocoartf1671\cocoasubrtf100
{\fonttbl}
{\colortbl;\red255\green255\blue255;}
{*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
}

any help would be much appreciated! :slight_smile:

1 Like

I tried a different editor

For some reason in sublime it changed my css input upon opening in the browser but when I tried in brackets it worked perfectly fine.

Anyone know what’s up with that?

1 Like

Hi could you press the image icon in the Codecademy discuss editor, and put the code between these: image so we could see the code.

When I open it in the browser it displays it as styled.
But delete those selectors at the bottom of the CSS file, it won’t throw a syntax error, but you shouldn’t use empty rulesets.
At the top of your HTML file be sure to include

<!DOCTYPE html>

And when linking a CSS file add a type attribute to it too:

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

so the HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>boomaaaa</title>
      <link rel="stylesheet" href="style.css" type="text/css">
   </head>
   <body>
      <div id="container">
         <div id="header"></div>
         <div id="navigation"></div>
         <div id="mid">
            <div id="left"></div>
            <div id="right"></div>
         </div>
         <div id="footer"></div>
      </div>
   </body>
</html>

and the CSS:

* {
    margin: 0;
    padding: 0;
}

#container {
    background: green;
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    border: 1px;
}

Hope this helps :grinning:

1 Like