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

Stephen Nicholas Tauro
Stephen Nicholas Tauro
4,106 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
Jennifer Nordell
Treehouse Moderator

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 Nicholas Tauro
Stephen Nicholas Tauro
4,106 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
Jennifer Nordell
Treehouse Moderator

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 Nordell
Jennifer Nordell
Treehouse Moderator

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 Nicholas Tauro
Stephen Nicholas Tauro
4,106 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.

Jennifer Nordell
Jennifer Nordell
Treehouse Moderator

You still haven't said specifically that you've cleared your browser cache.

Jennifer Nordell
Jennifer Nordell
Treehouse Moderator

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.