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 The Selectors Solution

Posted by Peter Hardcastle
Peter Hardcastle
977 Points

Okay, I could not get a couple of these to work, and according to the video I was doing them correctly.

First, giving the "span" a class and reducing its font size. I sued the following, which should have worked.

.footerText { font-size: 10px: }

The second one was giving the image an ID and changing its width. This is what I used, but again, nothing changed.

ladyBooks {

width: 100px; }

Am I missing something here?

Also, on changing the background of the submit button when active, and giving the text field a blue border upon focus, I used the following and it seemed to work. Is there a problem with how I did it, compared to how it was done in the video?

input:active { background-color: pink; }

input:focus { border: solid blue 3px; }

Thank you for any help you can offer in this.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

To make posted code readable, always use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

To be able to confirm the function of the CSS, you'd need to also post the HTML it works with.

To share your entire project without doing any pasting, you can make a snapshot of your workspace and post the link to it here.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

In the unformatted code, the "#" symbol made the text larger instead of being shown.

Also, a "#" symbol is just a "pound sign" or "hash". A "hashtag" is "a word or phrase preceded by the symbol "#" that classifies or categorizes the accompanying text". That term is only appropriate to decribe message identifiers on social media, it's not used in programming.

2 Answers

Peter Hardcastle
Peter Hardcastle
977 Points
Peter Hardcastle
Peter Hardcastle
977 Points

I apologize for not knowing how to properly format the question. I am new here. Sorry, it took so long for me to get back to this. I was able to take a snapshot of the workspace, which should help you see what I was seeing.

Here's the link: https://w.trhou.se/otasiwszb8

Thank you!

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

The problem with the footer font size is the wrong punctuation:

.footerText {
  font-size: 10px:  /* <-- the final colon should be a semicolon instead */
}

The image width does work. Are you sure you added the ID to the correct image? The ID name is "ladyBooks" but it is on the Bookworm logo image.

And the problem with the color changes is the rule order. an ":active" rule must come after a ":focus" rule.