This forum is now read-only. Please use our new forums at discuss.codecademy.com.

CSS: An Overview Forum

View Course » View Exercise

177 points
5484e0759113cb0b8e0015cf_486708486
Submitted by
Jake W
over 2 years ago

Css and Html linking problem

I am using Sublime Text to make my own website and Code Academy to help me learn! But I do not know how to link the css and the html. I have done the lesson were you do that and successfully completed it, but I can not get it to work in Sublime Text. Any help would be greatly appreciated.


2 votes

permalink

Hiya, I don't have any experience in sublime text nor do I know much about it either, however, I've been playing around with a few incredibly basic test webpages (mainly through boredom) and I know how to link them, a few lines of code here should help:

Within all your code in order to link you want to have this in your HTML document.

<!DOCTYPE html>
html
head
link type="text/css" rel="stylesheet" href="stylesheet.css"
title Test title
head

See the stylesheet.css? That refers to what your CSS extension is called, this link basically links the CSS file that I have called stylesheet.css, however, it can be called anything you want. (Keep in mind I have removed the start and end tags as they cause the code to disappear, not sure why that is. However, as you've gone onto coding a website I expect you know where the start and end tags should be.)
I.E.
link type="text/css" rel="stylesheet" href="chicken.css"
All I've done here is change the name of the filename and changed it in the "href" section.

Hope this helps, I may have completed the HTML course but it's possible I've gotten some things wrong, but this is what I've done in order to link my CSS and HTML together.

477 points
5177b4ff533b48c7480001e9_258355906
Submitted by
Tom
over 2 years ago


1 vote

permalink

Very good Tom

but i would like to add one little detail:
changing the href like in your example tom, will only work of the files are in the same folder. but if you have a folder called website and in this folder you have a index.html file, and a folder called stylesheet. the stylesheet folder contains the file stylesheet.css, then href should be: stylesheet/stylesheet.css

website -> (this is folder)
           index.html (this is a file)
           stylesheet -> (stylesheet is directory)
                         stylesheet.css (this is your css file)

if you want to go up one directory you could use ..

so you will get something like this:

href="../somefolder/style.css"

the two dots will cause href to go up one directory (parent directory).

this is called relative path, you can also use for example a absolute path:
href="C:\users\username\website\stylesheet\stylesheet.css" (i hope this is correct, most webservers are linux based, then it looks something like this:
href="/home/username/website/stylesheet/stylesheet.css

hope this helps.

2410 points
593d545c83696644420003b7_64554016
Submitted by
stetim94
over 2 years ago

1 Comment

5177b4ff533b48c7480001e9_258355906 Tom over 2 years ago

Ah I see, thanks for that, I didn't even know that so I've learned something new!


1 vote

permalink

@tom, do you know this:

on codecademy you are hot linking to pictures on other servers, for example:
<img src="http://en.es-static.us/upl/2014/03/stars-nasa.jpg"> now you are getting the image from en.es-static.us, but if you are using your own computer to run somethings in text editor you can just download the image, store it in the same folder and do:
<img src="picturename.jpg> (and use the same trick if you use have links (<a></a>)
(it saves resources if it can get the picture of your own server, rather then linking to another server)
of course, you can again use the full path.

2410 points
593d545c83696644420003b7_64554016
Submitted by
stetim94
over 2 years ago

1 Comment

5177b4ff533b48c7480001e9_258355906 Tom over 2 years ago

Another thing I learned, thanks :)


1 vote

permalink

Thanks Tom!

177 points
5484e0759113cb0b8e0015cf_486708486
Submitted by
Jake W
over 2 years ago

5 Comments

Df51afb5e2b1174c2117227f547dd88d?s=140&d=retro brett over 2 years ago

<!DOCTYPE html>

(GOOD WAY, without , that's enough)

5177b4ff533b48c7480001e9_258355906 Tom over 2 years ago

You can thank stetim as well, he helped me out with this, but otherwise, no problem bud :)

593d545c83696644420003b7_64554016 stetim94 over 2 years ago

thanks for giving me credits, you also give credit, you gave the right answer i elaborated the answer

5177b4ff533b48c7480001e9_258355906 Tom over 2 years ago

No problem man, we made a good tag team :D

593d545c83696644420003b7_64554016 stetim94 over 2 years ago

we most certainly did


0 votes

permalink

Hi, I know and used sublime text before but I suggest you use codecademy's work space because it will tell you what is wrong.

642 points
5793e37558212240e90003fd_774329516
Submitted by
iiRosie1
about 2 years ago