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 trialSean Flanagan
33,235 PointsHow 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?
David Jarrin
Courses Plus Student 11,182 Pointscould you post the code for the html page?
8 Answers
Sean Flanagan
33,235 PointsI 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>©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
15,719 PointsAgain, 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
Courses Plus Student 11,182 PointsIm guessing you need to check your file path of your css files.
Sean Flanagan
33,235 PointsWhen 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
15,719 PointsIt 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
33,235 PointsI'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
15,719 PointsThat "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
33,235 PointsThis 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
15,719 PointsThe snapshot is basically a clone of the entire workspace you have.
Sean Flanagan
33,235 PointsI'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:
Marcus Parsons
15,719 PointsAbsolutely, 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
33,235 PointsExcellent! Are snapshots read-only or can they be edited by others?
Marcus Parsons
15,719 PointsSnapshots 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
33,235 PointsI think I'm starting to understand. So were you able to view my code? I've forked my workspace, by the way.
Sean Flanagan
33,235 PointsI'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 :-)
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsHi 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