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

CSS CSS Basics (2014) Getting Started with CSS Importing Style Sheets with @import

Styling is not being applied

I am using workspace during the CSS Basics Video Training. I enter the code as the teacher does, but when I choose to display the web site I'm building I only see the initial website…none of my css commands seem to be applied. Even if I code inline style commands, they are not applied either.

Hi Teresa,

If you'll post your code we'll have a better idea about what might be going on. :)

4 Answers

This is my html.index code:

<!DOCTYPE html> <html> <head> <title>Lake Tahoe</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <span>Journey through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header> <p> Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation. </p> <a href="#">Find out more</a> </body> </html>

This is my css code:

@import "import-styles.css";

body { text-align: center; }

h1{ font-size: 72px; color: white; }

header { background-color: orange; }

p { font-size: 20px; }

My hierarchy appears to be set up identically to the teacher's.

Your import "import-styles.css"; line needs to go inside your HTML file, not the style.css, like so:

<title>Lake Tahoe</title>
<link rel="stylesheet" href="css/style.css">
<style>@import "import-styles.css";</style>
<header>...etc

Hope that helps!

I tried your suggestion, but my preview still doesn't work.

Blah, that's my bad - the @import should be in the CSS. (Just watched the full video). I wonder if you've a) saved the changes (just checking! :)) and b) refreshed the preview by closing any open tabs showing it, then relaunching it from the workspace.

I have made snapshots of my code but do not know how to send them to you.

Take a look at the 'Markdown Cheatsheet' below the text box. It'll show you how to embed links and images into your reply.

Check to make sure you're using the correct quotation marks. Sometimes text editors react differently when using copy/paste. If the quotation marks look Italicized in your code, then it may not process properly. You may also want to check the spelling of the css filename; styles or import-style. If they aren't correct, that would also cause a problem.