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
mehulsompura
488 PointsWhy cant I see my updated code for CSS in the preview workspace pop up window?
It was working fine before but after I made the CSS code, the launch workspace doesnt update the new code. Is the CSS coding not linking to the main html?
7 Answers
Joseph Perez
25,122 PointsIt's possible that you're not linking your css file in your html file. It should be linked in the head of your html file like this
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
mehulsompura
488 PointsHi. This is what i have: <head> <meta charset="utf-8"> <title>Mehul S. | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="style.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head>
What do i need to change?
Thanks
Zmago Devetak
19,538 PointsHi if you have updated the file style.css and the main.css file have the same ids and classes like the style.css file. The main.css will override these rules and the changes you made will not apply. Let me explain:
- the browser reads line by line you html document and find style.css download it. In that file you have a class .navbar with some attributes.
- then the browser moves forward and hit the main.css download it and if is the case that in this file is declared a .navbar class this class will be used in the dom.
mehulsompura
488 PointsHi. Thanks. I'm using a mac and I don't think the css file is linked correctly to the index.html. This is what i have in the index.html. Please let me know what i need to change?
<title>Mehul S. | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="style.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">
Zmago Devetak
19,538 PointsDo you have your css folder in the same directory like index.html? Try ti put / before css "/css/main.css"
mehulsompura
488 PointsI dont have the css folder in the same directory as the index.html file. I added the '/css/main.css/' line before the other line. see example: <head> <meta charset="utf-8"> <title>Mehul S. | Designer</title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> </head>
I'm not sure why the css code is not linking to the index.html file?
Zmago Devetak
19,538 PointsIs not linking properly because the css folder is not in the same directory as index.html. You can fix this by adding css folder in the same directory as index.html file or link the css folder with absolute path. The first is the eazy one
mehulsompura
488 PointsI put the entire css folder into the 'img' folder (which has the index.html file in it). And it's still not updating. Is there a way to send a screen shot on this community?
This is the code i have for 'index.html' and 'main.css':
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mehul S. | Designer</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Mehul is greatest</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul>
<li>
<a href="img/numbers-1.jpg">
<img src="img/numbers-1.jpg" alt="">
<p>Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-2.jpg">
<img src="img/numbers-2.jpg" alt="">
<p>Playing with blending modes in photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-3.jpg">
<img src="img/numbers-3.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-4.jpg">
<img src="img/numbers-4.jpg" alt="">
<p>The World Is Yours</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://facebook.com"><img src="img/facebook.jpg" alt="facebook logo"></a>
<a href="http://twitter.com"><img src="img/numbers-3.jpg" alt="twitter logo"></a>
<p>© 2015 Mehul S.</p>
</footer>
</div>
</body>
</html>
CSS code:
body { background-color: orange; }
Joseph Perez
25,122 PointsIt might just be the order in which you are linking your css files. Any custom css files should come after the normalize.css file. Your custom styles are probably being overwritten by the other stylesheet.
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
If that isn't it then it's probably just the way in which you are linking your css files. The path you specified for your css files is probably incorrect. Try placing your index.html file into the root of your project along with the css folder. They probably shouldn't be in the img folder considering that folder is only for images. Hopefully that fixes the problem or at least points you in the right direction.
mehulsompura
488 PointsI figured it out. There was another '/' in the path for some reason, so it should read 'css//main.css' Thanks for your help
Zmago Devetak
19,538 PointsHi you have also to put these code :
<meta charset="utf-8">
<title>Mehul S. | Designer</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
in the <head> tag and this code:
<a href="index.html" id="logo">
<h1>Mehul is greatest</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul>
<li>
<a href="img/numbers-1.jpg">
<img src="img/numbers-1.jpg" alt="">
<p>Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-2.jpg">
<img src="img/numbers-2.jpg" alt="">
<p>Playing with blending modes in photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-3.jpg">
<img src="img/numbers-3.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-4.jpg">
<img src="img/numbers-4.jpg" alt="">
<p>The World Is Yours</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://facebook.com"><img src="img/facebook.jpg" alt="facebook logo"></a>
<a href="http://twitter.com"><img src="img/numbers-3.jpg" alt="twitter logo"></a>
<p>© 2015 Mehul S.</p>
</footer>```
in <body> tag and wrap all code except <doctype> in <html> tag. Like these example page:
```<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
@media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p><a href="http://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>```
Logan R
22,989 PointsLogan R
22,989 PointsTry pressing Control + F5. The server may not be sending you the updated CSS code. Control + F5 forces the browser to send a request for a new copy of the CSS.