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 Customizing Colors and Fonts Resize Text

Posted by Shruthi Manas
Shruthi Manas
893 Points

Main.css not working

I'am creating a website and my main.css is not working none of the colors nor the nav elements are working. Please advice Here's my main.css code

/******************* GENERAL *******************/

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

}

a{ text-decoration: none; }

wrapper {

 max-width:940px;
 margin:0 auto;

padding:0 7%; }

logo {

text-align :center; margin :0;

h1{ font-family: 'Changa One',san-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;

} /******************************* HEADER ****************************/

/******************************* NAVIGATION ****************************/

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

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

}

/************************ COLORS ****************************/ / site body */

body{ background-color:#fff; color:#999; }

/* green header*/

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

/* nav backgorund*/ nav{ background:#599a56; } /*logo text */

h1,h2{ color:#fff;} a{ color:#6ab47b; }

/* nav link*/

nav a,nav a:visited { color:#fff; }

/* selected nav link*/

nav a.selected,nav a:hover{ color:#32673f;

}

Shruthi Manas
Shruthi Manas
893 Points

Hi Nicholas,

Here's my html code,

<DOCTYPE! html> <html> <head> <meta chartype="utf-8"> <title>Sri Laven Engineering</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" 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"> <style> footer { color: green; }

    footer{
    background-color: #CCC;
    }

    header{
        background-color: #6699ff;
    }


</style>

</head> <body> <header> <a href="index.html" id="logo"> <h1>Sri Laven Engineering</h1> <h2>S Balaji</h2>

    </a>
<nav>
    <ul>
        <li><a href="index.html">Portfolio</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
</header>
<div id="wrapper">

<section> <ul> <li> <a href="img/Sri_laven/DSC_0061.jpg"> <img src="Sri_laven/DSC_0061.jpg" alt=""> <p>Milling machine</p> </a> </li>

    <li>
        <a href="img/Sri_laven/DSC_0061_1.jpg">
        <img src="Sri_laven/DSC_0061_1.jpg" alt="">
        <p>Drilling machine</p>
        </a>
    </li>

    <li>
        <a href="img/Sri_laven/DSC_6016 copy.jpg.jpg">
        <img src="Sri_laven/DSC_6016 copy.jpg" alt="">
        <p>Drilling machine</p>
        </a>
    </li>

        <li>
            <a href="img/Sri_laven/DSC_6076 copy.jpg.jpg">
            <img src="Sri_laven/DSC_6076 copy.jpg" alt="">
            <p>Drilling machine</p>

    </a>
    </li>
</ul>

</section>

<footer> <a href="http://twitter.com/shruthimanas"><img src="photos/twitter-wrap.png" alt="twitter-logo"></a> <a href="http://facebook.com/shruthimanas@gmail.com"></a><img src="photos/facebook-wrap.png" alt="facebook-logo"> <a href="http://linkedin.com/shruthimanas"></a><img src="photos/linkedin-wrap.png" alt="linkdln-image"> <p>© 2014 Shruthi Manas. </footer> </div> </body> </html>

1 Answer

Nicholas Olsen
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points
Nicholas Olsen
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points

Two things I would look for:

1.) Some of your selectors are not using the proper prefixes. For example, 'logo{}' should probably have a '.' or '#' in front of it depending on whether or not you are using a class or an ID respectively. Same thing with 'wrapper{}'

edit: looking at your markup, I see that 'wrapper' is an ID. So your CSS should be '#wrapper{}'

2.) There may be a problem in your HTML that references your CSS file. The part that says <link href=""> Make sure it is there, there are no misspellings, that you are referencing the right directory, etc.

Shruthi Manas
Shruthi Manas
893 Points

Thank you Nicholas will check and get back if i have more questions. thanks for your time :)

Shruthi Manas
Shruthi Manas
893 Points

My main.css still doesn't seem to be working I've done all the checks everything looks fine..