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 CSS Layout Techniques Display Modes Which CSS Reset Method Should I Use?

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

How do I make the html and the 2 CSS files work side by side?

Hi.

The index.html file works perfectly but when I run the css files in a browser, all I see is the syntax. I'm using Notepad++ as my code editor. How do I make the files work together?

Marcus Parsons
Marcus Parsons
15,719 Points

Hi Sean,

Can you post a snapshot to the workspace you're working on for this question? A snapshot is much cleaner than posting your code here to the forums. If you don't know how to do that, check out this forum post: http://www.teamtreehouse.com/forum/workspace-snapshots

8 Answers

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

I can paste the index.html code here:

<!DOCTYPE html>
<html>
<head>
    <title>Display Modes</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="main-header">
        <h1 class="main-logo"><a href="#">Logo</a></h1>
        <ul class="main-nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </header>
    <div class="primary-content col">
        <h2>Primary Content</h2>
        <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
        <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
    </div>
    <div class="secondary-content col">
        <h3>Secondary Content</h3>
        <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
        <hr>
        <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
    </div>
    <footer class="main-footer">
        <p>&copy;2014 Example Layout</p>
    </footer>
</body>
</html>

And the style.css:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

I've not got as far as normalize.css yet.

Thanks. :-)

Marcus Parsons
Marcus Parsons
15,719 Points

Again, posting a link to your snapshot is better than pasting your code unless you're working on this outside of Workspaces, but what is your problem? What do you mean by you can only see the syntax?

David Jarrin
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

Im guessing you need to check your file path of your css files.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

When I run style.css in a browser, it doesn't come up the same as in the video at about 2 minutes 38 seconds in. I'm not using a workspace but I can if it helps.

Marcus Parsons
Marcus Parsons
15,719 Points

It really does help. I figured since you were following along with the video, you'd be using Workspaces. It's the most convenient tool for helping to get your problems solved on this forum in the most efficient manner.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

I've opened a workspace now. I've opened a new folder in there and put both my html and style.css files in it. Now when I preview, I'm taken to this page:

http://port-80-mompnw06ud.treehouse-app.com/

The title is Index of /. There's a link there that takes me to the HTML page:

http://port-80-mompnw06ud.treehouse-app.com/Which%20CSS%20Method%20Should%20I%20Use/

I don't know if there is a problem, but when I do what the tutor does and it comes up different, I wonder if I'm doing something wrong.

Thanks :-)

Marcus Parsons
Marcus Parsons
15,719 Points

That "port-80" link is a specific link for you to use with your workspace. It is not the link to share your workspace. Here's how to post snapshots: http://www.teamtreehouse.com/forum/workspace-snapshots

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

This is the first time I've used Treehouse's snapshot feature so please bear with me. I've taken 2 shots, one of index.html and the other, style.css.

Marcus Parsons
Marcus Parsons
15,719 Points

The snapshot is basically a clone of the entire workspace you have.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

I'm with you. If I paste the link to a snapshot, will it be on public display for the whole Treehouse community? Here it is:

https://w.trhou.se/6k835y87a6

Marcus Parsons
Marcus Parsons
15,719 Points

Absolutely, which is a good thing. Someone else might be able to spot something that I missed or vice versa. It happens quite a bit :D

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Excellent! Are snapshots read-only or can they be edited by others?

Marcus Parsons
Marcus Parsons
15,719 Points

Snapshots actually are read only, but they can be forked into a workspace, which means that I get a copy of all your code so that it can be manipulated on my end. Your snapshot remains unaffected by any changes I make.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

I think I'm starting to understand. So were you able to view my code? I've forked my workspace, by the way.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

I've just watched this video in its entirety and added normalize.css to the mix and now it's working a treat. Marcus, David, thank you both very much.

Sean :-)