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
Chase Lee
29,275 PointsStylesheet Not Working!
So I had just changed a style in my css and when I refreshed the browser all the styles went away! Can someone please help me!
Here is the link in my html to my stylesheet:
<link rel="stylesheet" href="css/style.css">
Here is a screenshot of my layout.
And here is my styles:
/********************************
Main
********************************/
html{
height: 100%;
font-family: 'BeachType', Papyrus, sans-serif;
}
body{
background-color: #fff;
width: 100%;
height: 100%;
margin: 0 auto;
background: url('../bg.jpg') no-repeat;
background-size: 200% 200%;
}
.wrap{
background-color: white;
width: 65%;
margin: 0 auto;
min-height: 100%;
border-radius: 10px;
}
/********************************
Anchor Tags
********************************/
a:visited{
color: #8DD7E0;
text-decoration: none;
}
a:link{
color: #8DD7E0;
text-decoration: none;
}
a:hover{
color: #1B59E0;
text-decoration: none;
}
a:active{
color: #351BE0;
text-decoration: none;
}
a:focus{
color: #1B59E0;
}
a{
padding: 10px;
margin: 0 0 0 65px;
}
/********************************
Top/Middle
********************************/
h1{
text-align: center;
margin-top: 0;
padding-top: 10px;
}
.margin{
padding: 15px;
}
#pic{
width: 70%;
height: 100%;
margin-left: 15%;
margin-right: 25%;
}
p{
text-align: center;
}
/********************************
Bottom
********************************/
#logo{
width: 200px;
height: 100px;
margin: 0 0 0 100px;
float: left;
}
.verse{
margin: 25px 50px 0 252px;
font-size: 25px;
float: right;
}
/********************************
Clearfixes
********************************/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
/********************************
Media Queries
********************************/
/********** ipad Landscape**********/
@media screen and (max-width: 1024px){
#logo{
display: block;
margin: 0 0 0 235px;
}
.verse{
display: block;
margin: 50px 215px 0 215px;
text-align: center;
font-family:
}
a{
margin: 19px;
}
#margin{
margin: 20px 0 20px 0;
}
}
/********** iphone Landscape **********/
@media screen and (max-width: 480px){
.verse{
margin: 0;
text-align: center;
}
#logo{
margin: 0 0 0 60px;
}
a{
display: block;
margin: 0 0 0 115px;
}
h1{
margin: 0;
}
}
/********** iphone Protrait **********/
@media screen and (max-width: 320px){
a{
margin: 0 0 0 0;
display: block;
text-align: center;
}
}
/********************************
Custom Fonts
********************************/
@font-face{
font-family: "BeachType";
src: url('../Fonts/BEACHTYP.TTF');
}
@font-face{
font-family: ;
src: url('../Fonts');
}
8 Answers
shahardekel
20,306 PointsI ran it in the validator (closed the div and body tags) and fixed the errors. Now it should load the css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>The Gittisarn Kids</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/fittext.js"></script>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="wrap">
</div>
</body>
</html>
James Barnett
39,199 Points@Chase - Your issue is that your CSS isn't valid, according to CSS Lint you have 4 syntax errors in your CSS.
Ankur Jain
4,395 PointsHi there,
It looks like you have two issues (missing attributes), review the ".verse" class (hint: line 137), and the @font-face class (hint: line 191). You'll find both your issues there, let me know if you need additional help :)
Chase Lee
29,275 PointsI changed what you said but it still dosen't work. I went into the console and this is what I found in red:
Viewport argument value "device-width>" for key "width" is invalid, and has been ignored. local.thegittisarnkids.com/:7
Viewport argument key "<title>the" not recognized and ignored. local.thegittisarnkids.com/:7
Uncaught ReferenceError: jQuery is not defined fittext.js:43
(anonymous function)
But thank you for what you've done so far.
shahardekel
20,306 PointsHi Chase,
I googled your first error message, and found a possible solution on this link: possible solution it says one of your meta tags is not written properly.
Chase Lee
29,275 PointsI tried that it doesn't work. But thanks for the try anyway.
shahardekel
20,306 PointsCan you post the code of your html file please?
Chase Lee
29,275 PointsHere is what is in the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html, charset="utf-8">
<meta name="viewport" content="width=device-width>
<title>The Gittisarn Kids</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/fittext.js"></script>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="wrap">
Chase Lee
29,275 PointsHere is what's in the foot:
</div>
</body>
</html>
So I did close the div and body tags.
shahardekel
20,306 PointsI know you did. I was talking about the other parts. Notice that the first meta tag is slightly different - I removed the first double quotes from were wrapping the utf-8 text. Also, I added double quotes that were missing in the second meta tag, to close the content attribute value.
Just use the code I posted above and it should fix the problems.
Chase Lee
29,275 PointsChase Lee
29,275 PointsThank you so much shahar dekel! It worked! And sorry I didn't read your reply correctly.