Steps to connect my CSS with my HTML in a website hosted on GitHub

I am experiencing an issue with my website hosted on Github pages. It seems to be unable to read the CSS file that I have linked to it.

Here is a snippet of my HTML code:

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
<html>
    <body>
        <h1>Hello World</h1>
        <p>I'm under construction!</p>
        <h6>Copyright MIT Licence 2018</h6>
    </body>
</html>

This is how my CSS code looks like:

body {
  background-color: lightblue;
}

h6 {
  color: navy;
  margin-left: 20px;
}

Link to repository: legoman8304.github.io

I suspect that I may have made an error in linking the CSS file because when using inspect element on the site itself, it shows 'style.css' but when opened, it appears to be empty. Any advice or assistance would be greatly appreciated.

Answer №1

Make sure your HTML is connected to the github page that displays the style.css, not directly to the file in the repository.

Instead of:

<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">

Use this:

<link rel="stylesheet" type="text/css" href="https://legoman8304.github.io/style.css">

Also, ensure to place the stylesheet reference within your <head> tag.

Answer №2

Here are a few methods you can use:

  • Try this method:

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

  • Utilize your CSS directly from this link:

    https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The widths of inputs vary between FireFox and Chrome

I've been investigating why the widths in FireFox and Chrome show a significant difference. This variation is causing a problem with my Modal in the views. Chrome: https://i.sstatic.net/D0lgu.png FireFox: https://i.sstatic.net/do4YU.png Upon comp ...

What is the best method for placing an element above all other elements on a page, regardless of the layout or styles being used?

I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...

Using Python to access files

I have developed a system that allows me to load image files from HTML. However, after selecting a file and loading it from the front end, I am in need of a Python API to read the selected image file. How can I establish a connection between Python and HTM ...

What is the process for retrieving data from a javascript file that was submitted through a form?

Can you help me with an issue I'm having with this code snippet? <form action="main.js"> <input type="text" required="required" pattern="[a-zA-Z]+" /> <input type="submit" value="Submit" /> </form> After c ...

Is there a way to eliminate the 'All Files' option from an HTML file input field?

I have implemented a feature to allow users to upload custom files using . Currently, I am restricting the allowed file types to only ".Txt, .SVG, .BMP, .JPEG" by using accept=".Txt,.SVG,.BMP,.JPEG". This setting causes the browser's file-select dial ...

Issue with functionality of Bootstrap template generated by Visual Studio 2013

I've set up a new ASP.NET MVC project using the latest Bootstrap 3 template, but I'm encountering an issue. There doesn't seem to be any spacing between the header navbar and the content displayed below by Renderbody(). I've attempted t ...

In Javascript, the color can be changed by clicking on an object, and the color

Looking for help with my current HTML code: <li><a href="index.php" id="1" onclick="document.getElementById('1').style.background = '#8B4513';">Weblog</a></li> The color changes while clicking, but when the lin ...

Selecting Specific File in Directory Using HTML File Input

Can you customize an HTML file input to choose a particular file from a directory or drive? By clicking on the file input button, the user opens the file selector and selects a folder or external drive. With jQuery, it is then possible to specify a specif ...

Transform Ajax response into dropdown menu option

I have made an ajax call and received HTML as a response. Now, I need to convert this output into options and add them to select tags on my webpage. <div class="views-element-container"> <div class="view view-contact-view-id-conta ...

Implement event listeners to transcluded content in AngularJS

How can I add event handlers to transclusion content in a directive without allowing consumers to add their own click handlers? I want the directive to handle it, but I'm unsure of the correct approach for adding handlers to the content passed with ng ...

What are the best practices for maximizing the efficiency of bootstrap-sass?

Currently, I am exploring npm modules and came across bootstrap-sass. After downloading the modules, I was seeking a solution to compile scss into the static folder of my application, as well as the js bootstrap files. However, after checking the npmjs do ...

Maximizing AngularJs performance on handheld devices

Recently, I developed an HTML page using material angularjs that functions perfectly on desktops with various browser sizes. However, the issue arises when opening the same page on a mobile device as it behaves like a desktop application instead of adjust ...

Adjusting specific sections of a container in real-time

Fiddle: https://jsfiddle.net/1b81gv7q/ Sorry for the slightly cryptic title; I couldn't come up with a better way to phrase it. Imagine this scenario: there's a container with content that needs to be dynamically replaced. If I wanted to repla ...

Is there a way to make divs expand on top of existing content when hovering over them, in order to avoid needing to scroll through overflow content? I am currently working with

I am working with 9 boxes contained within divs, each box includes data that exceeds the size of the box itself (represented by Some Text repeated for demonstration purposes). I am seeking a solution where hovering over any box will cause it to enlarge and ...

Updating text color with Ajax response value

I need assistance with updating the text color of a sensor value displayed using html/ajax. Currently, the sensor value is being displayed successfully, but I want the text color to change based on the value. Here's an example: if value < 50 then f ...

Storing multiple email addresses in an array using an HTML input element

I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...

Tips for positioning an inline label and input field in an Angular application using CSS and HTML: How to align the label to the left and the input

I'm currently developing an Angular form with multiple label-input field combinations. I have managed to style the labels and input fields with inline block so that they appear on the same row. However, I am facing a challenge in aligning the label to ...

"Going beyond the ordinary: An exclusive look at the Outlook newsletter design

I'm struggling with adding text and a background image to a TD in a newsletter. While the background shows up, the text is not being displayed as expected. Below is the code snippet I've been using: {if !empty($aModules.mkNews)} ...

Creating plugin-based applications using HTML5

I am new to developing web applications and want to create an HTML5 cross-platform application that resembles the startup page of Windows 8, displaying multiple windows for users to choose from. I need guidance on how to start this project. I would like ...

What is causing the breakdown of bordered tables in Bootstrap when the border-separate property is set to collapse?

I am experiencing an issue with my bordered table that is using the Bootstrap classes table table-bordered. When I add border-collapse: separate, the borders are correctly separated, but the top and bottom borders seem to disappear due to zero width. I am ...