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

Posted by Andrew Cooper
Andrew Cooper
968 Points

Re-post-using CSS cannot change text color from black to blue

Hi All, trying to change text from black to blue using CSS but it just will not work. Here's my HTML page;

<!DOCTYPE html>
<html>
  <head>
    <title>Andy Cooper's Resume</title>
    <link rel="stylesheet" href="resume.css">
  </head>
  <body>
    <img src="andy_web_jpg" alt="Andy Cooper, Web Developer">
    <h1>Andy Cooper, Web Developer</h1>
    <h2>Summary of Qualifications</h2>
    <ul>
        <li>Experience as a freelance developer</li>
        <li>Experience with HTML, CSS and JavaScript</li>
        <li>Bachelor of Science, Economics</li>
    </ul>
  </body>
</html>

And here's my CSS page;

h1 {
  color: blue;
}

Any ideas? Cheers :)

Andrew Cooper
Andrew Cooper
968 Points

I have just tried to carry on further with the instructional video, it shows you how to change the font style using CSS and even that will not work!

5 Answers

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Thanks for the snapshot Andrew, that really helps!

The first thing that jumps out to me is your file names. Currently they are "Resume.css" and "Resume.html", with the first letter of each capitalized.

Then in your HTML the link to your resume is written as:

<a href="resume.html">

And the link to your stylesheet is:

<link rel="stylesheet" href="rootfolder/resume.css">

It's important that each letter matches exactly for the files to line up with each other. Upper and lower case matter: "Resume.html" is not the same as "resume.html". The first step will be to rename these files with all lower case letters. You can rename the file by right clicking it and selecting "rename".

Next we'll need to correct the link to the CSS. When you type "rootfolder/resume.css" it will look for a folder named "rootfolder" in the directory you're in, then look for "resume.css" inside of that -- but there's no folder called "rootfolder".

You had it right in your original post: since "resume.css" is in the same folder as "resume.html" you don't need to add anything to the path, you can just type the name of the file into the href attribute:

    <link rel="stylesheet" href="resume.css">

I've forked your workspace and tested these changes. With the proper capitalization and CSS file path I'm able to navigate to resume.html and see the color applied to h1. Click here to check it out. You can also click "fork snapshot" in the top right of that page to make a version that you can edit and use. Once you have things linked up correctly you should be able to move on to the next step in the lesson and see your changes to CSS apply.

I hope this helps! Let me know if you have any questions.

Peter Vann
Peter Vann
36,427 Points
Peter Vann
Peter Vann
36,427 Points

Hi Andrew!

I tried it like this and it works fine:

<!DOCTYPE html>
<html>
  <head>
    <title>Andy Cooper's Resume</title>
    <style>
      h1 {
        color: blue;
      } 
    </style>
  </head>
  <body>

    <img src="andy_web_jpg" alt="Andy Cooper, Web Developer">
    <h1>Andy Cooper, Web Developer</h1>
    <h2>Summary of Qualifications</h2>
    <ul>
        <li>Experience as a freelance developer</li>
        <li>Experience with HTML, CSS and JavaScript</li>
        <li>Bachelor of Science, Economics</li>
    </ul>

  </body>
</html>

Make sure your link tag is correct and that the path to the file is accurate.

<link rel="stylesheet" type="text/css" href="resume.css">

Coded like that, it assumes that the HTML file and the CSS file are in the same directory.

Otherwise, it would be something like this:

<link rel="stylesheet" type="text/css" href="./subfolder/resume.css">

Does that make sense?

I hope that helps.

Stay safe and happy coding!

Andrew Cooper
Andrew Cooper
968 Points
Andrew Cooper
Andrew Cooper
968 Points

Hi Peter, thanks ever so much for responding. I typed the: h1 { color: blue; } straight into the html page and yes it did change the font color from black to blue. However when I tried to carry on with the next video instruction which was changing the font style using CSS, again, it did not work. Both the html and css files are in the same directory. I've been in touch with Support who say to post the issue in Community and if it's not resolved within 24hrs to get back to them. The problem is I cannot carry on with the course until the issue is resolved. But thank you for trying :)

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Hi Andrew,

I'd like to take a look at your workspace to see what's going on. Can you share a workspace snapshot here?

To share a snapshot:

  • Open your workspace
  • Click the camera icon in the the top right corner ("Snapshot Workspace")
  • Click "Take Snapshot"
  • Open the link it generates (opens new window)
  • Copy the link from the address bar in the new window and post it here
Andrew Cooper
Andrew Cooper
968 Points
Andrew Cooper
Andrew Cooper
968 Points

Hope I've done it right Cameron: https://w.trhou.se/jast8a9vjb

Andrew Cooper
Andrew Cooper
968 Points
Andrew Cooper
Andrew Cooper
968 Points

Hi Cameron, You've sorted it, thank you ever so much. All the best, Andy Cooper :)