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!

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 not being implemented

Could someone please explain me why my css isnt working. I am trying to style the html but nothing is being applied. Not even the pictures seem to appear. Below is the head portion of my code. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>International Students Development Association | IDSA</title> <link rel="stylesheet' href= 'css/main.css'>
</head>

Dustin Armstrong
Dustin Armstrong
8,430 Points

Bilal, If your img is not showing up and you have the style code used below posted by Jason Montoya included in your document, perhaps your img tag is missing something or if you are hosting your site via amazon, you might need to check the img filename. I have found that it is case sensitive.

7 Answers

Jason Montoya
Jason Montoya
6,550 Points

Bilal,

Sorry my complete code didn't get posted. Not sure why it didn't. Let's try again. (note...even though I have my styles applied in the header, it's better practice to have them in a separate CSS file that would be linked to from the header)

    <style>
        img{
            width: 100%;
        }
    </style>
Jason Montoya
Jason Montoya
6,550 Points

I made a jsfiddle for you to view. Hopefully the link works.

http://jsfiddle.net/jacethelefty/X5DUM/

christopher smith
christopher smith
5,831 Points

woops forget my comment. Thought it was Bilal posting his code. This works here ^

Jason Montoya
Jason Montoya
6,550 Points

Bilal, Unfortunately, without more information or a code sample, forum members won't be able to help you out any further. Start out with this basic HTML5 framework and you should be golden from here on out.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML 5 Template</title> <style> img{ width: 100%; } </style> </head> <body>
<img src="somerandomfilename.jpg" />
</body> </html>


Hope this helps. Cheers

what does the following code mean? coz Nick taught us to use something else <!DOCTYPE html> HTML 5 Template img{ width: 100%; }

christopher smith
christopher smith
5,831 Points

I think your code was cut off or something, but do you link your CSS in the head? I put an example below. If you linked it, then I'd double check the link to make sure it's pointing to the right directory. When my CSS isn't working for me, I like to troubleshoot it sometimes by viewing my page source in the browser and clicking the link for my stylesheet to see where it goes.

Darn, I don't know how to post code. Here's a link for examples of the head on W3. http://www.w3.org/community/webed/wiki/The_HTML_head_element

how do I share my code with someone so that they could help me out?

christopher smith
christopher smith
5,831 Points

I've seen people use a Fiddle for that before. If you have a link for the site you can post that too.

http://jsfiddle.net/

okay I will deal with the image problem when I have the time. but now could you tell me why I would use the image max-width to be 100%? I know this implies that the image would be 100& of its parent container but what if I dont want this. What I am trying to do is that the image that I am trying to put is the logo for the company. and so I want the image of the logo to be on the top left of the webpage but I dont want the width of it to be more than 25% of the page size. so should I still use max-width= 100% or what should I do?