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

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

Posted by Ryan Lachapelle
.a{fill-rule:evenodd;}techdegree
Ryan Lachapelle
Full Stack JavaScript Techdegree Student 2,889 Points

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!

Ryan Lachapelle
.a{fill-rule:evenodd;}techdegree
Ryan Lachapelle
Full Stack JavaScript Techdegree Student 2,889 Points

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
229,771 Points
Steven Parker
Steven Parker
229,771 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.