Menu
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;}
Working HTML and CSS on BitBalloon
471
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.
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.
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.
79
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.
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.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
