It's perfectly fine to use CSS href online, but when attempting to download the CSS file and use it locally, it doesn't seem to

I am currently working on a personal website project and I decided to use an HTML template from W3Schools. The template includes CSS files sourced from the internet:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- 
awesome.min.css">

However, when I tried downloading all the CSS files locally and loading them from my local directory as shown below:

<link rel="stylesheet" type="text/html" href="./assets/w3.css">
<link rel="stylesheet" type="text/html" href="./assets/google_raleway.css">
<link rel="stylesheet" type="text/html" href="./assets/font_awesome.min.css">

The layout of the website completely falls apart after switching to using the locally stored CSS files instead of the online sources. Upon inspecting the page and checking the console, there are no error messages related to the CSS. It's baffling why it doesn't work locally.

htmlcss

Answer №1

Simply consolidate all CSS files into one folder and make note of their full paths.

For instance, if you have downloaded the files to the following location on your computer (using the D drive's asset folder as an example):

D:\assets\w3.css
D:\assets\google_raleway.css
D:\assets\font_awesome.min.css

<link rel="stylesheet" type="text/css" href="D:\assets\w3.css">
<link rel="stylesheet" type="text/css" href="D:\assets\google_raleway.css">
<link rel="stylesheet" type="text/css" href="D:\assets\font_awesome.min.css">

If using the full path works while setting up the links, it means there may be an issue with the relative paths provided. In that case, conduct some research to correctly set the relative path.

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 process of performing an AJAX JQuery HTTP request using JavaScript and PHP on the server side - any tips?

Greetings! I have developed a web application using HTML, CSS, and JavaScript. To enhance functionality, I have integrated Bootstrap and jQuery into the project. The application comprises both client-side and server-side components. Let's take a look ...

javascriptphpjqueryhtmlajax

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

cssmaterial-ui

Tips for replacing all occurrences of a specific string in HTML while preserving JavaScript attributes

Is there a way to use RegEx to replace part of an HTML document without affecting the root element or other elements like event listeners? Consider this scenario: for (; document.body.innerHTML.indexOf(/ea/) != -1;) { document.body.innerHTML = docu ...

javascripthtml

Using Python and Selenium to retrieve information from the attribute 'data-label'

https://i.stack.imgur.com/zb7f5.jpg try: details = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "DataTables_Table_5")) ) scores_list = details.find_elements_by_tag_name('tbody') for sco ...

pythonhtmlseleniumwebdriver

Retrieve the height of a div element in an AngularJS framework, and assign this value to a corresponding attribute of another element

Is it possible to retrieve the height of an element using AngularJS and assign it to another div's attribute? In my Bootstrap website, I have a fixed sidebar that needs to stop before reaching the footer. To achieve this, I currently have to manually ...

javascripthtmlangularjs

Issues with mobile stylesheet loading properly

After migrating my website to a new server, I encountered an issue where the text displayed incorrectly on mobile devices but appeared fine on laptops. Surprisingly, when using Chrome's mobile viewer for inspection, everything looked as it should with ...

cssmobile

Instructions on integrating iframe into Slides on material-auto-rotating-carousel

Looking to swap out the carousel slide image with a loom video. Any ideas on how to replace the media img with an iframe in material-auto-rotating-carousel? const AutoRotatingCarouselModal = ({ handleOpen, setHandleOpen, isMobile }) => { return ( ...

cssiframematerial-uicarousel

What is the best way to exclude the "table" property from a button inside a row of a table?

I'm currently working with bootstrap and have implemented a table with the property "table" to create a light background for the data pulled from a database. The design looks great, except for when I try to insert a button in each row for editing purp ...

htmlcssbuttonbootstrap-4html-table

The alterations made to a single dropdown option are causing ripple effects across all other dropdowns

There is an add button that continuously adds a div container containing two dropdowns. The selection in one dropdown affects the data in the other dropdown. When the add button is clicked, a second div with both dropdowns is added. However, changing the ...

javascripthtmlcssangular

Ways to avoid overflow of dynamically added div element?

Currently, I am facing an issue while dynamically appending div elements with the .magnet class to my page. These elements end up overflowing the container boundaries and I am struggling to find a solution for this problem. If anyone could check out my j ...

javascriptjqueryhtmlcss

An error has occurred: sendEmail function is not defined

There seems to be a simple issue here that needs my attention before diving into PHP tasks. I plan on using PHPMailer this time around. I've been attempting to learn how to submit a form on localhost for the past week, and now I'm going to try i ...

javascriptjqueryhtml

Javascript onclick events failing to toggle video play/pause functionality

In my website, I have background music and a background video (webm format) embedded. I am facing an issue with making play/pause buttons in the form of png images work for both the video and the music. The background music is added using the embed tag wi ...

javascriptjqueryhtmlcss

Center text within a span element

I'm struggling to set up arrow navigation with both next and previous buttons that need to function in Internet Explorer 7 and newer versions. For the next button, I want the background image to appear to the right of the text. As for the previous bu ...

css

Ways to access every iframe on a webpage

I am facing a challenge with a highly intricate HTML page. <html> <head></head> <body> <iframe> A </iframe> <table> <div> <span> <div> <iframe ...

htmliframeselenium

Interaction between index file and module instance

As I develop a computer system, I have divided it into various smaller components. My experience in software development has taught me the value of keeping systems compact and focused. To achieve this, I am creating modules that perform specific function ...

javascripthtmleventsdom-eventsmodularity

Is it possible to utilize viewport height as a trigger for classes in Gatsby?

Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...

javascriptcssreactjsgatsbytailwind-css

Hyperlinking Github.io Images

I'm facing an issue regarding image paths on github.io. It seems like the images from my github repository are not displaying properly (I made sure to check spelling and case sensitivity). I'm running out of ideas, so maybe you can help me spot m ...

cssimagegithub

Implementing an HTML5 Media Player with AngularJs via the $http Service

HTML View <audio ng-src="{{vm.videourlsce}}" autoplay preload="auto" controls="controls" autobuffer></audio> Retrieve data from a server in my controller using the $http service and update it to the player. var vm = this; vm.videourlsce = &a ...

angularjshtmlaudiohtml5-audio

Adjust the header's alignment to seamlessly coincide with the uppermost part of the

I'm encountering this peculiar issue with a website I recently started designing. My aim is to make the header perfectly aligned with the top of the page. However, despite my attempts, there persists a stubborn gap that measures around 20px, defying a ...

htmlcss

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

Hello everyone, I'm a complete beginner when it comes to programming so please be gentle with me on my first question :) I'm trying to put together a simple website with a lightbox gallery, and you can check out what I have so far here. The prob ...

javascriptjqueryhtmlcss