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
Lee Ann VanWinckel
1,480 PointsMy 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
6,091 PointsHi 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
cristinadiaz
13,534 PointsHi 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>
Lee Ann VanWinckel
1,480 PointsCristina I cannot see your code. Use markdown. :-)
cristinadiaz
13,534 Pointssorry..here you go
<head>
<link rel="stylesheet" href="css/styles.css">
</head>
Ingrid Bardales
10,616 Pointsmake sure you save after each change also make sure you refresh the same page and not mistankenly reopen from workspace.
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsCan you copy and paste all of your code, both CSS and HTML? Nest the code between three backticks (`) for formatting.
Lee Ann VanWinckel
1,480 PointsI 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
6,091 PointsHi 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.
Lee Ann VanWinckel
1,480 PointsThe commenting is not in my code.
jase richards
10,379 PointsYeah, like Cristina said show us your html file the issue may be there
Ingrid Bardales
10,616 PointsHi Lee Ann i don't see anything wrong with your css maybe there is a typo somewhere in your html.
Sjors Theuns
6,091 PointsWhat 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?
Lee Ann VanWinckel
1,480 PointsNicholas~ 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
10,379 PointsYeah you need a
<.link rel="stylesheet" href="cssfilename.css">
Minus the initial period
Lee Ann VanWinckel
1,480 PointsIs my css file just "main.css"? Or for the href should I save the css another way, i.e. "my web site"?
Sjors Theuns
6,091 PointsThe 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.
Lee Ann VanWinckel
1,480 PointsThank you, Sjors.
jase richards
10,379 Pointsjase richards
10,379 PointsThat last part about pathing is important and easy to overlook.