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 Michael Matzner
Michael Matzner
12,651 Points

cant link html and css

I'm having trouble linking my css with all of my html files. Any advice or insight would be highly appreciated.

6 Answers

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points 
<!DOCTYPE html>
<html>
 <head>
    <title> POSH|HOME</title>
    <link rel="stylesheet" href="poshhomework/css/main.css">
    <link rel="stylesheet" href="poshhomework/css/responsive.css">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
 </head>
 <body>
    <header class="main-header">
      <span class="title">POSH|HOME</span>
      <h1 class= "sub-header">Classic Style|Modern Sensibility</h1>
       <nav>
        <ul>
          <li class="page"><a href="index.html">POSH|HOME</a></li>
          <li class="page"><a href="about.html">ABOUT</a></li>
          <li class="page"><a href= "photog.html">PHOTOGALLERY</a></li>
Michael Matzner
Michael Matzner
12,651 Points

This code should be illustrated on every page of the website. However when I created my photogallery.html page and pasted this code. It didnt read any of the css at all. I'm very new to this whole process. So any advice would be great thanks. This is some of the css related to that code.

*{
    box-sizing: border-box;

}

.main-header {
  background: url('../img/11951919_559204634231957_7620076432131444735_n.jpg') no-repeat center;
  background-size: cover;
  margin: center;
  max-height: 940px;
  padding-top: 170px;
  text-align: center;
  max-width: 940px;

}

.title {
  color: white;
  font-size: 3.625rem; /* 26px/16px */
  letter-spacing: .065em;
  padding: 0.5rem;
  float: center;
  padding: 20px 20px;
  text-align: center;

}

.page{
    float: left;
    display: inline-block;
    font-size: 1.25em;
    letter-spacing: normal;
    text-decoration: none;
    list-style: none;
    padding: 10px;
    margin: 15px;
Jeff Kinley
Jeff Kinley
21,207 Points
Jeff Kinley
Jeff Kinley
21,207 Points

Hi Michael,

You need to make sure that the links to your CSS file are correct. Here you are using relative; not absolute paths. Are you sure these are the correct paths to the file?

I believe if your html document is in the directory "poshhomework" and you have your CSS files in a "css" directory then the link in your CSS should probably be:

<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/responsive.css">

Where are you developing this? More info might help us figure it out.

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points

ive been using sublime text to write everything. I have a file folder on my desktop called "poshhomework" in the folder i have a "css" folder(with my css file) "html" folder(with all of my html files) an "img" folder(with all my img files). I tried what you recommended above and that took away all of my css styling on every page.

Jeff Kinley
Jeff Kinley
21,207 Points
Jeff Kinley
Jeff Kinley
21,207 Points

Ok,

I'd probably move your html files out of the html folder and just leave them in the root directory, "poshhomework". This seems to be the typical way we organize our files.

Jeff

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points

thanks for the insight. im not really sure what my issue is now. ive grouped both html and css in the poshhomework folder with no sub folder and now none of my css is working. Im using the free copy of sublime text 2 maybe that has something to do with it. my experience level is extremely novice but this issue is driving me mad.

Jeff Kinley
Jeff Kinley
21,207 Points

I was assuming you would keep the css subdirectory, but remove the html subdirectory. Your file structure needs to look something like this:

poshhomework
  - home.html
  - about.html
  - css
    - main.css
    - responsive.css

or, if you want to remove all subdirectories you need to change your links like this:

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="responsive.css">

because you have removed the css folder.

Michael Matzner
Michael Matzner
12,651 Points
Michael Matzner
Michael Matzner
12,651 Points

J thanks so much bro. i was over here driving myself insane. Thanks very much for the help. I really appreciate it.