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 Getting Started with CSS Adding CSS to a Page

Sean Flanagan
Sean Flanagan
33,234 Points

Importing

Hi.

I've tried importing the more-styles.css file into my HTML but it's cancelled out the h1 colour and background colour and it doesn't work.

<!DOCTYPE html>
<html>
<head>
    <title>Adding CSS</title>
    <link rel="stylesheet" href="C:\Users\user\Downloads\adding-css\css_foundations\css_foundations_style.css">
    <style type="text/css">
        @import 'C:\Libraries\Documents\css_foundations\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>
h1 {
    color: white;
    background-color: #E14607;
}

h2 {
    color: steelblue;
    padding-bottom: 10px;
    border-bottom: 2px dotted;
}

ul {
    color: white;
    background-color: steelblue;
}

Although I've completed 2 HTML courses, this is my first CSS course. I seem to be better with absolute paths than I am with relative paths. Any help would be appreciated.

1 Answer

Cesar Guerrero
Cesar Guerrero
11,190 Points

Remember when linking css files into a html page, whatever gets loaded last will overwrite the css style on whats in the first one for that element. Also, it is best to just use the <link> html element to include any css file you want linked to the page.