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

HTML

Posted by Rachael Amarant
Rachael Amarant
1,958 Points

TextWrangler help?

Hello,

I'm trying to test my understanding of HTML by working on a personal project using TextWrangler. It's a new installation so the program is up to date. I have a Macbook pro with OSX. I've currently got my index.html file working however I can't seem to get it to link to my css file. No matter how much I tried to change the code it always stays the same css wise. It's my first website so I'm probably missing something really simple... here's the code:

index.html

<!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <title> Text </title> <link type="text/css" rel="stylesheet.css"> </head> <body> <header> <a href= "index.html"> <h1> Text </h1> </a> <nav> <ul> <li> <a href="index.html"> Portfolio </a></li> <li> <a href="about.html"> About </a></li> <li> <a href="contact.html"> Contact </a></li> </ul> </nav> </header> <section> </section> <footer> <p> © 2015 Text </p> </footer> </body> </html>

stylesheet.css

<style> h1 { color: #00FFFF; } </style>

I'm new to web design and Text Wrangler in particular so I have no idea what to do in order to solve the problem. Please help!

2 Answers

Samuel Glister
Samuel Glister
12,471 Points

Hi Rachael,

As an example I would set a simple directory up like so.

Top file being the name of your project i.e Text then inside this file I would have an additional 2 files, one named img and the other named css.

From here you can then build your site. So in the top directory (Text) you could create your index.html file that would look something like

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
        <link rel="stylesheet" href="css/style.css">
</head>
<body>
        <div class="div1"></div>
</body>
</html>

Now you can add your styling, for the example I would create a file inside the css folder called style.css - this has already been linked to our html markup in the head tag.

.div1 {
     height: 100px;
     width: 100px;
     background-color: blue;
}

This css should create a box that is 100 pixels high by 100 pixels wide and has the color of blue.

This should get you started by I really suggest you head on over to the tracks section of treehouse and take on the challenge of the web design track.

I hope this helps

Samuel Glister
Samuel Glister
12,471 Points
Samuel Glister
Samuel Glister
12,471 Points

Hi Rachael,

Its great to see you are giving this a go yourself! :)

I have made a minor adjustment to your code

<head>
    <meta charset= "utf-8">
    <title> Text </title>
    <link rel="stylesheet" href="css/stylesheet.css">
</head>
<header>
    <a href= "index.html"> 
    <h1> Text </h1> 
    </a> 
    <nav>
        <ul>
            <li> <a href="index.html"> Portfolio </a></li>
            <li> <a href="about.html"> About </a></li>
            <li> <a href="contact.html"> Contact </a></li> 
        </ul>
    </nav>
</header>
<section>
</section> 
<footer>
    <p> &copy; 2015 Text </p>
</footer>

So here i have closed your head tag for you and re-written your stylesheet link assuming you have a css folder in your directory.

I hope this helps

Rachael Amarant
Rachael Amarant
1,958 Points

Thanks, yeah I'm not really sure if I've set up the directory properlly.

Edit: I tested your code and it still won't change to the selected color.