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

Mel Warhol
PLUS
Mel Warhol
Courses Plus Student 7,859 Points
Posted by Mel Warhol
Mel Warhol
Courses Plus Student 7,859 Points

Adding CSS to a Page

Hi guys

I'm actually following along with this video and I'm having trouble with this area of code

<style type="text/css"> @import 'css/more-styles.css'; </style>

It doesn't work :/..not sure if it's because I'm using Text Wrangler or not. But the code doesn't apply to the page whenever I try to add it (It's all in black when I type it out too...which ,to me, means that the text editor doesn't recognize it?

Help plz!

<code> <!DOCTYPE html>
<html>
<head>
    <title>Adding CSS</title>
    <link rel="stylesheet" href="css/style.css"
    <style type="text/css">
        @import 'css/more-styles.css';
        </style>

</head>
<body style="background-color: #BDD4DE;">
    <h1>Adding CSS to the Page!</h1>
    <p style="font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non      diam justo. Integer accumsan lacus ut quam pulvinar ullamcorper. Proin imperdiet mauris ac lectus blandit adipiscing. Vestibulum placerat mi sit amet odio luctus quis aliquam ante tristique. Praesent sem ligula, rhoncus quis gravida vitae, consequat id odio.</p>
    <p>Etiam eros nisl, pretium nec suscipit ac, gravida quis velit. Phasellus adipiscing ultrices lorem, ut porttitor tellus interdum eu. Fusce auctor, felis vitae adipiscing vulputate, tellus odio venenatis lorem, et pretium lectus justo vitae ipsum. Mauris in dictum dolor. Sed fermentum, dolor nec mollis lobortis, eros augue laoreet tortor, vel cursus neque sem ac diam.</p>
    <h2>Lorem ipsum dolor sit amet</h2>
    <ul>
        <li>Praesent sem ligula rhoncus</li>
        <li>Donec ut ipsum at quam</li>
        <li>Maecenas libero neque accumsan ut</li>
        <li>Donec quis mauris ipsum</li>
</ul>

</body> </html> </code>

1 Answer

Ryan Trimble
Ryan Trimble
15,559 Points
Ryan Trimble
Ryan Trimble
15,559 Points

You have to include the @import feature inside CSS. May sound semi-redundant, but this is a method to link a stylesheet to another stylesheet.

So how would you do that from an HTML? Through an INTERNAL stylesheet.

In your head section of the HTML, set up an internal stylesheet with the style tag. Should look like this:

 <style>
      @import 'style.css'
 </style>

This will link the internal stylesheet created by the style tag to an external CSS file.

Hope this helps!

Mel Warhol
Mel Warhol
Courses Plus Student 7,859 Points
Mel Warhol
Mel Warhol
Courses Plus Student 7,859 Points

Thanks!! also..dumb question - I'm trying to paste my code in the forum post..but I only get text :/ what am i doing wrong?

Ryan Trimble
Ryan Trimble
15,559 Points
Ryan Trimble
Ryan Trimble
15,559 Points

If you look underneath the text box where you type messages in the forum, you should see a message about a "Markdown Cheatsheet" which will explain how to format code for the forum.

For code it is just a matter of adding 4 spaces before the code.

So

_ _ _ _ < c o d e >

becomes

<code>
Mel Warhol
Mel Warhol
Courses Plus Student 7,859 Points
Mel Warhol
Mel Warhol
Courses Plus Student 7,859 Points

thank you..think I got it. I was able to post the code i'm using - it's the same way the video has it laid out, though. Still confused as to why nothing applied :(

Ryan Trimble
Ryan Trimble
15,559 Points
Ryan Trimble
Ryan Trimble
15,559 Points

I think I see the issue now. In your code you have:

<link rel="stylesheet" href="css/style.css"
<style type="text/css">
    @import 'css/more-styles.css';
 </style>

But there seems to be something missing.

There is no close to your link tag. Try this:

<link rel="stylesheet" href="css/style.css" />
<style type="text/css">
    @import 'css/more-styles.css';
 </style>

And see if this helps!

Mel Warhol
Mel Warhol
Courses Plus Student 7,859 Points
Mel Warhol
Mel Warhol
Courses Plus Student 7,859 Points

amazing. that was exactly my problem lol. Two sets of eyes are better than one - Thank you :)