Problem with linking HTML to CSS file on atom text editor


#1

Hey guys,

I have tried to link CSS & HTML by using code below;

And then I went ahead to preview it but nothing has changed. However, opening it on browser has worked for me. Are there ways to change the preview setting such that it is in tune with the actual change when opening it up on browser? Installing packages maybe?

  • Bobby

#2

Code is :


#3


#4

And where is your CSS file in your folder?


#5

57

All of my files are under the same Project - ALL ABOUT CODING


#6

What are the contents of your HTML body and CSS file? If you just take a screenshot of all of these things at once, I won’t have to ask you for them individually.


#7


#8


#9

Why did you change where style.css is? That’s why your style isn’t working. The folder you showed me in the earlier screenshot is in a different arrangement, one that will work. Then you moved the file to a different folder without updating the link, so it doesn’t work.


#10


#11


#12

Have tried a few solution here and there : Copying full path of CSS file into “link href” but still it does not work.


#13

And this is the CSS file content


#14

When you open it in Chrome and look in the developer tools (Menu -> More tools -> Developer tools, click on the Elements tab), what do you see in the <head> section and what do you see when you click on a <h1> tag?


#15

Hey I am currently using Safari.

Would Chrome be a much better browser for coding projects?


#16

I’m sure you can do it in Safari, but you will have to look up how to use its developer tools because I haven’t used it in ages. Chrome gives a lot of flexibility and is the same experience across multiple platforms, so it’s worth using.


#17

In Safari, you need to enable the Developer Menu in the preferences:

This will give you access to a set of developer tools, including the inspector mentioned by @DamnedScholar