Adding my css to my HTML. Github

Adding my css to my HTML. Github
0

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.

The proper syntax would be:

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

if the name of the file is style.css and is located in the same folder as the html file.

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?

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 @RandellDawson 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.

1 Like

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