What could be causing the issue with my CSS file not being connected to my HTML file?

My current setup involves the following file path - 

/public_html/websystems/websystems.css

The HTML file I need to link is located in the public_html directory and is named index.html

The CSS file I'm attempting to link is in the websystems folder and is named websystems.css

You can view the content of these files in the images provided below.

HTML file https://i.sstatic.net/zIR8h.png

CSS file https://i.sstatic.net/Sphdq.png

I'm facing an issue where none of the styles that I've set in my CSS file are being applied to my HTML file. Any insights on why this might be happening would be greatly appreciated.

Thank you for your assistance.

htmlcss

Answer №1

Give this a shot,

websystems/websystems.css


Remember that, (sourced from A Friendly Reminder About File Paths)

  • Is the image located in the same directory as the file referencing it?
  • Is the image stored in a directory below?
  • Is the image saved in a directory above?

When I say "below" and "above", I'm referring to subdirectories and parent directories. Relative file paths allow us to navigate in both directions. Here's a basic example: https://i.sstatic.net/BKyhI.jpg

Here's everything you need to understand about relative file paths:

  • Starting with "/" goes back to the root directory and begins there
  • Starting with "../" moves one directory up and starts from there
  • Starting with "../../" goes two directories up and begins from there (and so forth...)
  • To move forward, just start with the first subdirectory and proceed onwards

Answer №2

Try updating the reference from /websystems/websystems.css to simply websystems/websystems.css. This should be a path relative to the location of the current file index.html.

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

No matter what I try, connecting the CSS file to my HTML file just won't seem to work

I've been attempting to connect a CSS file to my HTML index file, but I can't seem to get it to work no matter what I try. I'm using VSCode. When typing the link from scratch, it auto-completes or shows up, indicating that it recognizes it. ...

htmlcss

What are some strategies to prevent a fixed sidebar from obscuring content while zooming in?

I've been working on adding a fixed sidebar for a table of contents (TOC) to a website, where the sidebar stays in place as the user scrolls up and down. My implementation includes the following HTML code: https://i.sstatic.net/jAY8l.png and CSS co ...

htmlcss

Is there a method in CSS to ensure that an element's size is consistently a multiple of a specific integer?

I'm currently trying to find a solution for an element that needs to expand based on varying child dimensions. My initial thought was to achieve this using modulus and calc(), but since modulus isn't available, I need help figuring out how to imp ...

htmlcssreactjs

Tips on creating vertical stacked content utilizing CSS

Has anyone come across this game before? https://i.sstatic.net/hFX9o.png I am trying to stack each card in a column, here is my fiddle jsfiddle. In my scenario, I have cards wrapped in div elements with a maximum height. If a card exceeds this height, i ...

javascripthtmlcssbootstrap-4

Moving a div with arrow keys using percentages: A step-by-step guide

I found this amazing script on Stack Overflow that allows me to move elements around the page using arrow keys. It works flawlessly, and I love how it enables diagonal movement by combining different arrow key inputs. Now, my query is whether it's fe ...

javascriptjqueryhtmlresponsive-design

Template builder for editing forms

I have successfully created a form creation page, but now I need to create a form edit page. However, I can't seem to find the necessary attribute for it. How should I proceed? Rendering a form for the admin panel image description goes here var op ...

javascriptphphtmlformbuilder

Issue with aligning items vertically using CSS and Javascript

I must admit, I am not well-versed in CSS. My goal is to create a performance bar using CSS and Javascript. So far, I have managed to generate a background bar with another bar inside that fills up to a specific percentage. However, my issue lies in the fa ...

javascriptcssdom

Retrieve the file content from a zip file using the file input with JSZip

Is there a way to extract the content of a zip file using JSZip and an input field? I have managed to read the title of the file, but how can I access its contents? I attempted to use jQuery for this: $('.upload-input').on('change', f ...

javascriptjqueryhtmljszip

Transferring scope between pages without the need for an angular service definition

Looking to open a new JSP page while passing the $scope in order to utilize an array response generated in the initial page. Example from test.js file: (function() { 'use strict'; angular .module('test', []) .control ...

javascriptangularjshtml

Tips for changing the default height of Elastic UI dropdown menus

I am attempting to adjust the height of the Task combobox to match that of the Date Picker, but the styling is not being applied when done through a class or inline. https://i.sstatic.net/3Cua1.png I have tried inline styling the element as: <EuiForm ...

cssreactjssass

HTML tag in CSS not covering entire page

What is the reason behind body, html, and #black sizing to the size of the viewport rather than the document height? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> html, body{ height:100%; } #black{ position:absolute; w ...

htmlcss

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

javascripthtmlcss

jQuery method to extract only the text from a clicked "a" tag

I have generated a list of alphabet items like this: <ul class="search_a_m nav nav-tabs" id="getAlpha"> <?php foreach (range('A', 'Z') as $char) { $default = ""; $default = $char == 'A& ...

phphtmljquerybootstrap-4

Is it possible to utilize HTML as a platform for interfacing with a C/C++ program?

As I work on a new product with USB interface, I need to create a control app for it. However, my GUI programming skills are limited, so I have thought of using a local web page within the app's installation directory as the interface for the program. ...

htmlchardwareusbhardware-interface

Using Jquery and css to toggle and display active menu when clicked

I am trying to create a jQuery dropdown menu similar to the Facebook notification menu. However, I am encountering an issue with the JavaScript code. Here is my JSFiddle example. The problem arises when I click on the menu; it opens with an icon, similar ...

javascriptjqueryhtmlcss

Javascript involved in the process of CSS Background-Images loading after HTML Images

I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...

javascripthtmlcss

Tips on avoiding the default action during a keypress for specific events before eventually restoring the default action

I've been experimenting with a project that involves using the space bar to trigger an event. It's actually quite complex, but I simplified it for this example. The concept is that when the space bar is held down, it highlights a certain div, an ...

javascriptjqueryhtmlkeydownpreventdefault

CSS inset box-shadow creates a gap between collapsed borders

I need help with a strange issue I'm facing. I have a table where border-collapse is set to collapse, and there's an unusual gap between the box-shadow inset and the border. The size of this gap increases as the border width gets larger. How can ...

htmlcss

Is there a way to separate the sub-navigation ul from the main navigation ul?

My Content Management System generates a main-nav menu with one sub-menu. Both menus are styled using standard ul tags with a class of “navCMSListMenuUL” and then customized in my CSS. The problem arises when hovering over a link, causing the container ...

htmlcsscontent-management-systemhtml-lists

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

javascriptjqueryhtmlcssmobile