Can't get my CSS code to register with my index.html file


#1

Hey guys, I am trying to experiment with web designing but I have ran into trouble. I have made a index.html file that was saved to my folder for the website using notepad++. I have also made another file called ccs file.ccs and saved it to the same folder. However when i open my index.html with google chrome I get just the boring text from index.html and none of the styling i coded for in the CCS file. I have included the standard:

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

However it hasn't seemed to fix the issue. I know i am most likely forgetting something stupid but what am i doing something wrong.

Thanks in advance.


#2

So this is supposed to be the name of you css document.

Also it should be file.css not .ccs


#3

I just found that out before that it should be the name of my document. Now that I have fixed that it still doesn't show my code for CSS.

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	background-color: #f4f4f4;
	}

/*global*/
.container{
	width: 80%;
	margin:auto;
	overflow: hidden;
	}
/*header*/
header{
	background-color: #35424a;
	color: #ffffff;
	padding-top: 30px;
	min-height: 70px;
	border-bottom: #e8491d 3px solid;
	}

header a{
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
	}
	
header ul{
	margin: 0;
	padding: 0;
}

header li{
	float:left;
	display: inline;
	padding-bottom: 0;
	padding-top: 0;
	padding-left: 20px;
	padding-right: 20px;
}

#4

Can I see the updated link?


#5

This is my index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="X and Y">
<title>Project X</title>
<link type="text/css" rel="stylesheet" href="style css.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
	<h1>Project X</h1>
</div>
<nav>
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="services.html">Services</a></li>
	</ul>
</nav>
</div>
</header>
<section id="showcase">'
	<div class="container">
	<h1>Project X</h1>
	<p>Project X allows you to enjoy</p>
</section>
<section id="subscribe">
<div class="container">
<h1>Project X subscription<h1>
<form>
	<input type="email" placeholder="Enter email">
	<button type="Submit"class="button_1">Subscribe</button>
</form>
</div>
</section>

<section id="boxes">
	<div class="container">
	<div class="box">
	<img src="http://rukkle.com/wp-content/uploads/project-x-movie-620X400.jpg">
	<h3>Project X</h3>
	<p>It's Project X</p>
	</div>
	</div>
</section>

<footer>
	<p>Project X Copyright &copy; 2017</p>
</footer>
</body>
</html>

#6

Is this the exact name of your css document?


#7

Yes, i changed it just then to say stylecss.css and changed the saved file to stylecss.css without any success.


#8

Is it located in the same folder as the html document? You may have to write the pathway to the css document.


#9

Yes so i named my folder "project x"

-Then using notepad++ i made a new file and added code, then saved it to the project X file under the name index.html
-Then using notepad++ I made a new file and added code, then saved it to the project X file under the name stylecss.css

Both are located in the same file. I am using windows 10 if that helps.


#10

Just found the reason. I forgot to close one of my divs off. Thanks for the help though.


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.