Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Edwin Chau
Courses Plus Student 5,702 Pointsproblem with linking css stylesheet to html
Hi,
I am trying to create my first website using html and css, this what I had learned so far.
I have problem adding css stylesheet to html, i try different sources but still not working...
Here is my code don't know what i did wrong... Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>City of Toronto</title>
<link rel="stylesheet" href="css/styles01.css">
</head>
<body>
<header>
<h1>City of Toronto</h1>
<h2>Edwin Chau</h2>
</header>
<img src="../img/history.jpg" alt="">
<p>Toronto, on the north shore of Lake Ontario, is the largest of Canada's vibrant urban centres. It is the hub of the nation's commercial, financial, industrial, and cultural life, and is the capital of the Province of Ontario. People have lived here since shortly after the last ice age, although the urban community only dates to 1793 when British colonial officials founded the 'Town of York' on what then was the Upper Canadian frontier. That backwoods village grew to become the 'City of Toronto' in 1834, and through its subsequent evolution and expansion Toronto has emerged as one of the most liveable and multicultural urban places in the world today.</p>
<p>This presentation provides general audiences with a summary of the current scholarly consensus on the main themes in Toronto's past, with an emphasis on the characteristics of life here through time as well as the changes, issues, and influences that affected the shared experiences of its residents.</p>
<p>In addition to facts, historical studies are about interpretation, and there are many ways of viewing our heritage. Therefore, additional presentations on specialized topics will follow in the future, and we hope that other groups will use the Internet and other media to share their stories of Toronto's history in order to broaden the number of voices, increase discussion, and advance historical awareness for everyone's benefit.</p>
</body>
</html>
6 Answers
Gavin Ralston
28,770 PointsRemember to include meta and link tags inside of a head tag
<head>
<link rel="stylesheet" href="css/styles01.css">
</head>
Also be sure to check that you have the directory structure and the filename is correct.
It should work fine.
Emma Willmann
Treehouse Project ReviewerI think the issue might be that you are missing the html, head, and body tags. After declaring your doctype, you need to have the html tag. Within that you would use the head tag and the body tag. Inside the head tag, you put your meta info, title, and links for css. Inside the body tag is where you would put anything that shows up on the page, like h1 and p tags.
Your code should look like below. Try making these changes and see if it works.
<!DOCTYPE hmtl>
<html>
<head>
<meta charset ="utf-8">
<title>City of Toronto</title>
<link rel="stylesheet" href="css/styles01.css">
</head>
<body>
<header>
<h1>City of Toronto</h1>
<h2>Edwin Chau</h2>
</header>
<img src="../img/history.jpg" alt="">
<p>Toronto, on the north shore of Lake Ontario, is the largest of Canada's vibrant urban centres. It is the hub of the nation's commercial, financial, industrial, and cultural life, and is the capital of the Province of Ontario. People have lived here since shortly after the last ice age, although the urban community only dates to 1793 when British colonial officials founded the 'Town of York' on what then was the Upper Canadian frontier. That backwoods village grew to become the 'City of Toronto' in 1834, and through its subsequent evolution and expansion Toronto has emerged as one of the most liveable and multicultural urban places in the world today.</p>
<p>This presentation provides general audiences with a summary of the current scholarly consensus on the main themes in Toronto's past, with an emphasis on the characteristics of life here through time as well as the changes, issues, and influences that affected the shared experiences of its residents.</p>
<p>In addition to facts, historical studies are about interpretation, and there are many ways of viewing our heritage. Therefore, additional presentations on specialized topics will follow in the future, and we hope that other groups will use the Internet and other media to share their stories of Toronto's history in order to broaden the number of voices, increase discussion, and advance historical awareness for everyone's benefit.</p>
</body>
</html>
Cristian Altin
12,165 PointsFirst of all the body tag is missing before header and after all the content. Also no html tag under DOCTYPE and at the end is present. Remember head tag too.
Gavin Ralston
28,770 PointsAll this, too. :)
Keep in mind the most basic structure of an HTML document that you'd need to apply almost every time would look something like this:
<!DOCTYPE html>
<html>
<head>
// your links and metadata here
</head>
<body>
// the stuff you want to present here
</body>
</html>
Edwin Chau
Courses Plus Student 5,702 Points<!DOCTYPE html>
<html>
<head>
<title>City of Toronto</title>
<link rel="stylesheet" href="css/styles01.css">
</head>
<body>
<header>
<h1>City of Toronto</h1>
<h2>Edwin Chau</h2>
</header>
<img src="../img/history.jpg" alt="">
<p>Toronto, on the north shore of Lake Ontario, is the largest of Canada's vibrant urban centres. It is the hub of the nation's commercial, financial, industrial, and cultural life, and is the capital of the Province of Ontario. People have lived here since shortly after the last ice age, although the urban community only dates to 1793 when British colonial officials founded the 'Town of York' on what then was the Upper Canadian frontier. That backwoods village grew to become the 'City of Toronto' in 1834, and through its subsequent evolution and expansion Toronto has emerged as one of the most liveable and multicultural urban places in the world today.</p>
<p>This presentation provides general audiences with a summary of the current scholarly consensus on the main themes in Toronto's past, with an emphasis on the characteristics of life here through time as well as the changes, issues, and influences that affected the shared experiences of its residents.</p>
<p>In addition to facts, historical studies are about interpretation, and there are many ways of viewing our heritage. Therefore, additional presentations on specialized topics will follow in the future, and we hope that other groups will use the Internet and other media to share their stories of Toronto's history in order to broaden the number of voices, increase discussion, and advance historical awareness for everyone's benefit.</p>
</body>
</html>
I have include everything but still doesn't work....
Gavin Ralston
28,770 PointsThis is the same html you initially posted, and doesn't include any of the suggestions from other replies.
Cristian Altin
12,165 PointsRemember to save the changes before testing out in your browser.
Edwin Chau
Courses Plus Student 5,702 PointsI have included everything in sublime text2 but i don't know why I can't paste it here..
Gavin Ralston
28,770 PointsMake sure you're saving both the css file (if you make changes) and the new html file you write. It's common to write up a bunch of stuff, then refresh the browser and forget to save the changes first.
Emma Willmann
Treehouse Project ReviewerEdwin, I updated your question and one of your responses to format the code correct. When posting code you want to include 3 backticks followed by the type of code on the line before your code, and 3 backticks on the line afterwards. That was the reason we weren't seeing your html, head, and body tags. Check out the Markdown Cheatsheet below the box you type in to get more info on posting code.
As for the issue your having, double check the capitalization of the file and folder you are linking to.
At one point you said "I just saved the styles01.css to the CSS folder". Is the folder all in caps? If so, then the reference to it should be too, like this:
<link rel="stylesheet" href="CSS/styles01.css">
Same thing with the file name, if that is capitalized where you saved it.
Let us know if that works.
Edwin Chau
Courses Plus Student 5,702 PointsGot it. I finally link the style sheet for typing ../CSS/styles.css
Thank you for all your help
Edwin Chau
Courses Plus Student 5,702 PointsEdwin Chau
Courses Plus Student 5,702 PointsI just saved the styles01.css to the CSS folder. don't know what the problem is.
Gavin Ralston
28,770 PointsGavin Ralston
28,770 PointsMostly it's all of the other markup.
See the replies below for additional details, especially the parts about the head tag, the body tag, the html tag, and where to place other elements in those tags. :)