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

Posted by Emily Larcher
Emily Larcher
220 Points

CSS color issue

I can not get my section color to become the color I would like it to be here is the CSS code

/********************************** 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%; }

h3 { margin: 0 0 1em 0; }

/********************************** HEADING ***********************************/ h1 { margin: 0 auto; padding: 0 auto; }

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

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

h2 { font-family: 'Montserrat Alternates', sans-serif;align-content; font-size: 3em; margin: -5px 0 0; font-weight: normal; }

section{ font-family: 'Vollkorn', serif; Margin: 8px 0; font-size: 1.25em; }

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

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

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/********************************** FOOTER ***********************************/

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

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

/********************************** PAGE: ABOUT ***********************************/

/********************************** PAGE: CONTACT ***********************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

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

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

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

/* nav background on mobile */ nav { background: #E9967A; }

/* logo text / h1 { color: #FF4500; } h2 { color: 000000; } / links */ a { color: #6ab47b; }

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

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; } section{ color:#800000; }

And here is the HTML code

<!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <title>Wilde Web Design</title> <link rel ="stylesheet" href = "css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Philosopher:400italic|Montserrat+Alternates:700|Cinzel:900|Vollkorn:400italic' rel='stylesheet' type='text/css'> <link rel ="stylesheet" href = "css/main.css">

</head> <body> <header> <a href="index.html" id = "logo"> <h1>Emily</h1> <h2>Larcher</h2>
</a> 

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




    <section>
          <ul>
            <style>
            section {
            color: green;
              }
              </style>    
              <p>Hello and welcome to my website!</p>

            </ul>
        </section>  
         <footer>    
   <p>&copy; Emily Larcher</p>
 </footer>
 </div>
  </body>

2 Answers

Artemis Roditi
Artemis Roditi
1,645 Points

Hello Emily,

there are 3 ways you can add a color property to your section tag.

  1. You can add the style inside the section tag like this: 

    <section style="color: green"> blah blah </section>

    (this way though is not considered a good practise).

  2. You can add an internal style sheet before the closing </head> tag like this:

    <head> blah blah
 <style>section {color: green;}</style>
</head>

    (it's considered ok for small one page websites with not much style needed)

  3. You can type in your css: 

    section {color: green;}

    (best practise)

Watch out though, because you have set a color for your section twice! There's a: "section{ color:#800000; }" in the last line of your css and a (wrong) inline style: "<style> section {color: green;} </style>" in your html.

In addition, you can check w3schools.com or CSS foundations course on Treehouse.

Also, If you trying to give a specific color to the background of your section, you should use the "background-color" property instead of the "color" property.

Hope this helps.

Emily Larcher
Emily Larcher
220 Points
Emily Larcher
Emily Larcher
220 Points

Thanks you guys I got it working!