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 How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

Posted by aaron Leighton
.a{fill-rule:evenodd;}techdegree
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 Points

i dont know what a parent element is or how to use css to fill the images

im not sure where to begin on this one, im not sure we where taught very much at all about parent elements

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

2 Answers

Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

Hi Aaron! There are a couple ways to add style to your image:

1. You don't necessary need to wrap your image with div, but you asked about styling it with CSS, so I would do this 

<div class="myimg">
  <img src="images/image.png">
</div>

Then add to CSS style for your div's class.

.myimg {
     height: 45px;
     width: 45px;
}

2. Or you can style an empty div in your CSS:

.myimg {
     height: 45px;
     width: 45px;
     background-image: url("images/image.png");
}

Hope it helps.

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi Aaron,

A parent element is usually the containing element, with the elements inside being its child or children. In Yulias example above, the 'div' would be the parent and the 'img' being the child.

<div class="myImg">
  <img src="images/image.png">
</div>

Seeing the parent has a class, you can reference the image as a child of the parent. Example css:

.myImg img {
  border: 1px solid red;
  padding: 5px;
}
Huda Yusuf
Huda Yusuf
1,081 Points
Huda Yusuf
Huda Yusuf
1,081 Points

best reply ever I was confused as well but I got it nw thanks