Relative link to stylesheet does not work on local machine, works online. Why is this?
I'm trying to link my stylesheet (styles.css) to index.html. When I do this using the Sublime Text build function for Chrome, the HTML comes out fine, but does not link to the stylesheet (the text is not blue). When I upload this exact same code (in the same folder structure) to BitBalloon, the link works. Why is this and how do I make the link work in both situations?
index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>I think I'm doing this right!</title>
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
</heaod>
<body>
<div class="jumbotron">
<div class="container">
<h1>CareerFoundry Template</h1>
<p style="background-color: red;">This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more & unique.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
</div>
</div>
</body>
</html>
styles.css:
body {color:blue;}
Answer
Your root directory online is set to public_html (or www) on a standard setup.
The first part of this:
/css/styles.css
Tells is to look at the root of the project "/" and go from there. On your computer, it is using "/" as the root of your computer.
Using just "css/styles.css" would probably work if the css folder is the same directory that contains your html file.
Otherwise, you can run a local web server such as WAMP which will allow you to have a public_html folder as root on your local machine.