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 Alexios Mantzarlis
Alexios Mantzarlis
2,132 Points

CSS isn't being applied to about.html

I've followed the video for "Add a New page" closely and was able to make the about page of the website work fine, but any css changes made (the border-radius:100%.

I think there may be a bug/mistake in the file directory, as my about.html file appears just over the index.html file in the directory while in the video I see it appears right in the top just under the "How to Make a Website" folder. I have tried dragging it up but it won't change.

Help please!

Amber Cookman
Amber Cookman
12,662 Points

Could you please post the HTML and CSS you are using so it can be perused for bugs/glitches? Thank you!

Alexios Mantzarlis
Alexios Mantzarlis
2,132 Points

my about.html code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Alexios Mantzarlis | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Alexios Mantzarlis</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="Images/Alex.jpg" alt="Photograph of Alexios Mantzarlis" class="profile-photo"> <h3>About</h3> <p>This is Alex. I'm trying to learn how to design websites with Treehouse. Fact-checker at Pagella Politica and FactCheckEU</p> <p>If you'd like to follow me on Twitter my username is <a href= "http://twitter.com/mantzarlis">@Mantzarlis</a></p> </section> <footer> <a href="http://twitter.com/mantzarlis"><img src="Images/twitter-wrap.png" alt="Twitter Logo" class:"social-icon"></a> <img src="Images/facebook-wrap.png" alt="Facebook Logo"class:"social-icon"> <p>© 2014 Alexios Mantzarlis.</p> </footer> </div> </body> </html>

Alexios Mantzarlis
Alexios Mantzarlis
2,132 Points

My css file - thanks a lot Amber!

/******************** GENERAL *********************/

body { font-family: 'Open Sans', sans serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/******************** HEADING *********************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/******************** NAVIGATION *********************/

nav { text-align:center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/******************** FOOTER *********************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/******************** PAGE PORTFOLIO *********************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/******************** PAGE: ABOUT *********************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/******************** COLORS *********************/

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

3 Answers

Frank Friberg
Frank Friberg
7,704 Points

Can you post your file structure? If the about.html is in another folder than index.html you have to go one step back before linking it to the css. Example: about.html is in sub-folder "pages" but index.html is in root. To link it to the css the code needs to be: 

<link rel="stylesheet" href="../css/main.css">
Alexios Mantzarlis
Alexios Mantzarlis
2,132 Points

Sure, thanks! I'm not quite sure how to do it in a way that isn't as inelegant as this but here goes: [] How to make a website

[] css > main.css > normalize.css [] images about.html index.html

Frank Friberg
Frank Friberg
7,704 Points

I found your problem, you have forgotten a few key tags in your markup. You need to include the html, header and body tag for the browser to read the document properly. Copy and paste the code down below and see if it works:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Alexios Mantzarlis | Photographer</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <header>
    <a href="index.html" id="logo">
      <h1>Alexios Mantzarlis</h1>
      <h2>Photographer</h2>
    </a>
    <nav>
      <ul>
        <li><a href="index.html">Portfolio</a></li>
        <li><a href="about.html" class="selected">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <div id="wrapper">
    <section>
      <img src="Images/Alex.jpg" alt="Photograph of Alexios Mantzarlis" class="profile-photo">
      <h3>About</h3>
      <p>This is Alex. I'm trying to learn how to design websites with Treehouse. Fact-checker at Pagella Politica and FactCheckEU</p>
      <p>If you'd like to follow me on Twitter my username is <a href= "http://twitter.com/mantzarlis">@Mantzarlis</a></p>
    </section>
    <footer>
      <a href="http://twitter.com/mantzarlis"><img src="Images/twitter-wrap.png" alt="Twitter Logo" class:"social-icon"></a>
      <img src="Images/facebook-wrap.png" alt="Facebook Logo"class:"social-icon">
      <p>&copy; 2014 Alexios Mantzarlis.</p>
    </footer>
  </div>
</body>
</html>
Alexios Mantzarlis
Alexios Mantzarlis
2,132 Points

that was it! thanks a million!

Frank Friberg
Frank Friberg
7,704 Points

A million bucks? Thanks, I could really use that ;)

Amber Cookman
Amber Cookman
12,662 Points
Amber Cookman
Amber Cookman
12,662 Points

Ok, your linking looks right for the situation so let's move into some double-checking.

Do you have the main.css file in a folder named CSS? And if so, is that folder within the same folder as your about.html file?

(Sometimes I forget to put my css file in a folder named CSS, even though I will always set up my files to link that way.)

Alexios Mantzarlis
Alexios Mantzarlis
2,132 Points

yup! the main.css is in a folder called "css", inside the folder "How to Make a Website" both my index.html and my about.html are in the general directory

jennetted
jennetted
5,906 Points
jennetted
jennetted
5,906 Points

Make sure your CSS file is linked to your about.html file. This should be in the <head> section of your about.html file and it would follow the format below, but replace css/main.css with the folder and file name of your css document. 

    <link rel="stylesheet" href="css/main.css">
Alexios Mantzarlis
Alexios Mantzarlis
2,132 Points

thanks! I think it's right though... I have exactly that code...

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