Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Stephen Tauro
Stephen Tauro
4,110 Points

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.

Stephen Tauro
Stephen Tauro
4,110 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
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 :)

Stephen Tauro
Stephen Tauro
4,110 Points

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>
Stephen Tauro
Stephen Tauro
4,110 Points

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.

Stephen Tauro
Stephen Tauro
4,110 Points

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.