How to connect CSS and HTML using notepad++


#1

Hi all, Am trying to create an HTML webpage using notepad++ but when I write css codes and relaunch the browser, nothing happens. I can't see the changes I have made. What could be the problem?How do you connect HTML & CSS using notepad++? Thanks


Replace this line with your code.

#2

The easiest way would be by putting the html and css file in the same directory:

<link rel="stylesheet" href="name_of_stylesheet.css">

make sure the value in href, matches the name of your stylesheet


#3

Hi, thanks.Could you please clarify what you mean by same directory


#4

well, that the html and css file are in the same folder (that the css file is not in a sub directory), but in the same directory as the html file


#5

I actually put them in the same directory like this but no response in browser:

!DOCTYPE html>
<html>
<head><title>My home page</title>
    <style type= "text/css">
 *{ 
  margin:0;
  padding:5px 0;
  
 }
 body{
 font-family:Courier;
 background-color:#69777A;
 font-size:1em;
 
 }
 #header{
 background-color:#DAE5E8;
 height:100px;
 width:100%;
 }
 
.container{
width:960px;
height:auto;
margin: 0 auto;
}

 logoArea{
 width:300px;
 height:100px;
 background-color:white;
 float:left;
 }
 
 #navArea{
 width:660px;
 height:100px;
 float:right;
 }
 
 #nav{
 list-style:none;
 }
 
 #nav a{
 color:white;
 text-decoration:none;
 }
 
 #nav li{
 float:left;
 margin:30px;
 background-color:red;
 padding:8px;
 border:1px solid silver;
 border-radius:5px;
 }
    </style>
</head>

#6

You used an internal stylesheet, could you post your full code? (html an css)


#7

Okay here is the full code:

!DOCTYPE html>
<html>
<head><title>My home page</title>
    <style type= "text/css">
 *{ 
  margin:0;
  padding:5px 0;
  
 }
 body{
 font-family:Courier;
 background-color:#69777A;
 font-size:1em;
 
 }
 #header{
 background-color:#DAE5E8;
 height:100px;
 width:100%;
 }
 
.container{
width:960px;
height:auto;
margin: 0 auto;
}

 logoArea{
 width:300px;
 height:100px;
 background-color:white;
 float:left;
 }
 
 #navArea{
 width:660px;
 height:100px;
 float:right;
 }
 
 #nav{
 list-style:none;
 }
 
 #nav a{
 color:white;
 text-decoration:none;
 }
 
 #nav li{
 float:left;
 margin:30px;
 background-color:red;
 padding:8px;
 border:1px solid silver;
 border-radius:5px;
 }
    </style>
</head>
<body>
<div id="header">
 <div class="container"> 
      <div id="logoArea"></div>
  <div id ="navArea">
     <ul id="nav">
		<a href="#"><li>Home</li></a>
		<a href="#"><li>Tutoring Subjetcs</li></a>
		<a href="#"><li>Tutoring Rates</li></a>
		<a href="#"><li>Our Locations</li></a>
		<a href="#"><li>Testimonials</li></a>
		<a href="#"><li>Blogs</li></a>
	 </ul>
  </div>
</div>
<div id="body"></div>
<div id="footer"></div>
    
</body>
</html>

#8

Apart from a missing # in front of logoArea in css it is fine, you did store it as html file? I ran it locally on my computer, it works fine


#9

I saved it as website1.html.
Are you able to see the color changes? My browser only shows the list. Could the problem be with the way I installed notepad++ in my computer?


#10

Below the field where you enter a name, there is also a field which says:
save as filetype

Did you ensure this was set to all? You enter website1.html all you like, still doesn't mean the file is saved as an actual html file.


#11

Thanks.Actually that's where the problem was.It worked:relieved: