Why isn’t my style.css making changes to index.html?
Both files validate perfectly.
Folder set up: site > index.html, style.css.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>new site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/scripts.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="status">
<a href="#"><img src="img/status.png" alt="Currently available for work" /></a>
</div><!-- end status -->
<nav>
<ul>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1><a href="#"><img src="img/banner.png" alt="Return to the homepage" /></a></h1>
<div id="blurb">
<p>blah blah blah lorem ipsum blah blah</p>
</div><!-- end blurb -->
</header>
<div class="services">
<ul>
<li><h2>Design 1</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
<li><h2>Design 2</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
<li><h2>Design 3</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
<li><h2>Design 4</h2><p>Nulla et diam risus. Praesent vestibulum augue non purus tincidunt placerat. Sed in orci leo. Duis dignissim nibh vitae lacus placerat et posuere</p></li>
</ul>
</div><!-- end services -->
<div class="recent">
<div id="recent-work">
</div><!-- end recent-work -->
<div id="recent-blog">
</div><!-- end recent-blog -->
</div><!-- end recent -->
</div><!-- end container -->
</body>
</html>
style.css
/* Reset */
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li
fieldset, form, label {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
background: url(img/background.png) repeat;
font-family: alexandriaflf-bold-webfont,
Constantia,
"Lucida Bright",
"Bitstream Vera Serif",
"Liberation Serif",
serif;
}
ol, ul {
list-style-type: none;
}
/* Type */
@font-face {
font-family: alexandriaflf-bold-webfont;
src: url('type/alexandriaflf-bold-webfont.eot');
src: url('type/alexandriaflf-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('type/alexandriaflf-bold-webfont.woff') format('woff'),
url('type/alexandriaflf-bold-webfont.ttf') format('truetype'),
url('type/alexandriaflf-bold-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: alexandriaflf-bolditalic-webfont;
src: url('type/alexandriaflf-bolditalic-webfont.eot');
src: url('type/alexandriaflf-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
url('type/alexandriaflf-bolditalic-webfont.woff') format('woff'),
url('type/alexandriaflf-bolditalic-webfont.ttf') format('truetype'),
url('type/alexandriaflf-bolditalic-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: nevis-webfont;
src: url('type/nevis-webfont.eot');
src: url('type/nevis-webfont.eot?#iefix') format('embedded-opentype'),
url('type/nevis-webfont.woff') format('woff'),
url('type/nevis-webfont.ttf') format('truetype'),
url('type/nevis-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: nevis-webfont;
font-size: 160%;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
}
h2 {
font-size: 80%;
font-weight: normal;
}
h3 {
font-size: 80%;
font-weight: bold;
}
p {
font-size: 80%;
}
a {
color: #202020;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Based on your markup and CSS, the folder you’re developing in should have these folders and files in them. Does it?
If your stylesheet is not being applied, it’s either that you called it incorrectly (no, your link tag is fine) or the CSS syntax is bad (no, looks okay) or the file is not where you are declaring it should be (bad path). Rarer situations might be: you’ve disabled stylesheets and forgot to reenable; one or both of the files has some kind of encoding error or a stray bad character that makes it corrupt.
EDIT
I’ve arranged your index.html and style.css as you have described and this is what I see. The styles apply. In Chrome Developer Tools you’ll see the
h2is highlighted and the specified styles are applying. At the minimum, I would expect you to see this. If you don’t see this, you have something either very wrong with your environment or you’re not explaining the situation accurately.