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
Unsubscribed User
972 PointsAdding a stylesheet to your html file
Why do we use an href attribute instead of a src attribute when linking the normalize.css stylesheet to be used in my html file. My thinking is that we are referring to the relative path that the browser knows where to source the file as opposed to it actively linking to it. Code below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Thania Abrahams | FED</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Thania Abrahams</h1> <h2>Front End Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/thaniabrahams"><img src="img/twitter-wrap.png" alt"Twitter Logo"></a> <a href="http://facebook.com/tye1509"><img src="img/facebook-wrap.png" alt"Facebook Logo"></a> <p>Ā© 2015 Thania Abrahams.</p> </footer> </div> </body> </html>
4 Answers
Jonathan Grieve
Treehouse Moderator 91,254 PointsHi Thania, welcome to Treehouse.
I'm not sure specifically why but it's basically doing the same thing! :-) You're linking to the CSS file relative to the location of your HTML file so the browser is looking for the CSS file from that location
Unsubscribed User
972 PointsThanks Jonathan! Ok well at least am not entirely nuts than :) I was wondering could I ask you another question, it is also to do with css?
Jonathan Grieve
Treehouse Moderator 91,254 PointsPlease do! :)
Don't worry about being driven by the wayside with this stuff. Computers like things done in a very particular way :)
Unsubscribed User
972 PointsHah I want every single thing to make sense to me but i think its hampering my progress so am taking your advice.
Ok so my next question is regarding the images that I have wrapped inside of my div tag (same code as above). I find that my images fall outside of the div tag even though they are wrapped by the div tag. In other words I have explicitly stated that I want the div no larger than said size and I can see this by the background orange color of the wrapper, so why aren't my images conforming to this rule? I thought at first that it was because of the bullet points but it is even the case after I have removed them.
I also thought that perhaps it was because of native browser styling but shouldn't my normalize.css file have taken care of that?
Or is my normalize.css file being more specific about image styling than I am being in my css code? Please tell me if I am winning with my explanation. I basically want to know why my images are not centered inside of my div tag (without bullet points) or flush to the left as normal
Jonathan Grieve
Treehouse Moderator 91,254 PointsIt's an interesting one.
At the moment the images are only as big as they're actual size so they'll only fit that space. You can manipulate the size so that it fits the size of a list item (li) element by using a property called
max-width: 100%
or width: 100%.
Sorry this reply is a little rushed. My old laptop is about to run out of battery. :) good luck. :)
Unsubscribed User
972 PointsNo problem :) and thank you again!