Adding my css to my HTML. Github

1

I know how to add my css to my html in codepen and some other html editors by either using the style tag or by putting my css in the css editor.

In Github, I can’t seem to do that. I created an index.html file with the code <h1>Test</h1> in it. I then created a css file named “style.css” and then styled the h1 as red. h1 { color: red; }. I went to the site where it was supposed to be and only the html was shown. The css hadn’t styled it. I added a style tag to the html <style src = "style.css"></style> and it still didn’t work. If you know how, can you show me how I can add css and Js to my html in github?

Thanks.

4

So do you mean I should use the way you showed me if the css is in the same file of the html and is wrapped in style tags?

5

I’m a little confused by the question, but I’ll try to sum up the different methods.

  1. include CSS in your .html file and in between <style> tags.

    <style>
h1 {
   color: red;
}
</style>
<body>
  <h1>Hello</h1>
</body>

  2. create a .css file in which you describe the property value pairs.

    h1 {
   color: red;
}

    Then reference the stylesheet in your .html file.

    <link rel="stylesheet" type="text/css" href="style.css" />
<body>
  <h1>Hello</h1>
</body>

With regards to the second approach, the href attribute describes the relative path, the location of the .css file. As @camperextraordinaire explained, it would work correctly assuming your two files are in the same folder.

|index.html
|style.css

If the stylesheet were to be in a separate folder, just as an example

|index.html
     styles
     |style.css

You’d update the reference as follows:

<link rel="stylesheet" type="text/css" href="styles/style.css"/>

Hope it is of some help.

2 Likes
6

Thank you both. I was missing just one character. Now I can implement it.