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

Stacy Fabian
Stacy Fabian
2,246 Points
Posted by Stacy Fabian
Stacy Fabian
2,246 Points

CSS won't apply to index.html

I must missing something, but I can't get my CSS styling to apply to my main html doc "index.html". They currently sit in the same folder. Below is my whole index.html page. (It's super simple because I'm just starting out) Can you spot what I'm doing wrong?

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Family Fun Fest 2014 | Michigan</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>

Thanks for the help!

7 Answers

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

Try removing the "/" at the end of the link tag. Everything else looks good to me unless you misnamed your file.

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

If you post the full HTML and CSS maybe I can help with that too!

Stacy Fabian
Stacy Fabian
2,246 Points
Stacy Fabian
Stacy Fabian
2,246 Points

Thanks Ricky. That got the hover and visited to work, but I still can't get my header and menu styling to work. I must be doing something else wrong.

Back to the drawing board. :(

Stacy Fabian
Stacy Fabian
2,246 Points
Stacy Fabian
Stacy Fabian
2,246 Points

So I tried that in the original post and somehow it didn't work. I'll try this one...

Here's the HTML..

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Fabian Family Fun Fest 2014 | Michigan</title>
        <script src="../JavaScript/myscript.js"></script>
        <link type="text/css" rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <header id="menu">
            <nav>
                <a href="http://www.vrbo.com/505681#" class="menu_item">Rental Home Listing</a> |
                <a href="details.html" class="menu_item">Weekend Details</a> *
                <a href="itineraries.html" class="menu_item">Travel Itineraries</a> |
                <a href="mealselection_form.html" class="menu_item">Meal Selection Form</a> *
            </nav>
        </header>
        <div id="left">
            <h1 id="welcome_paragraph">Welcome to the Fabian Family Fun Fest 2014 website.</h1>
            <p>Here we're going to include all the details of the event and eventually share photos.</p>
            <div id="button">
                <a href="http://www.vrbo.com/505681#">Click here to link to the rental home.</a>
            </div>
        </div>
    </body>
</html>
Stacy Fabian
Stacy Fabian
2,246 Points
Stacy Fabian
Stacy Fabian
2,246 Points

Sweet success! Here's the CSS... I'm sure it's my CSS since I'm just learning all this. Thanks for the help!! (I know the coloring is horrible. Was just trying easy and obvious colors while testing it all out.)

/* Nav Menu Styling */

#menu {
    background-color: #000;
    color: #e60000;
}

.menu_item {
    font-style: cursive;
    color: #fff;
    font-weight: bold;
}

a:hover {
    color: #e60000;
    text-decoration: none;
}

a:visited {
    color: green;
}
Stacy Fabian
Stacy Fabian
2,246 Points
Stacy Fabian
Stacy Fabian
2,246 Points

Ugh. Nevermind. User error. Thanks for the help Ricky!

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

Glad you figured it out! Sorry I couldn't respond sooner different time zones and all that jazz.