Struggling to link CSS file to HTML

I've been attempting to link my CSS file to HTML using PHP, but I'm hitting a roadblock. Despite checking similar topics, I can't seem to find the right solution.

Any assistance you could provide would be greatly appreciated.

This is what my file looks like with the header:

<html>

   <head>
      <title>BNU Student Web Application</title>
      <!-- styles and JS here -->
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c69726c726d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
      <link rel="stylesheet" href="../../css/styles.css">
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

   </head>

   <body>

Here is an overview of my file structure:

file structure

htmlcssbootstrap-5

Answer №1

Instead of using ../../ in the path, just use css/styles.css.

Answer №2

To easily work around this issue, simply copy all of the CSS classes and stylings from your CSS file and insert them directly into your HTML file like this:

<html>

   <head>
      <title>My Unique Web Application</title>
      <!-- Include styles and JS here -->
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2056656d65525e7c3a6116626472617d2b666607">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <style>
          div {
           padding: 0; /* This is just an example of a styling */
        }
      </style>
   </head>

   <body>

Answer №3

To fix the issue in the provided code, simply remove the backslash. The CSS file is being requested only from index.php, so use the following corrected code:

<html>

   <head>
      <title>BNU Student Web Application</title>
      <!-- styles and JS here -->
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e3f8e6f8e7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
      <link rel="stylesheet" href="css/styles.css">
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

   </head>

   <body>

`

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

Exploring the magic of Hover effects using CSS and JQuery

I am exploring ways to enhance the display of an element when hovering over it. I have implemented a button and my objective is for the first click to activate the hover effect, while the second click will reset it. However, I am facing an issue where the ...

javascriptjquerycss

Choose a class and all its offspring as a selector

I possess the subsequent <label class="noblock"> <input> ... ... </label> Is there a method to indicate the CSS property display: inline for both the class noblock and its offspring (all elements within it)? ...

htmlcss

What could be causing my display: table-cell element to not take up the entire available space?

After consideration, I have decided to avoid using a JavaScript solution for my problem. The only way it seems to work consistently is by using setInterval() at regular intervals, which I prefer not to do. I am aware that achieving the same effect with CSS ...

htmlcsscss-tables

What sets apart .addEventListener and .on() when it comes to including an event in Bootstrap 5?

I'm currently attempting to attach a listener to my modal in order to implement a certain behavior each time the modal is opened. As per the guidance from Bootstrap 5 documentation, you can achieve this by using: https://getbootstrap.com/docs/5.2/com ...

javascriptjquerybootstrap-modalbootstrap-5

Employing delegate for switching roles between classes

I'm having trouble using the jQuery delegate function to toggle classes. What I want to achieve is toggling the class of <li class="unselected-values"> to <li class="<li class="unselected-values"> when the client clicks on the label ...

jquerycssrazordelegates

What could be causing the background image on my Jumbotron to fail to load?

Having some trouble with setting my image as the background of the Jumbotron. I've tried a few different approaches, but none seem to be working. It's not an issue with static loading because using img src directly into the Jumbotron section does ...

htmlcssdjango

Step-by-step guide on accessing and displaying a disc file within a webix application

I am a beginner in webix development and struggling to find documentation or help for my current issue. Within my webix application, I am trying to create a button (let's call it 'View Report') that when clicked will open a file from my loc ...

javascriptjqueryhtmlwebix

What is special about this element, textarea?

Hey there, I've got this JavaScript code that currently works on all textarea elements on the site. However, I'd like it to only work on one specific element. function limits(obj, limit) { var text = $(obj).val(); var str_length = $(obj) ...

javascriptjqueryhtmlthis

Identifying the method of navigation using PerformanceNavigationTiming

Previously, I was able to determine if a user had arrived on the page by clicking the back button in the previous page using window.performance.navigation.type like this: if (window.performance.navigation.type === 2) { window.location.reload() } Howe ...

javascripthtmlbrowser

Rearrange two elements by flipping their positions using CSS

I'm working with the following div that contains an input and a label: <div class="js-form-item "> <input type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> <label for="option-a-checkboxes-11" class=" ...

htmlcss

Creating ngModel dynamically with *ngFor in Angular 2: A guide

I've been struggling with this for the past couple of days - how can I have a new ngModel for each iteration within an *ngFor loop? The idea is that I load a list of questions, and within each question there are 2 propositions. Here's the HTML: & ...

htmlloopsangularangular-ngmodelngfor

Creating a website layout using DIV elements that adjusts the background and buttons based on the screen

I'm currently tackling a straightforward HTML page but facing some challenges with the divs. The goal is to have a fullscreen background with four horizontal buttons aligned next to each other at the bottom. These buttons are currently linked to the b ...

htmlcssbackgroundcss-position

Is there a way to customize the look of the time selected in the <input matInput type="time" step="1" /> time picker?

Currently, I am utilizing the following code as a time picker in my Angular 9 application. My goal is to modify the selected time's color to a bright blue shade. How can I accomplish this task? <input matInput type="time" step="1&quo ...

javascriptcssangulartypescriptangular-material

Switching text and updating form action on button press using jquery

My current issue is that the button on my form is only partially working. Initially, it displays 'add' and directs to the 'add.php' file, but upon clicking the button, the text does not change and the submission doesn't go to the & ...

jqueryhtmlforms

Using a Bootstrap 4 modal within a child component in Angular version 6

Encountering an issue while working with the Angular 6 + Bootstrap 4 combination - the modal opens up behind the modal-backdrop. Oddly enough, this is the only modal in the project that behaves this way. Libraries imported in Angular.json file: "styles": ...

htmlcssangularbootstrap-4bootstrap-modal

Guide to updating the value of a CSS seconds dynamically

let timerSeconds = 10; // This value will be retrieved from a database function StartCountDownTimer() { let timerStart = new Date(); let css_seconds = `${timerSeconds}s`; const css_root = document.querySelector(':root'); let cssVa ...

javascripthtmlcsscss-animations

What encodings does FileReader support?

Are you looking to easily read user-input files as text? If you can count on modern browser usage, then using FileReader is the way to go (and it works exceptionally well). reader.readAsText(myfile, encoding); It's worth noting that encoding defaul ...

javascripthtmlencodingfilereader

Having difficulty navigating to a different page in Angular 4

I'm currently attempting to transition from a home page (localhost.com) to another page (localhost.com/listing). Although the app compiles correctly, I encounter an issue where nothing changes when I try to navigate to the new page. My approach has m ...

htmlcssangulartypescriptangular2-routing

Tips for Aligning Several Images Horizontally in an Article

Does anyone know how to center pictures in an article horizontally? I've tried various techniques without success. If it would be helpful, I can share the CSS I currently have. However, I am open to starting from scratch with the CSS as well since I ...

csshtml

Scrolling Container Following Down the Page, Halts at Its Own Bottom (Similar to Twitter)

I am facing an issue and need some help. I am working on creating a three-column page layout where the middle section is for posts, the right section is for links and references (a bit long), and the left section is fixed. My question is: How can I preven ...

javascripthtmlcss