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

Posted by Jae Kim
Jae Kim
597 Points

[SOLVED!]. The changes under #gallery li a p {} made in the video is not being made on my website.

The changes under #gallery li a p {} made in the video is not being made on my website. For example, my letters for the captions under the picture are not reduced in size and the color is still green, not grey as exemplified in the video. Help?

Jae Kim
Jae Kim
597 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jae Kim | Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Jae Kim</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Experimentaiton with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Trying to create an 80's style of glows</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/mrkimaa"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; Jae Kim 2014</p>
      </footer>
    </div>
  </body>
</html>
Jae Kim
Jae Kim
597 Points 
/*********************************************
GENERAL
**********************************************/

body{
  font-family: 'Open Sans', sans-serif; 
}

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

a {
  text-decoration: none; 
}

img {
  max-width: 100%; /*fill the width of the parent container, if the container shrinks, the images will shrink*/
}



/*********************************************
HEADING
**********************************************/

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

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0; 
  font-size: 1.75em; 
  font-weight: normal;
  line-height: 0.8em; 
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal; 
}



/*********************************************
Navigation
**********************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0; 
}



/*********************************************
HEADING
**********************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc; 
}



/*********************************************
PAGE: PORTFOLIO
**********************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none; /*Removes all the bullet points, if there are any*/
}

#gallery li {
  float: left; 
  width: 45%; /*Will only take 45% of the width*/
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7; 
}

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

/*********************************************
COLORS
**********************************************/

/* site body */
body {
  background-color: #fff;  
  color: #999; 
}

/* green header */
header {
 background: #6ab47b;
 border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2{
 color: #fff;  
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
 color: #fff;  
}

/* selected nav link */
nav a.selected, nav a:hover {
 color: #32673f; 
}
Jae Kim
Jae Kim
597 Points

So I decided to delete all of the content in main.css and saved it to see if that would have any effect on the website. It did not. So, I am assuming the problem lies some where within the code that connect the HTML and the CSS? Which is weird since I did not make any changes to my HTML and yesterday, the changes appeared on my website.

Jae Kim
Jae Kim
597 Points

Also, I deleted the entire content of my index.html, and it still made no changes to the website itself. I've tried to change the paragraph content of "experimentation with color and texture" in website by changing it in the HTML; however, none of the changes in HTML made an impact on the website. So I have come to the conclusion that, perhaps, my WorkSpace is bugged?

Jae Kim
Jae Kim
597 Points

Haha. Oh my goodness. I am talking to myself but I got it to work. Instead of clicking the eye on WorkSpace, you must refresh the website instead. I guess I learned the lesson and I hope it helps some other person! If your code in your html or css is not making an influence on your website, make sure you click the refresh button rather than the eye on the workspace.

Elijah Gartin
Elijah Gartin
13,182 Points
Elijah Gartin
Elijah Gartin
13,182 Points

Glad you got it figured out! Apologies for not getting to this earlier.