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

CSS Treehouse Club: CSS My First Web Page Color Keywords, Hex Colors, and Font Families

I'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.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I'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.

7 Answers

Rishabh Verma
Rishabh Verma
2,762 Points

Hi 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.

+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
Rishabh Verma
2,762 Points

Code is working fine on my browser. There could be problem with your browser as Jennifer said.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I 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 :)

Jennifer it is in small case. .

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

The 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
Rishabh Verma
2,762 Points

Hi 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>

Jennifer 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.

Well I did clear it Jennifer :).

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ah 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
Paul Lujan
1,891 Points

I 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
Paul Van Heel
969 Points

You may also want to try a different browser, it seems to act differently if I use Firefox vs Explorer.