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: <pre class="prettyprint"><code><!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> 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. <a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a> </div> </div> </body> </html> </code></pre> styles.css: <code>body {color:blue;}</code> Working HTML and CSS on BitBalloon

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.

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. <ol> <li>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</li> <li>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.</li> </ol> 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.

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

Why is CSS link not working?

Make sure the link tag is at the right place If you put the <link> tag inside another valid header tag like <title> or <script> tag, then the CSS won't work. The external style CAN be put inside the <body> tag, although it's recommended to put it in the <head> tag to load the style before the page content.

Why is my CSS not working on PHP?

its probably a cache issue, just delete all browsing data's, history, cache, cookies, e.t.c and then close the browser and open again, it should fix the problem as it fixed mine. its very simple, first you write the style tag then call the css file with php. Save this answer. Show activity on this post.

How do I link a local style sheet in HTML?

CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.

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.

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.

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
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.

Relative link to stylesheet does not work on local machine, works online. Why is this?

Tags:

html

css

stylesheet

rel

Erik V

People also ask

2 Answers

Alex L

Biilmann

Recent Activity

Donate For Us

Relative link to stylesheet does not work on local machine, works online. Why is this?

Tags:

html

css

stylesheet

rel

Erik V

People also ask

2 Answers

Alex L

Biilmann

Related questions

Recent Activity

Donate For Us