Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Selectors Class and ID Selectors

My css is not showing (or rather applying) when I view it in a browser.

This is my first web page, so I'm following the lessons and now am past the "how to build a website" and into the css lessons. Still not seeing the css translate to my page. Ideas for a reason? How to fix this? Thanks!

12 Answers

Sjors Theuns
Sjors Theuns
6,091 Points

Hi Lee Ann,

this is rather important. If your html document doesn't know where to look for it's css file, it will never style your page.

Like Jason says, add a link to your file like this:

<link rel="stylesheet" href="cssfilename.css">

where cssfilename.css is of course your own name of the file. If the css file is in a separate folder, you also need to specify the folder in your path like so:

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

where css is the name of the folderl

jase richards
jase richards
10,379 Points

That last part about pathing is important and easy to overlook.

Hi Lee Ann, did you make sure to link (include) your css file in your index page between your head tag? e.g., <head> <link href="css/styles.css" rel="stylesheet"> </head>

Cristina I cannot see your code. Use markdown. :-)

sorry..here you go

            <head>
               <link rel="stylesheet" href="css/styles.css">
             </head>
Ingrid Bardales
Ingrid Bardales
10,616 Points

make sure you save after each change also make sure you refresh the same page and not mistankenly reopen from workspace.

I am using Atom text editor at this point and creating my own web page using the css code from the lesson: not workspace. /******* a { text-decoration: none; } .container { width: 740px; margin: auto; } .main-header {height: 110px: color: white; background: royal blue; } .main-content { padding: 20px; background: lightgray; } .base { padding-top: 50px; color: white; text-align: center; font-size; } *******/

Sjors Theuns
Sjors Theuns
6,091 Points

Hi Lee Ann,

if the /******* and *******/ are in fact in your code, you will indeed not see any styling. With these you are commenting out all code in between.

Try removing the /******* and *******/ and try again.

Also, like Nicholas mentioned, try adding three back ticks (```) before and after your code in your replies on the forum to make it more readable.

Edit: I also see your are missing a value on the font-size property (.base element), but this is not causing your initial problem.

The commenting is not in my code.

jase richards
jase richards
10,379 Points

Yeah, like Cristina said show us your html file the issue may be there

Ingrid Bardales
Ingrid Bardales
10,616 Points

Hi Lee Ann i don't see anything wrong with your css maybe there is a typo somewhere in your html.

Sjors Theuns
Sjors Theuns
6,091 Points

What is the name of your css file and how are you adding this file to your html document? Can you again provide some code of this?

Nicholas~ Maybe this is the problem: have not seen how to do this in the lesson yet. If you tell me how to do this I will try adding it. Thx. -Or rather Sjors...

jase richards
jase richards
10,379 Points

Yeah you need a

<.link rel="stylesheet" href="cssfilename.css">

Minus the initial period

Is my css file just "main.css"? Or for the href should I save the css another way, i.e. "my web site"?

Sjors Theuns
Sjors Theuns
6,091 Points

The name of your css file can be anything. When you created (or saved) the file, you needed to specify a name. Use this name in the href property.

Thank you, Sjors.