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

Ryan Lachapelle
Ryan Lachapelle
Full Stack JavaScript Techdegree Student 2,205 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
Ryan Lachapelle
Full Stack JavaScript Techdegree Student 2,205 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
195,560 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.