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
Bilal Junaidy
1,775 PointsCss 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>
7 Answers
Jason Montoya
6,550 PointsBilal,
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
6,550 PointsI made a jsfiddle for you to view. Hopefully the link works.
christopher smith
5,831 Pointswoops forget my comment. Thought it was Bilal posting his code. This works here ^
Jason Montoya
6,550 PointsBilal, 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
Bilal Junaidy
1,775 Pointswhat does the following code mean? coz Nick taught us to use something else <!DOCTYPE html> HTML 5 Template img{ width: 100%; }
christopher smith
5,831 PointsI 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
Bilal Junaidy
1,775 Pointshow do I share my code with someone so that they could help me out?
christopher smith
5,831 PointsI've seen people use a Fiddle for that before. If you have a link for the site you can post that too.
Bilal Junaidy
1,775 Pointsokay 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?
Dustin Armstrong
8,430 PointsDustin Armstrong
8,430 PointsBilal, 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.