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

Changes in workspace not appearing on web page "Im using Chrome"

Hi all, I am not seeing specific changes made to my workspace when loading the preview page. The ones I'm not seeing are my image, top bar colour/ topr bar is missing and background colour not showing up. The writing changes I have made all work. I have tried refreshing my browser once the page is loaded with no luck. I have tried downloading workspace but my computer keeps telling me it cant be unarchived? The names of the index and css files are in lowercase as well.

Any help will be appreciated.

Here is my index.html;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All About Stan's 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="stan.jpg"alt="Stanislav">

<h1>Stanislav Amdur</h1>

<h2>Web Developer</h2>

<h3>Vancouver, BC</h3>

  <h4>What I do:</h4>
     <p>I am a film industry worker and a part time web developer.</p>

<h4>What I enjoy doing:</h4>  
  <p>When I'm enjoying myself I am usually writing code.</p>

</body> </html>

and here is my style.css

/*********************************************** Top bar color ***********************************************/

html { background-color: red border-top: 100px solid #2A15A8; }

/*********************************************** Body styling ***********************************************/

body { max-width: 600px; margin: 20 auto; padding: 40px 40px; font-size: 1.3em; line-height: 1.6em; font-family: 'Open Sans', sans-serif; color: #777; font-weight: 300; }

/*********************************************** Image styling ***********************************************/

img { border-radius: 20%; max-width: 340px; }

/*********************************************** Headline styling ***********************************************/ h1 { font-size: 1.2em; 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; }

2 Answers

Liam Ferb
Liam Ferb
8,454 Points

I'm not particularly sure, but some possible problems / solutions would be:

  • You're not refreshing the browser / click the refresh button or do ctrl + r (cmd + r o mac)
  • You forgot to save your workspace / ctrl/cmd s (in the workspace tab)
  • You looked for one thing changing but in actually, something you didn't notice changed / just double check your code, or if you're not sure what what you changed did, just ask.

Hope This Helps!

Hey Stanislav,

One thing I can suggest you try is turning on your Chrome developer tools before you refresh the browser, this will make sure the page is definitely loaded from the server and not from the browser cache. Probably the first thing you did but have you tried clearing the cache? Also double check your image file path just incase thats the problem.

If you add your code to [https://jsfiddle.net/] or something similar it can be helpful for others to work out what the problem might be :) Hope you find a solution!