CODEWITHSUNDEEP
htmlcssstylesheetrel
Erik V
Erik V

Reputation: 375

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 &nbsp;&amp;&nbsp; unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
      </div>
    </div>
</body>
</html>

styles.css:

body {color:blue;}

Working HTML and CSS on BitBalloon

Upvotes: 5

Views: 8605

Answers (2)

Biilmann
Biilmann

Reputation: 41

When you start a path with / like /css/styles.css you're telling the browser to look at the URL you're viewing, take the base part of it and append /css/styles.css

When your site is hosted on BitBalloon, the base of your URL is shopkeeper-cnythia-30345.bitballoon.com and the complete path to the stylesheet becomes http://shopkeeper-cnythia-30345.bitballoon.com/css/styles.css

When you're viewing the file locally, the URL is probably something like file:///Users/mbc/Documents/html-sites/html5up-aerial - in this case there's no base domain, so your browser ends up looking for the file: file://css/styles.css and that doesn't exist.

There's two ways around this.

  1. Use a truly relative path like css/styles.css. This tells the browser to take the directory you're on and append css/styles. The downside of this is that you'll have to take care if your on a subpage like /about/index.html - since then the browser will try to fetch /about/css/styles.css and you would need to link to ../css/styles.css to get around that
  2. Use an absolute path and run a local web server. Here's a really good list of one lines that will let you start a simple web server from the command line in a directory: https://gist.github.com/willurd/5720255, this guarantees that your site will behave the same way when you're viewing it locally and when you deploy it to BitBalloon.

I would recommend getting used to running a local web server. As soon as you start playing more around with Javascript, Ajax requests, etc, it becomes a necessity anyway.

Upvotes: 2

Alex L
Alex L

Reputation: 651

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.

Upvotes: 4

Related Questions