Creating a website, index.html and style.css not applying changes

HTML-CSS
1

Here is a picture of the website in the browser:

[Album] Imgur

I write my code in Notepad++, save the html file as html.index and the css file in notepad++ and save it as style.css. I use the rel=style.css etc which u will see in the code :slight_smile: The nav bar isnt changing colors and the picture isn’t displaying, even though its in the same folder as the html and css files. Please help big problem.

c o d e

<!DOCTYPE html>
<html>
<head>
<rel="stylesheet" type="text/css" href="style.css"/>
<title>Website</title>
</head>
<body>
<header>
</header>
<div id="header">
	<ul><a name="backtotop"></a>
		<li><a href="index.html">Home</a></li>
		<li><a href="Page2.html">Page2</a></li>
		<li><a href="Page3.html">Page3</a></li>
		<li><a href="Page4.html">Page4</a></li>
		<li><a href="Page5.html">Page5</a></li>
		<li><a href="Page6.html">Page6</a></li>
	</ul>
</div>
		<section class="topbanner">
			<img src="blue-ribbon.jpg" class="banner">
		</section>
<article>

			<section class="firstparagraph">
			<div id="firstpicture">
			<a href="ggasd.jpg" class="dogpic"></a>
				<h1>Welcome to My Website!</h1>
				<p>Ipsum text body black will scaredIpsum text body black will scared
					Ipsum text body black will scaredIpsum text body black will scared
					Ipsum text body black will scaredIpsum text body black will scared
					Ipsum text body black will scaredIpsum text body black will scared
					Ipsum text body black will scared
				</p>
			</section>
			<section class="secondparagraph">
			<div id="secondpara" class="pandapic"
			<a href="haters-gonna.jpg" class="panda"></a>
				<h1>This Site is Awesome</h2>
				<p> Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scaredIpsum 
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				</p>
			</section>
			<section class="thirdparagraph">
			<img src="banner_top.jpg">
				<h1>Welcome to my site, did I say that before?</h1>
				<p>Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				</p>
				<p id="leftimagetext">Blah Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				</p>
					<img src="big_banner.png" class="centerimage">
				<p id="rightimagetext"> Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scared
				</p>
			</section>
			<section class="longbox">
				<h1>Information</h1>
				<p>Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				Ipsum text body black will scaredIpsum text body black will scared
				</p>
			</section>
		</article>
			
	
	<ul>
		<li><a href="#backtotop">BACK TO TOP</a></li>
		<li>2nd PAGE</li>
		<li>3rd PAGE</li>
		<li>4th PAGE</li>
		<li>5TH PAGE</li>
	</ul></footer>

</body>

</html>

css

body {
	margin-left: auto;
	margin-right: auto;
	font-size: 22px;
}

.header {
	background-color: blue;
	color: white;
	width: 100%;
	height: 80px;
	float:left;
}

ul li {
	text-align: center;
}
2

Hi mate!, I saw 2 errors, first your CSS header style should be:

header {
background-color: blue;
color: white;
width: 100%;
height: 80px;
float:left;
}

You have a dot before the word “.header”

2°: In you “Body” section you have opened the and closed before the content.

That should fix the problem. Good luck

3

In your head element the code should be:

<link rel = "stylesheet" type = "text/css" href = "style.css">

This should fix the css problem.

Best of Luck

4

The <header> element does not even contain any childs: it’s empty! Would you mind telling us why? Remember that such tagname has ben originally devised to contain a <nav> element, and therefore being SEO friendly, more than a plain <div>.

Also note that you should call for #header instead .header

Good luck!

5

You are using a class selector .header but the div have no class atribute it has a id <div id="header">. So for the selector for that div it should be #header or simply header for the <header> section that now is empty.

#header {
	background-color: blue;
	color: white;
	width: 100%;
	height: 80px;
	float:left;
}

Looking at your code it have some errors first the way of linking your css

<rel="stylesheet" type="text/css" href="style.css"> it should be
<link rel="stylesheet" type="text/css" href="style.css"> link is the tag for linking the css file

there are also some div tags that dont have a closing tag, like here:

<section class="firstparagraph">
<div id="firstpicture">
	<a href="ggasd.jpg" class="dogpic"></a>
	<h1>Welcome to My Website!</h1>
	<p>Ipsum text body black will scaredIpsum text body black will scared
	  Ipsum text body black will scaredIpsum text body black will scared
	  Ipsum text body black will scaredIpsum text body black will scared
	  Ipsum text body black will scaredIpsum text body black will scared
	  Ipsum text body black will scared
	</p>
</section>

And finally You have a </footer> tag at the end whitout a <footer> tag first