Linking CCS Stylesheet

css

#1

I am trying to link my stylesheet to my html document. I use the code <link rel="stylesheet" href="main.css" type="text/css"/> The document is titled main.css, but it isn’t working. Any help?

Thanks a ton.


#2

Make sure the css file is in the same directory as the html file for that to work. also, it needs to be placed in the head portion of the html file.


#3

yes, ima agree with @jms1989. So if you can post your html page to show maybe its an other problem. And you css is blank? have you setup correctly your css?


#4

Depends where the css files are in relation to the html files.
/ = directory root /css/mystyle.css /pages/some_html_that_needs_mystyle.css.html
Above example will require href="…/css/mystyle.css

/ = directory root /css/mystyle.css /some_html_that_needs_mystyle.css.html
Will require href="css/mystyle.css

/ = directory root /mystyle.css /some_html_that_needs_mystyle.css.html
Will require href="mystyle.css


#5

This is my html text. The main.css currently has all the styling. They are both in the same folder titled collaborative-observer.

<head>
	<title>The Collaborative Observer</title>
	<link rel="stylesheet" href="collaborative-observer/main.css" type="text/css"/>
</head>

<body>
	<div>
		<h1>The Collaborative Observer</h1> 
		<p>The best thing that has happened to ICE since ICE.</p>
	</div>
</body>
`

#6

I’m a little confused here. What would it be in case? Would the directory root be replaced with collaborative-observer?
Thanks for the help.


#7

If the html file and the css file are in the same folder than this should work href="mystyle.css


#8

Does my CSS sheet have to be titled mystyle.ccs also?


#9

No, its whatever your CSS is called.


#10

It’s not working, am i doing something wrong? This is the code <link rel="stylesheet" href="main.css" type="text/css"/>. It is titled main.css, but I’m not getting the styles.


#11

Send a screenshot of the directory tree, I want to see where all the files are. And what they are called.


#12


#13

Things look alright to me, the only tips I might give is add <!DOCTYPE html> on top of the html file and maybe switch href with type.

So it becomes <link rel="stylesheet" type="text/css" href="main.css"/>

If that does not fix it than I don’t know.


#14

The doctype is on the top, you just can see it in the screenshot. Switched it, but nothing changed. Do you have an files with a CSS attached to html? If so can u screenshot so I can see?

Many thanks!


#15

I am working on a fairly big project in a group for school, and we don’t even use our own CSS. We simply use Bootstrap. But we do have one CSS file of our own, here is how I imported it.


#16

Ok, thanks for the help, I will check out bootstrap.


#17

I don’t know if you figured this out or not, but it was driving me crazy. The solution is for some weird reason you have to remove the type='text/css"/

My css was in the stylesheet folder and I had to code the link as such:
< link rel=“stylesheet” href=“stylesheet/eats-styles.css” >