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 Ally Hodges
Ally Hodges
3,949 Points

Beginning HTML: "Nunito" font works in the 'Normalize' css, but not in the 'style'css for me...

Hello!!

I'm new here! I have a small issue with the beginning html vids.

So, I'm on the CSS part, and I'm following along with the videos with Sublime Text.

The video said to add the google code for the font "Nunito" in the html and to the "Style.css" I did that, but my font was not changed to Nunito, it kept being a sans-serif.

I was confused since it showed that it worked in the video but not for me. I then looked at the "Normalize.css" and saw that the font-family for the entire html document was in sans-serif. I changed it to "Nunito" to see if that would work, and it did!!!

I'm guessing that it worked for two reasons, it affected the entire html document, not just the body, and "Normalize.css" came first before the "Style.css".......is this true? Can anyone confirm this for me? And can anyone answer why it didn't work for me to follow the video completely?

Thanks! Ally

Ally Hodges
Ally Hodges
3,949 Points

It is also the same with the color. I can only control the css inside "normalize.css", NOT "style.css". Right now I can't do anything with "style.css".

Thanks, Ally

Mildred Garcia
Mildred Garcia
3,362 Points

Did you download the Nunito file from Google? Remember that you are using a family font if your computer doesn't have that font is will go to the next one on the list.

Ally Hodges
Ally Hodges
3,949 Points

Hey Mildred,

When watching the video, you don't need to download it, it is provided through a link that you put in the header of the html like a .css file.

<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

I did double check though. I could be wrong. I actually did finally get the font-family to work, but I can't get the colors and background to work now with the "style.css"....

Thanks!

Mildred Garcia
Mildred Garcia
3,362 Points

Check the name of the file in which you save the document.

2 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

Ensure style.css is inside the css directory because you mentioned that nothing in that file is being displayed as it meant to.

You are going to want to have the order of your link tags for css in the head of index.html in the following order (as explained in the Fonts and Colors video at 2:35):

<link href="http://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

I looked over your css code you posted and saw that you are missing a colon (:) between .btn and hover for .btn:hover { } so that will cause an issue.

You should be able to get some more information from the Developer Tools within your browser. For example, you could see if style.css is even loaded. If it's not then you have a path issue.

Ally Hodges
Ally Hodges
3,949 Points

Sean,

Thanks so much for your help. I think it was the path issue. I went into the sublime text and sometimes my style.css would have all the code and sometimes it wouldn't have it. I really can't say what the issue was, but I saved over it, and that seemed to do the trick. Maybe it was because I initially saved the file on the desktop and then moved it to the folder rather than saving into the folder itself.

And my hover now works too.

Thanks so much! :)

Best, Ally

Twiz T
Twiz T
12,588 Points
Twiz T
Twiz T
12,588 Points

Can you post all the files you're working with?

-twiz

Ally Hodges
Ally Hodges
3,949 Points

All the files that I'm working with are the ones downloaded for the "Smells Like Bakin'" html files here on TreeHouse.

I don't know how to really post them...I can post the code, I'm copying everything straight from the videos.

This is everything that I have in my "style.css" file right now:

body { font-family: "Nunito", sans-serif; color: #FAF3BC; background: #420600 url('img/bg-texture.jpg') repeat; }

a { color: #4FB69F; text-decoration: none; }

h1 { font-size: 1.750em; letter-spacing: -1.5px; }

h2 { font-size: 1.500em; color: #B4C34F; }

.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 100px 0px; border-radius: 25px; text-transform: uppercase; }

.btn hover { background-color: #4CC4A7; }

ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }

ul.nav li { float: left; margin-right: 40px;

}

ul.nav li a { color: #FAF3BC;

}

intro {

margin: 50px 0 75px 0;

}

And I places it at the top of the html document. I got rid of the "normalize.css" because it was overriding everything. The CSS does not work...

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Smells Like Bakin' Cupcake Company</title>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>