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 Adding Pages to a Website Style New Pages

Danilio Moreno
Danilio Moreno
929 Points
Posted by Danilio Moreno
Danilio Moreno
929 Points

CSS will not work Styling New Pages (the About page)

this is what i inputted in css:

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

I double checked the html and corrected it Here is what i corrected:

<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">

I forgot the = sign next to class, corrected and saved but work spaces still will not display the photo correctly.

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Danilio;

When you say that it is not displaying it correctly, how is it different from the video?

Ken

Danilio Moreno
Danilio Moreno
929 Points
Danilio Moreno
Danilio Moreno
929 Points

Hi Ken, I just started the Adding New Pages to a website section. I am working on the About page and the CSS portion has no affect on the work spaces page. The picture will not be in a circle as coded. I am gonna go back and use the suggestions to see if I can get it to work. I took the challenge at the end of this section to see if it was my CSS coding and I passed it without problem. So I am guessing I coded something wrong in html or there is a glitch in work spaces.

Danilio Moreno
Danilio Moreno
929 Points
Danilio Moreno
Danilio Moreno
929 Points

Tried the suggestion simple color change on my main css to see if it was working at all. I coded for a orange color and nothing happened. It seems my CSS is not working at all. How do I fix that?

6 Answers

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

In the head of your html, make sure your normalize.css is located above your main.css or style.css or whatever so that your code loads after the normalize.css does. That's a common mistake. Also, double check the format of you photo, it's location, and the path to it. And if the photo is a background image added in css, remember to add the two dots to go up a level in the file path. Hope that helps, good luck, and happy coding.

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

Have you tried using CSS to make a simple and obvious change just to make sure it's working at all? Something like changing the background color of a section will easily let you know that the css file path and link are working correctly.

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Danilio;

Can you post the HTML code for all of your CSS related links on your about.php page? That may give folks some insight as to where and why there is an issue.

Ken

Danilio Moreno
Danilio Moreno
929 Points
Danilio Moreno
Danilio Moreno
929 Points

Here is the related html I used for the about page:

<li><a href="index.html">Portfolio</a><li>
<li><a href="about.html" class="selected">About</a><li>

<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
<h3>About</h3>

I did not include the <p> because those show up just fine. I just do not understand why the CSS is not working.

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

We need the links to any style sheets you have linked in your HTML. They should look similar to:

<link rel="stylesheet" href="css/style.css" type="text/css">

Need to see those to see if you are linking your style sheets correctly and in the proper order.

Ken

Danilio Moreno
Danilio Moreno
929 Points
Danilio Moreno
Danilio Moreno
929 Points 
<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/main.css">

Please note I took the suggestion to go back and change the color of my css code to see if it would have any affect. upon doing so, there was no change in color. So I am assuming my css is not working on work spaces for some reason.

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

Your code for your links look good. Do you have a main.css file in the left column of your workspace that is separate from your html file? Make sure main.css is written exactly as it is in your link, they are case sensative.

The way I have mine formatted is by making a folder in the left column named css which has both my normalize.css and main.css contained inside.