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 Pointsclass select problem
Hi, I am trying to add class on <div> and change text colour on css but it doesn't work, just wonder did my code right? Thanks
here is my code...
<!DOCTYPE html> <html> <head> <title>City of Toronto</title> <link rel="stylesheet" href="../CSS/style.css"> </head> <body> <header> <h1>City of Toronto</h1> <h2>Edwin Chau</h2> </header>
<img src="../img/history.jpg" alt="">
<div class="history">
<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>
</div>
</body> </html>
CSS
header { background-color: tomato; text-align: center; padding-bottom: 100px; }
img{ float: left; margin: 100px; border: 10px solid black; }
.history { background-color: red; }
4 Answers
Chyno Deluxe
16,936 PointsYou should remove the "../" from your css and img links.
that states that you are "backing" out of a current folder and into another when in reality you just want to go into the CSS folder and IMG folder.
Edwin Chau
Courses Plus Student 5,702 PointsI have add class in div but doesn't work...
so, I add <body> <div class="history> <p>text</p> <p>text</p> <p>text</p> </div> </body> </html>
Chyno Deluxe
16,936 Pointscan you post your complete HTML code?
Chyno Deluxe
16,936 PointsIm not sure where you want the history class but Im going to assume this is what you are actually wanting to do.
<!DOCTYPE html>
<html>
<head>
<title>City of Toronto</title>
<link rel="stylesheet" href="../CSS/style.css">
<style>
header {
background-color: tomato;
text-align: center;
padding-bottom: 100px;
}
img {
float: left;
margin: 100px;
border: 10px solid black;
}
.history {
background-color: red;
}
</style>
</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>
Edwin Chau
Courses Plus Student 5,702 PointsThis is what I did..add class on <div> is it right? <!DOCTYPE html> <html> <head> <title>City of Toronto</title> <link rel="stylesheet" href="../CSS/style.css"> <style> header { background-color: tomato; text-align: center; padding-bottom: 100px; } img { float: left; margin: 100px; border: 10px solid black; } .history { background-color: red; } </style> </head> <body> <header> <h1>City of Toronto</h1> <h2>Edwin Chau</h2> </header> <img src="../img/history.jpg" alt=""><div class="history> <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></div> </body> </html>
Edwin Chau
Courses Plus Student 5,702 PointsI don't know why I can't copy & paste the complete code here, let me try again. <!DOCTYPE html> <html> <head> <title>City of Toronto</title> <link rel="stylesheet" href="../CSS/style.css"> </head> <body> <header> <h1>City of Toronto</h1> <h2>Edwin Chau</h2> </header>
<img src="../img/history.jpg" alt="">
<div class="history">
<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>
</div>
</body> </html>
Edwin Chau
Courses Plus Student 5,702 PointsEdwin Chau
Courses Plus Student 5,702 PointsHi Martin, if I don't add "../" the css can not be link, and image not showing..
Chyno Deluxe
16,936 PointsChyno Deluxe
16,936 Pointsoh ok. well in that case you just need to add class="history" to the HTML element you want to style.
Example:
<h1 class="history">City of Toronto</h1>also. im not sure if this is your complete HTML but your </header> tag is missing the opening tag. that can also be a reason it is not styling correctly.