How to add CSS to my HTML code on Notepad++

html css web notepad++

38,861

Solution 1

To apply css you have to put css under tag or you can use external stylesheet..Read more here

Please check this example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
    nav div 
    {
        display: inline;
        text-align: center;
        width: 18%;
        padding: 5px;
    }

    p
    {
        text-transform:none;    
        font-size: 20px;
        color: black;
        font-family: "proxima-nova";
        letter-spacing:1px;
        text-align: left;
    }
</style>
</head>

<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>

You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)

Hope this will help or let me know if there is any confusion or issue..ty

Solution 2

Please find your updated code here, This is how you should add/write CSS to HTML :

I would suggest you to move your <style> tag to <head> area.

<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">

 <style type="text/css" >
//here is a snip of my css code
 @charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}

p
{

text-transform:none;    
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;


}
  </style>
</head>



<body>
<h1 style= "text-align:center; color: black;"> Nikki  </h1>
<br>

</body>
</html>

38,861

Author by

Nikki beeeeeeeeeez

Updated on April 18, 2020

Comments

Nikki beeeeeeeeeez about 4 years

So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?

Here is a snip of my html code:

<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki  </h1>
<br></br>

//here is a snip of my css code
 @charset "utf-8";
/* CSS Document */
nav div {
    display: inline;
    text-align: center;
    width: 18%;
    padding: 5px;
}

p
{
    text-transform:none;    
    font-size: 20px;
    color: black;
    font-family: "proxima-nova";
    letter-spacing:1px;
    text-align: left;
}

Leo the lion almost 9 years

show us your code and use css code under <style> tag and html code under <body> tag..for more info read from w3schools.com

Leo the lion almost 9 years

this should be comment not the answer..go and read how to give answer before posting any answer which is comment..
Vasimkhan almost 9 years

@NikkiBee, Can you please create a code snippet and add your code to that, so that I can check what you are trying to achieve, As in your code you have create style for "nav div" but in HTML markup you have not added any nav & div tags ?
Nikki beeeeeeeeeez almost 9 years

it still doesn't work:( When I launch it on chrome all I see is my code.I dont see my content(i used the exact code you gave me). I think I will just use dreamweaver it makes more sense to me. Thank you for helping. I really really appreciate it!
Leo the lion almost 9 years

no its not issue with dreamweaver..even if you will copy my code in notepad and save with test.html and open then it will work..what extension you are using while saving?
Nikki beeeeeeeeeez almost 9 years

omg wow I was in .txt. Silly me. I changed it to .html and it works like a charm. YOU ARE AWESOME thanks again:)
Leo the lion almost 9 years

@Vasimkhan I think issue is with extension..might be she/he is not saving file with .html that's why she is getting issue..i have noticed her now waiting for reply..
Leo the lion almost 9 years

Glad i could help you...please upvote my answer and accept as answer..thank you..
Vasimkhan almost 9 years

@ Leo, She has confirmed that now!!
Nikki beeeeeeeeeez almost 9 years

it says i need 15 reputations in order to do that :/
Leo the lion almost 9 years

np..but if you have any question..ask here we will happy to help..:)