Can't link CSS to HTML


#1

I’m learning code and wanted to try some of the things that I learned but I can’t get the CSS file to link with the HTML and so the changes don’t appear on the preview.

this is what I’m doing so far on the html file:

Try Again

My Page

and this is on the CSS:

  • {
    border: 1px solid rgba(0, 0, 0, 0.3);
    }
    h1 {
    font-family: Arial;
    font-size: 20px;
    color: violet;
    }

What am i doing wrong?

Thanks for the help!


#2

well that was a fail…
Lets try again!

The html:


#3

the CSS:


#4

You can type preformatted code onto this forum by entering your code, highlighting it, and pressing the </> button above the editor.

Are your files in the same folder? I can’t tell that based on how you cropped the images. What happens if you open Try Again.html in your browser?

This probably isn’t the cause of your problem, but the last tag should be </html>.


#5

Thank you very much for the help!
I tried to preview on the browser and it was fine! The problem was with the package for the preview on atom.


#6

What package are you using?


#7

I am having a similar issue.

The package that I use to test the code though is the Atom live-web-server by jas-chen.

The following is a screenshot of the file opened up in Atom.

The next screenshot is when I try to run the code in the live web server:

The next screenshot is when I try to run the code in the live web server but pointed to the specific file (location.html) which can be seen in the very first image/screenshot.

I am confused since I can copy the Google Maps Geolocation Maps JavaScript API directly into one file and it works but when I try to put the code into different files (e.g location.html,location.css,location.js)as you can see in the first image/screenshot but it doesn’t work.

The following picture is the result of placing all the code into one file and the code works.

I am aware that one needs to link CSS to HTML and JS to HTML however I am not been able to make the API work when putting the code into different files.

Please help. I am still new to this. The transition from business school to the Hello World!/coding world is is a bit difficult.


#8
  1. This forum is providing Atom support. I don‘t see how your issue is related to Atom.

  2. You have posted screenshots of your markup, not a single line of code. If you have code inside that js folder, you need to load the script in your HTML.

  3. You really should not publish your API key (details)


#9

The API doesn’t work because you have no links in your HTML file. After you add the link tags, if the syntax is correct, the API will work.


#10

@idleberg I apologize for posting that there. I did so because I thought it was relevant in that I couldn’t make the code work (the code wasn’t reading or connecting the code within the CSS file and the code within the JavaScript file and seeing that I was using an Atom Editor.

I didn’t remember that my API key was showing. Thank You for highlighting that. I will be more diligent next time.

@DamnedScholar
I followed what you suggested it and it worked. May you be blessed by the gods, the old and the new.