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.

HTML Introduction to HTML and CSS Adding a New Web Page Write the CSS

Image specifications won't change based on CSS settings.

I seemingly have everything typed correctly, so I have no idea why my .main-image won't pick up the changes done in CSS. This is my HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>Ryan Lachapelle's Resume</title>
    <link rel="stylesheet" href="resume.css">
  </head>
  <body>
    <img src="http://placeimg.com/400/400/tech" alt="Ryan Lachapelle, Web Developer" class="main-image">
    <h1>Ryan Lachapelle, Web Developer</h1>
    <h2>Summary of Qualifications</h2>
    <ul>
      <li>Experience as a freelance web developer.</li>
      <li>Experience with HTML, CSS and Javascript.</li>
      <li>Bachelor of Science, Economics.</li>
    </ul>
  </body>
</html>

This is my CSS file:

 body {
  font-family: "Arial";
}

.main-image {
  border: solid 4px black;
  border-radius: 50%;
} 

My .main-image border does not change. Any help would be appreciated!

I've gotten it to work by adding body before .main-image in the CSS file. Seen like this:

body {
  font-family: "Arial";
}

body .main-image {
  border: solid 4px black;
  border-radius: 50%;
}

Is this another way to do it or? Why doesn't it work for me like in the video/what am I doing wrong?

1 Answer

Steven Parker
Steven Parker
208,472 Points

The first example should work as-is. Creating a descendant selector by adding the "body" reference increases the selector's specificity level slightly but is not needed since there is no other CSS targeting the same element.

If you still have trouble, you could make a snapshot of your workspace and post the link to it here so we can replicate the situation precisely.