Establishing connections between HTML and CSS files

After writing my html and css code, I noticed that the files are not linking properly. Despite checking for errors, I couldn't find any issues within the codes. Here is a snippet of my html file:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>basicapp</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="static/css/basicapp.css"/>
  </head>
  <body>
    <ul>
    </ul>
 </body>
</html>

The current file structure looks like this:

/desktop/templates/index.html
/desktop/static/css/basicapp.css
htmlcss

Answer №1

The solution has been presented to you, along with some additional insights:

  • / denotes an absolute path, for instance /index.html will be located at the root of your server, or on your PC likely under C://

  • or ./ refers to the folder where the current file is situated. For instance, static/css/basicapp.css will lead you to 

    /desktop/templates/static/css/basicapp.css

  • ../ signifies the parent directory in relation to the current folder (hence the given answers).

Illustration

Assume you have the following structure:

/folderA/folderB/index.html

/folderA/folderB/fileA.html

/folderA/folderC/fileB.html

If you are in the index.html:

To access file A: ./fileA.html or fileA.html

To access file B: ../folderC/fileB.html

AbsOLUTE paths were omitted as they are not generally recommended due to uncertainty about the website's true root.

Your provided code snippet

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

Written by Rashed Rahat

Learn more

Edit: Implemented Heretic Monkey's feedback.

Answer №2

According to Poney, in their feedback: The connection between your html and css files depends on their paths. You can test by using 

href="../static/css/basicapp.css"

Answer №3

As previously stated:

- computer
  - themes
    - homepage.html
  - resources
    - styles
      - basicapp.css

Since your CSS is in a different directory, you will need to link it using one of the following methods:

Attempt a relative path:

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

Or,

Try an absolute path:

<link rel="stylesheet" type="text/css" href="/computer/resources/styles/basicapp.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

Imagine a complex JSON structure with multiple levels of nesting

Take a look at this JSON data : { department_1 : [{ id : 1, name = Joe Smith, email : <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660c150b0f120e2613150048030213">[email protected]</a>}, ...., { id : 500, name ...

javascriptcssjsonresponsive-designdata-visualization

Please indicate the number of lines for the href within the span element

I'm struggling with formatting a <span> tag, specifically the .lastMessageLink class that contains an <a> element with the .lastMessageText class. The content within .lastMessageText can vary from just a few characters to a lengthy paragra ...

javascriptjqueryhtmlcssstyles

Issue with Cascading Dropdowns in jQuery

I am currently experiencing issues with a piece of code on my website (also accessible via this link). The code consists of 2 select fields that should display different data based on the selection made. However, I have identified 2 bugs within the code. ...

javascriptjqueryhtml

A dynamic homepage that transforms upon login, created without the use of any content management systems

I am embarking on creating a website with registration and login features without relying on any CMS, using only pure HTML/CSS and other necessary tools. My main confusion lies in how I can develop a homepage that can cater to any visitor by displaying rel ...

csshtml

Building an expansive navigation menu with react-bootstrap

My current project involves creating a mega menu. Although I successfully made a responsive navbar, the challenge now is to implement a dropdown panel with 100% width. I've tried various approaches but haven't found one that works. Note: The oth ...

javascriptcssreactjsbootstrap-5react-bootstrap

Adjusting the image width to a set height requirement

When working with images, it can be tricky to maintain the aspect ratio. For example, if you have an image set to a specific height like 500px within a div that is 960px wide, the image may stretch to fill the width. This can distort the image and give ver ...

htmlcss

Curious as to why JavaScript restricts the use of two variables entering at the same time

Currently, I am tackling an Ajax-php livesearch programming challenge. I am facing an issue where JavaScript is unable to receive the values of 2 parameters that I want to input in HTML input boxes. Any idea why this might be happening? This is my HTML co ...

javascripthtmlajax

How to style a CSS list and center-align it

My website features a <ul> list with submenus structured like this: <div id="cssmenu"> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class=&ap ...

htmlcss

What is a neat trick to conceal an image when we hover over it?

Within my project, I have a grid layout showcasing images of various items through ng-repeat. My goal is to have the images disappear upon hover, and be replaced by a new div of equal size containing all the sub-components of the item. However, instead o ...

htmlcssangularjs

Guide on making an SVG tooltip using the Menucool JS extension

I am trying to add a simple tooltip to an SVG "map" when the mouse hovers over a rectangle. To create the tooltip, I would like to utilize this specific plugin. Here is how I have connected the SVG to HTML: <object data="map.svg" type="image/svg+xml" ...

javascriptjqueryhtmlcsssvg

Transitioning from Webpack version 4 to version 5 resulted in a failure to detect certain styles

After migrating my React project to Webpack v5, I am facing an issue where none of my .scss files are being picked up when I run the project. I meticulously followed the guide on migrating webpack https://webpack.js.org/migrate/5/, updated all plugins and ...

javascriptcssreactjswebpacksass

Add a jQuery click function within a loop indefinitely

Hello there, I have a simple loop set up in PHP and I am trying to figure out how to create an event that triggers whenever the user clicks on any line generated by this loop. Here's my basic PHP while loop: <?php $x = 1; while($x <= 5) { ...

javascriptphpjqueryhtmlwhile-loop

How come it is not possible for me to choose all elements containing an attribute value saved in a variable?

Imagine you have the following snippet of HTML code: <div data-id=5>...</div> <img data-id=5 src=...> <input data-id=5 ...> ... Your task is to select and remove all elements with the attribute data-id set to 5. Here is one attemp ...

javascriptjqueryhtml

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

I'm struggling with getting error messages to display properly in my Bootstrap form when using AngularJS. I followed the instructions on this link: but I still can't figure out what I'm doing wrong. Any advice? Thanks <div class=" ...

javascriptcssangularjstwitter-bootstrap

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Can you help me with CSS3 animations triggered by scrolling? I came across a code that reveals a DIV element as the user scrolls down: <script type="text/javascript"> $(document).ready(function() { /* Every time the window ...

jquerycssanimationwebscroll

Activate tooltip when hovering over the <img> element

I am having trouble implementing a tooltip using CSS for an <img> element. While I have successfully added a tooltip to <a href> </a> tags, applying the same functionality to an <img> tag has proven difficult. http://jsfiddle.net/ ...

cssimagehover

Using the Markdown attribute in this context prevents the translate pipe from translating the string

I have a paragraph within an Angular component that includes a markdown attribute. Occasionally, the markdown is causing the translation pipe to not translate the title.description string: <p class="someClass" markdown>{{tile.description | ...

htmlangularmarkdownngx-translate

Mysterious gap found between image and table

Hey there! I've been struggling with an unusual gap between a top image and a table on my website (www.tradecaptaincoaching.com). The table was created using . Despite spending hours on it, I can't seem to get rid of the huge 200 pixel gap that& ...

htmlcss

Is there a way to create more space between the cards in my project?

Could someone help me with separating the cards in my HTML project? I'm new to coding and struggling with this. The cards are too close together for my liking, is there a way to adjust the spacing? Below is the code I currently have: * { box-sizin ...

htmlcss

Guide to dynamically implementing pagination through AJAX calls

In this javascript code snippet, I have a class named PurchaseHistory. var baseUrl = null; var parameters = null; var currentPageNumber = null; var TotalPages = null; var PageSize = null; $(document).ready(function () { baseUrl = "http://localhost/AP ...

javascriptjqueryhtml