My CSS is not linking my index.html file


#1

Hi, Appreciate if any one could let me know why my css is not working?

Both files are on the same folder.

Many Thanks!. I have installed atom-html-preview. See attached screenshot.

Index.html:

First HTML with Atom
class="content" id="first">Test
class="content">Test

Atom is Great!

And, it's free.

-------------------------------- style1.css: div.content{ height:150px; width:150px; border:3px solid #000000; float:left; margin:20px; }

div#first{
background-color:#ff0000;
}

Attached screenshot:


#2

Your screenshot didn’t seem to go through. As you’ve noticed, the forum understands HTML code. You can mark part of your post as code by highlighting it and pressing the </> button above the editor.


#3


#4

Looks like the issue is with the HTML. Here’s the HTML you shared but formatted as code:

<!DOCTYPE html>
 <html>
 <head>
   <title>First HTML with Atom</title>
   <link rel="stylesheet" type="text/css" href="style1.css">
 </head>
 <body>
   <div> class="content" id="first">Test</div>
   <div> class="content">Test</div>
       <h1>Atom is Great!</h1>
       <p>And, it's free.</p>
 </body>
 </html>

The class and id attributes for your divs should be contained in the tags 1 like this:

<div class="content" id="first">Test</div>
<div class="content">Test</div>

Because the div tags were closed with no class or id attributes, your CSS wasn’t applied to them.


#5

Hi Thanks for the observation. here it is again:

index.html:
indent preformatted text by 4 spaces

First HTML with Atom
class="content" id="first">Test
class="content">Test

Atom is Great!

And, it's free.

====
style1.css:

First HTML with Atom
class="content" id="first">Test
class="content">Test

Atom is Great!

And, it's free.


#6

Hi Rese and Others,

Thanks a mil! Will give it a go… Im still a rookie.

Cheers!


#7

Works now… like you said Rese, the extra “>” in the div was the culprit.


#8

Wait, you can see the raw text?

…is it possible to learn this power?


#9

Wait, you can see the raw text?

…is it possible to learn this power?

:smile: I used devtools inspector and could see the HTML.

I suppose moderators can also use the post editing ability to see the raw message too, but that’s not something that can be granted as far as I know.