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 Style the Image Captions

Marc-Adems Dor
Marc-Adems Dor
2,854 Points

Having trouble with styling my gallery in css.

Hi guy, I'm having an issue with my css code where the font-size should be reduced to 0.75em and the color of that font should be gray. But no change was made when I saved and refreshed the page.

this is my code:

```#gallery { margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 }

Hi Mark-Adems,

The opening and closing backticks need to be on their own line when doing a code block.

I can see that you probably have the # in your code. Make sure that there isn't a space between the # and gallery

9 Answers

Hi there, You need to put the # before the 2 gallery declarations because "gallery" is an ID.

#gallery { 
    margin: 0; 
    padding: 0; 
    list-style: none;
}

#gallery li {
    float: left; 
    width: 45%; 
    margin: 2.5%; 
    background-color: #f5f5f5; 
    color: #bdc3c7; 
}

#gallery li a p {
    margin: 0; 
    padding: 5%; 
    font-size: 0.75em; 
    color: #bdc3c7; 
} 

Let me know if it works

The # is probably there. It's being interpreted as an h1 based on markdown syntax. The 2 selectors are in a larger font-size and bold.

This is because the code block isn't properly formatted.

Marc-Adems Dor
Marc-Adems Dor
2,854 Points

I found what I did wrong it was an error in my html code and not my css the anchor elements had mistakes in it.... But thanks a lot for all the help I really appreciate that.

Dave Berning
Dave Berning
17,365 Points

To change the color of links you have to target only the anchor tag. Remove the 'p' in "#gallery li a p" you're basically targeting a paragraph tag inside a link that doesn't exist. If you do have a paragraph tag inside an anchor tag for some reason then remove it because that is semantically incorrect and your code won't be valid. Paragraphs are block level elements and anchors are inline. You can't put a block level element inside an inline level element.

#gallery li a {
             margin: 0;
             padding: 5%;
             font-size: .75em;
             color: #bdc3c7;
}
Valid:
<p><a href="#">This is text that I want to link to something</a></p>
NOT Valid:
<a href="#"><p>This is text that I want to link to something</p></a>

This is wrong. He is doing it correctly he just didn't put hashtag before gallery li and gallery li a p. Css works in multiple ways

Dave Berning
Dave Berning
17,365 Points

I'm not entirely sure without testing it, I just know that you cannot put a paragraph inside an anchor. If he wasn't trying to make the text clickable as a link then yes, it would work because he wouldn't need an anchor tag in the first place. Anchor tags act almost like its own thing entirely when applying CSS to it. If you make a navigation for instance (nav > ul > li > a) you think you can just change the color of the 'li' but you can't. You actually have to go once step further and target the anchor inside the list item.

Dave Berning
Dave Berning
17,365 Points

It's how the browser interprets the code. For example, you can leave out paragraph tags and the browser will read it as text just fine. It does a bit of assuming and can compensate for it, however semantically it is wrong. The W3C will not validate your code without those important paragraph tags. Same goes for putting the paragraphs inside the anchors. The browser will read it just fine but technically it is wrong and invalid code can hurt your SEO efforts. Google discourages the misuse of tags and or lack of tags.

I will give you that a lot of things changed in HTML5. For instance you no longer need " />" at the end of image tags, you can close it with ">" instead. So the whole paragraph in anchor tag thing could be a change in HTML5 and only HTML5. My point is, just because it works doesn't mean it is correct or more efficient. Plus you never know how older browsers will interpret code like that especially Internet Explorer.

Correct and interpreted as intended in the browser
<div>
        <p>This is text.</p>
</div>
Incorrect but still interpreted as intended in the browser
<div>
        This is text.
</div>

That doesn't matter though. You are allowed to use #gallery li a p because that's how it is in the videos because I take notes on everything, because we are selecting the paragraph elements inside the anchor elements which works just fine. Look at what I said above, it describes the simple mistake he made.

Marc-Adems Dor
Marc-Adems Dor
2,854 Points

Ohh but I'm actually following the tutorial video and this is what it told me to do but even tho I'm following it mine doesn't work.

Okay I looked at my own code from that video from months ago, and your missing the # on the gallery li and gallery li a p. You have to put a # because it's "gallery" is an ID.

Marc-Adems Dor
Marc-Adems Dor
2,854 Points

It must be something else because I do have the # in front of the gallery li and gallery li a p.

you also forgot to put a semicolon after the value of the color statement. Look at my example

Ramon Salinas
Ramon Salinas
5,538 Points

I think you're missing a semicolon at the end of this code (after the color) I copied and pasted from your original question

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 } ```

Just told him that 15 minutes ago, you forgot to put the semicolon in the example you put as well.

Dave Berning
Dave Berning
17,365 Points

I understand that I read your comments above. I am not saying you are entirely wrong. Of course a missing # will affect your code and missing semi-colons can cause the code to break. I'm not saying you are wrong for advising to add those characters in his code. I am simply saying, you technically cannot put block level elements inside inline elements. Even though it works doesn't mean that its correct. Writing HTML is all about writing good content using proper tags and nesting tags correctly.

Marc-Adems Dor
Marc-Adems Dor
2,854 Points

I tried your advice and understand why you suggested to remove the p. It does change to color to the gray I wanted but the paragraph and the font stays the same

Dave Berning ,

It's perfectly valid in html5 to have a paragraph inside of a link. This project uses an html5 doctype so it's perfectly fine. The whole point of doing this in this project is so that both the image and its caption will both be wrapped by the link and so you can click on either one.

With html5 there aren't too many restrictions on what you can put inside the a element. One thing you can't put inside is other interactive content. Like form elements or other links.

Dave Berning
Dave Berning
17,365 Points

Jason Anello thanks for the clarification! I just tried it out using the W3C validator and you're right it doesn't matter in the case of HTML5. I had a hunch which I stated in one of my previous comments above.

Hi Mark-Adems,

You should put in the missing semi-colon for the color but I don't believe this is causing your problems since it is the last declaration. If you were missing a semi-colon farther up then it would cause at least some of the property/values pairs to be ignored by the browser.

Also, as mentioned, I don't think the # is your problem assuming you don't have a space right after it.

You say that you have saved and refreshed. Maybe try changing the width of your list items to something bigger so that there's only room for one per row. Save and refresh and see if that change takes effect. Then at least you will know the save/refresh process is working.

Also, see if you can edit your question and fix your code block so it's easier to read. Leave a comment if you do this so we'll know.

Marc-Adems Dor
Marc-Adems Dor
2,854 Points

I've tried everything you said on here and still no result I'm starting to think that the error is in the html code and not the css

Dave Berning
Dave Berning
17,365 Points

Could very well be a tag thats not properly closed, missing quotation mark or, something small like that.