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
izqcabvvli
4,111 PointsI'm unable to observe the changes done in both html and style.css?
I'm unable to observe the changes done in both html and style.css even after saving and repeated refreshing. Here's the code.
INDEX.HTML
<!-- Be sure to change EVERYTHING on this page to make it your own! :) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>All About Stephen Page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="Steve.jpg" alt="Stephen">
<h1>Stephen Nicholas Tauro</h1>
<h2>Teacher</h2>
<h3>San Francisco</h3>
<h4>What I do:</h4>
<p>I'm a teacher at Treehouse.</p>
<h4>What I enjoy doing:</h4>
<p>When I'm not writing code, I like to surf and play music. Your turn! wWrite in something that makes you happy, or things you like to do in your free time.</p>
</body> </html>
STYLE.CSS
/*********************************************** Top bar color ***********************************************/
html { background-color: orange; border-top: 20px solid #8A85A5; }
/*********************************************** Body styling ***********************************************/
body { max-width: 600px; margin: 0 auto; padding: 20px 20px; font-size: 1.3em; line-height: 1.6em; font-family: 'Open Sans', sans-serif; color: #777; font-weight: 300; }
/*********************************************** Image styling ***********************************************/
img { border-radius: 10%; max-width: 340px; }
/*********************************************** Headline styling ***********************************************/ h1 { font-size: 1.5em; line-height: .5em; color: #564581; }
h2 { font-size: 1em; line-height: 1em; font-style: oblique; color: #aaa;
}
h3 { font-size: .875em; line-height: 1em; font-weight: normal; }
h4 { margin-top: 60px; font-weight: 500; color: #564581; }
In the above code the background colour and the image border-radius changes are not being applied. Any solutions.
7 Answers
Rishabh Verma
2,762 PointsHi Stephen Nicholas Tauro, You've not perfectly put the general HTML tags in your code. That could literally be a problem.
Here's how your index.html file should look:
<html>
<head>
<meta charset="utf-8">
<title>All About Stephen Page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="Steve.jpg" alt="Stephen">
<h1>Stephen Nicholas Tauro</h1>
<h2>Teacher</h2>
<h3>San Francisco</h3>
<h4>What I do:</h4>
<p>I'm a teacher at Treehouse.</p>
<h4>What I enjoy doing:</h4>
<p>When I'm not writing code, I like to surf and play music. Your turn! wWrite in something that makes you happy, or things you like to do in your free time.</p>
</body>
</html>
And your style.css file :
/*********************************************** Top bar color ***********************************************/
html { background-color: orange; border-top: 20px solid #8A85A5; }
/*********************************************** Body styling ***********************************************/
body { max-width: 600px; margin: 0 auto; padding: 20px 20px; font-size: 1.3em; line-height: 1.6em; font-family: 'Open Sans', sans-serif; color: #777; font-weight: 300; }
/*********************************************** Image styling ***********************************************/
img { border-radius: 10%; max-width: 340px; }
/*********************************************** Headline styling ***********************************************/ h1 { font-size: 1.5em; line-height: .5em; color: #564581; }
h2 { font-size: 1em; line-height: 1em; font-style: oblique; color: #aaa;
}
h3 { font-size: .875em; line-height: 1em; font-weight: normal; }
h4 { margin-top: 60px; font-weight: 500; color: #564581; }
Now, You can see the perfect results.
izqcabvvli
4,111 Points+Rishabh Verma The tags are closed for your information though I don't know why it didn't copy. And your code isn't working but thanks for trying to help.
Rishabh Verma
2,762 PointsCode is working fine on my browser. There could be problem with your browser as Jennifer said.
Jennifer Nordell
Treehouse TeacherI still would like to know if in your directory structure the files are named "INDEX.HTML" and "STYLE.CSS" or if they are "index.html" and "style.css". There is a difference :)
izqcabvvli
4,111 PointsJennifer it is in small case. .
Jennifer Nordell
Treehouse TeacherThe markdown sometimes messes it up, Stephen. I know you're looking for a close head tag and some body tags but for whatever reason the markdown on the forum will skip right over those on occasion. I promise it does happen..
I'm still of the opinion that the next step is to clear the browser cache and try reloading the page.
Rishabh Verma
2,762 PointsHi Stephen,
index.html:
<html>
<head>
<meta charset="utf-8">
<title>All About Stephen Page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="Steve.jpg" alt="Stephen">
<h1>Stephen Nicholas Tauro</h1>
<h2>Teacher</h2>
<h3>San Francisco</h3>
<h4>What I do:</h4>
<p>I'm a teacher at Treehouse.</p>
<h4>What I enjoy doing:</h4>
<p>When I'm not writing code, I like to surf and play music. Your turn! wWrite in something that makes you happy, or things you like to do in your free time.</p>
</body>
</html>
izqcabvvli
4,111 PointsJennifer and Rishabh there is no fault in the code as I tried saving in notepad and opening it. Even after repeated refreshing the code opened from workspaces it isn't working.
Jennifer Nordell
Treehouse TeacherYou still haven't said specifically that you've cleared your browser cache.
izqcabvvli
4,111 PointsWell I did clear it Jennifer :).
Jennifer Nordell
Treehouse TeacherAh ha! Well then, I'm fresh out of ideas! Good luck to you! But if you can't get it sorted out fairly shortly, I might be inclined to report it to the support team here at Treehouse.
Paul Lujan
1,891 PointsI had a similar problem. When I refreshed the screen the page on my browser that displayed the web page, it reloaded with my changes.
Try saving the code and refreshing the web page.
Paul Van Heel
969 PointsYou may also want to try a different browser, it seems to act differently if I use Firefox vs Explorer.
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherI'm sure this is probably a silly question, but are your html files and css files named "INDEX.HTML" and "STYLE.CSS" in the folder structure? If so, this is probably the problem. They should be "index.html" and "style.css". These are case-sensitive.
But if they aren't, make sure you of course save your files and refresh the page when previewing. And if that still doesn't work, try clearing your browser cache and reloading the page. That can sometimes help with a stubborn workspace.