Having trouble with adding CSS document into HTML document

Elizabeth Davis · Feb 4, 2017, 10:15 PM

Hi! So I am obviously doing something wrong and I have had no success getting my CSS document linked to my HTML document. None of the CSS code I have written is working when I “run” my HTML file. Both are in the same place, so I don’t know what I’m doing wrong.

HTML code:
<!DOCTYPE html>
<html>
<head>
<style>
<link rel=“stylesheet” type=“text/css” href=“style.css” />
<title>Testing</title>
</style>
</head>
<body>
<div class=“h1”>
<h1>This is my testing ground for coding.</h1>
</div>
<p>Hello.</p>
<ol>
<li>
</body>
</html>

CSS code:
.h1 {
font-family: Arial;
color: Red;
}

Thank you for your help!!

Scott Sumner · Feb 4, 2017, 10:22 PM

@Elizabeth-Davis

Please reference a reply by me in this conversation thread: https://notepad-plus-plus.org/community/topic/13215/notepad-debugging. You’ll find your answer there.

Lionel Guyot · Feb 23, 2017, 10:32 AM

h1 is a particular class. In your CSS just delete the . (point) before the h1

h1 {font-family: Arial;color: Red;}

Bill McCaslan · Feb 28, 2017, 5:56 PM

Your link and title tags are buried inside the style tags inside the HEAD tag container. I’m guessing your Title might not be working either.

<head>
    <style>
        <link rel=“stylesheet” type=“text/css” href=“style.css” />
        <title>Testing</title>
    </style>
</style>

You don’t use STYLE tags unless you’re actually putting CSS code inside them. Link tags don’t go inside style tags. So because you’re linking to an external CSS file you don’t need style tags at all in the head.

Your head tag and contents should look like this;

<head>
    <link rel=“stylesheet” type=“text/css” href=“style.css” />
    <title>Testing</title>
</head>

I think that should work.