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

Posted by Teresa Wentzel
Teresa Wentzel
2,611 Points

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.

Cena Mayo
Cena Mayo
55,236 Points

Hi Teresa,

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

4 Answers

Teresa Wentzel
Teresa Wentzel
2,611 Points
Teresa Wentzel
Teresa Wentzel
2,611 Points

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.

Cena Mayo
Cena Mayo
55,236 Points
Cena Mayo
Cena Mayo
55,236 Points

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!

Teresa Wentzel
Teresa Wentzel
2,611 Points

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

Cena Mayo
Cena Mayo
55,236 Points

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.

Teresa Wentzel
Teresa Wentzel
2,611 Points
Teresa Wentzel
Teresa Wentzel
2,611 Points

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

Cena Mayo
Cena Mayo
55,236 Points

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

Christopher Sea
Christopher Sea
3,726 Points
Christopher Sea
Christopher Sea
3,726 Points

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.