-1

I have been trying to link my external styles sheet to my html for a while now and I can't seem to make it happen. I have both files saved in the same folder on my desktop and am using text wrangler to write. I can see what the page should look like when I pull it up in finder but when I open the site in a browser it only responds to my html.

This is what I am working with(updated):

<!DOCTYPE html>
<html lang="en">
<head>
<title>Nathan Langer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="website/style.css"/>
</head>
<header>
<h3>For proffesional and creative video and media production</h3>
</header>

<body>
<div id="name">
    <h1>Nathan Langer</h1>
</div>
</body>

<footer>
<nav>
    <a href="resume.html">Resume</a>
    <a href="portfolio">Portfolio</a>
    <a href="aboutme">What I Do</a>
</nav>
</footer>

</html>

This is my css: 

body {
    background-image: url(images/cool.png);
    background-repeat: no-repeat;
    background-position: center;
}

#name {
    text-align: center;
    font-size: 50px;
    color: white;
    }

nav {
position: center;
}
nav a:hover {text-decoration:none ;}
nav a:visited {color: rgb(256,256,256) ;}
nav a:link {
text-decoration:none ;
color: rgb(256,256,256) ;
    }
Nate
  • 13
  • 4
  • And what does the developer tools from your browser tell you? – rene Jun 17 '14 at 17:29
  • Are you sure your stylesheet has the right (.css) extension?? if you are using chrome goto the developer tools or right click on the page and inspect element and click on Network to see if the stylesheet gets loaded. You will need to refresh the page – Tasos Jun 17 '14 at 17:34
  • rene makes a good point. Browser dev tools are invaluable. On Chrome press cmd+option+j, and on FF press cmd+option+k. If the browser is failing to load a resource, you'll see the error in the console. – Justin Jun 17 '14 at 17:35
  • Are you using a web server locally (e.g., Apache)? That would probably make things more reliable if not. – Chris Peters Jun 17 '14 at 17:50
  • Might not be the error, but `` should be a child of the `` element, with the `
    ` and `
    ` elements under that, so `...
    `
     – Heretic Monkey Jun 17 '14 at 20:17

2 Answers2

0

Well, can you give us your css file as well?

OLD POST ingnore this part

For all I can say now is that you forgot to close the tag. So replace it with this one

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

after that, for changing your h1 style in css do

h1 {
    color:#FF0000;
    font-size: 30px;
}

That should do the trick!

NEW PART (after the css was given)

Now it looks like you have following folder struture (like user3291093 stated)

index.html (or whatever your page is called)
website (folder)
  |
  ----> style.css
  ----> images (folder)
    |
    ----> cool.png

I have tested your code on my computer and your code is working if I put it in the aboce folder structure. You should check your source code in a web browser (Chrome, Firefox) and see if the link to the css file is really working (Or use the Dev tool of your browser)

Hope this helps :)

Reggi
  • 402
  • 8
  • 21
0

Everything looks good. The only problem that I see is that you are probably using an invalid path to the directory where the css file is stored: (Example: its in a directory called "folder")

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

Here is a brief description of other file paths:

./ means the current directory

../ means the parent of the current directory, not the root directory

/ is the root directory

myfile.text is in the current directory, as is ./myfile.text

../myfile.text is one level above you and /myfile.text lives in your root directory.

To avoid this issue you can put a direct link to the stylesheet like this:

<link rel="stylesheet" type="text/css" href="http://www.website.com/style.css"/>
  • I slightly disagree — we can expect browsers not to load stylesheets over unencrypted connections if the page itself is encrypted. Either use `href="//www.website.com/..."`, meaning "same protocol, different server" or a root-relative path like `href="/style.css"`. – Ulrich Schwarz Jun 17 '14 at 18:08
  • I updated my question with some new html and my css. – Nate Jun 17 '14 at 18:31
  • Have you tried a direct link? and if it doesn't work click on the direct link in the source code in your meta tag... See if that pulls up your css file. –  Jun 17 '14 at 18:57
  • @Ulrich Schwarz thanks for your input. I totally agree with you, but I just wanted to make sure his file path was correct. Hhaving him make the css link clickable would be easy for him to see if its valid, once he clicks on it through the page source –  Jun 17 '14 at 19:00
  • If none of my suggestions helped, please post your website link so I can investigate :) –  Jun 17 '14 at 19:00
  • I have yet to launch the website. I do not want to pay for hosting while my site is still under construction. – Nate Jun 17 '14 at 19:26
  • I need more details then, what is the exact files structure like you have 1 one main folder with all your stuff in and then in that main folder are the index.html and the style.css in? or is the css file in another folder inside that main folder. Also do me a favor rightclick the css file and click properties and paste the file location that it shows here. –  Jun 17 '14 at 19:37
  • The index.html and the style.css are both in a folder titled website on my desktop. There is only one other folder within the website folder that is housing my images. ~/Desktop/website/style.css – Nate Jun 17 '14 at 19:49
  • Strange... I would expect href="style.css" to work for this then. Since its in the exact same location as index.html. Make sure you stylesheet is style.css and not style.css.txt or anything –  Jun 17 '14 at 19:54
  • I am starting to believe that this is being caused by the computer I am working with. I am using one of my university's computers and although I have never had this issue before it is starting to seem like a very probable answer. I do appreciate you input though. – Nate Jun 17 '14 at 20:02
  • Honestly, it should all work once you upload your files to a hosting. In the meantime, you can use style tag to embed your css into your html file –  Jun 17 '14 at 20:08