How to connect CSS and HTML using notepad++

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

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.

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

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

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

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>

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

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>

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

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?

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.

1 Like

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