The effects of external CSS are not being displayed or are being overridden

I am currently working on a webpage design that resembles the style of Microsoft's website. I came across a tutorial on W3 Schools for creating an image slideshow, which can be found here: https://www.w3schools.com/howto/howto_js_slideshow.asp. The example provided in the tutorial worked well when all the code was placed in one HTML document. However, when I tried to link an external stylesheet, the slideshow stopped functioning. I even tried adjusting the JavaScript link without success, although switching to the next picture still worked properly. I sought advice on Stackoverflow, where suggestions like adding ?v=3 to the links and clearing cache were offered, but none of these solutions resolved my issue. I tested this in both Chrome and Firefox.

Here is how I linked my CSS in the head section:

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

And here is the JavaScript link at the end of the body:

<script type="text/javascript" src="js/new script.js?v=3"></script>

Do you have any insights on why this could be happening? Are there other tutorials available for troubleshooting this problem? I will include images comparing the functional HTML file with all the code inside it versus the file with external JS and CSS linked.

Thank you for your help!

External Link - Not Functioning

Internal Link - Functioning perfectly

THANKS EVERYONE! - A simple spelling mistake caused the issue! Apologies for any inconvenience!

Answer №1

It's important to note that the following code is incorrect:

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

Within the <style> tags, only CSS code should be included. The use of the link tag within this context is incorrect as it is an HTML tag, not CSS. The proper syntax should simply be:

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

In addition, note that having a space in the filename like "new theme.css" may result in it being encoded as "new%20theme.css", leading to a 404 error. It's best practice to avoid spaces in file names.

Lastly, remember to check your console for any errors, especially to verify if the CSS file is successfully being fetched.

Answer №2

Avoid using spaces in file names; consider using new_theme.css and new_script.js instead.

Answer №3

To include your CSS file in your HTML document, place the following code snippet within the <head> tags:

<link rel="stylesheet" href="my_theme.css">

When naming your files, remember to either use Camel Case like "myTheme.css", or opt for an underscore like "my_theme.css". This will help avoid any issues!

Following these steps should resolve your current problem. Good luck! :)

Answer №4

Make sure to keep the within the style tag and not outside of it. It belongs inside the tag for proper formatting. For example:

<head>
  <link rel="stylesheet" type="text/css" href="new%20theme.css">
</head>

If your file names have spaces, remember to encode them. For instance:

href="new theme.css"

should be changed to

href="new%20theme.css"

Answer №5

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

or

 <style type="text/css">
   Your custom CSS code goes here
 </style>

Check your browser's console to verify if the CSS file is being loaded correctly.

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

Position the div so that it is aligned with the top offset of another element

My question is straightforward. I have a div1 element with a variable offset().top that adjusts based on other elements on the page. I am looking to add an absolutely positioned div next to it, which should have the same absolute top value. This can be ach ...

Unspecified origins of Js in Chrome Extension

console.log(chrome.runtime.sendMessage({from:"script2",message:"hello!"})); However, attempting to send the message from a background script to a content script is proving to be unsuccessful. https://i.stack.imgur.com/ERgJB.png ...

Troubleshooting IE8 Problem with CSS Table Cell

Wondering if this is an easy fix :) I have a website with the following CSS styles: .gameboard-table { border: solid 3px black; padding: 0px; border-collapse: collapse; } .gameboard-table tr { padding: 0px; margin: 0px; } .gameboard- ...

The values of variables persist even after refreshing the page

let quote; let author; // Establishing the Get Method for the Root Route in ExpressJS app.get('/', (req, res)=>{ res.render('home', { quote: quote, writer: author }); }); // Configuring the Post Method for t ...

All the details from this run are available in the npm run dev log on Ubuntu

Good day! I've been working on deploying a page built in vue.js, and after uploading all the files successfully, I encountered an issue when trying to run "npm run dev." No matter what I try, including re-installing npm dependencies and starting from ...

A guide to saving an ArrayBuffer as a file using JavaScript

I am currently developing a file uploader for the Meteor framework. The approach involves breaking down the file on the client side from an ArrayBuffer into small packets of 4096 bits, which are then sent to the server through a Meteor.method. The abridge ...

Choose an array containing a random set of n elements and place them into a designated element

I am working on a project where I have a collection of books embedded as iframe elements. My goal is to select three random books from this list and display them within a pre-defined div. However, despite my attempts to use the shuffle method, I am encount ...

Designing a div that fills the entire height and 75% of the body's width

As a newbie to HTML/CSS, I'm struggling with implementing what I described in the title. It was functioning properly earlier, but now it seems like I made a mistake somewhere and it's no longer working. My code is quite lengthy, but the remainin ...

An error occurred while attempting to reset your password on Parse.com (JS SDK) due to an

I am having trouble resetting my password in my angularjs App. I am utilizing Parse (js SDK) as the backend. Even though I am following the documentation and using Parse.User.requestPasswordReset, I keep encountering error 125 which states invalid email ad ...

perform the .then() function within a returned promise

Here is my code snippet: function scammer(message) { return new Promise((resolve,reject)=>{ if(condition){ if (condition) { bot.KickMember(params).then((message)=>{ console.log("kicked"); ...

Ways to prompt for user input using JavaScript

How can I collect user input using JavaScript for a website that saves the input into a text file? Below is the code I am currently using: <button type="button" onclick="storeEmail()">Enter Email</button> <script> ...

Click to reveal additional images once the "show more" button is pressed

Hey there! I'm currently working on implementing a feature where, upon clicking "show more", 3 images will be displayed. And if the user clicks again, another set of 3 images will appear, and so on. I seem to be facing some difficulties with the JavaS ...

Insider's guide to showcasing code in vibrant colors using Python Django

Context: I am currently working on a Python Django web application and need to showcase code snippets in the browser with syntax highlighting. An example of the code snippet I want to display would be: if True: print("Hello World") I am look ...

Difficulty with saving file in PHP ("unable to open stream: File or directory does not exist")

I'm trying to save a file that contains the serialized values of a form. A Basic Form <h2>Example PHP Form Validation</h2> <form form method="post"> First Name: <input type="text" name="f ...

Modify the appearance of material-ui checkbox

For my project, I am utilizing React along with the styled-component package for styling. However, I am facing an issue when it comes to styling the Material-ui checkbox using styled-component. The problem lies in narrowing the border of the checkbox, as t ...

What mechanism enables the scores on this sports ticker to refresh automatically without relying on ajax calls?

While browsing scores on , I found myself intrigued by the way they update their scores without using ajax calls or iframes. It's a mystery to me how this functionality is achieved. Can anyone shed some light on how it works? ...

Is it possible to refine an HtmlNodeCollection by the content of a specific child element's InnerText?

I am working with an HtmlNodeCollection named var searchResults that I extracted from a website using HtmlAgilityPack. Below is a snippet showing 3 Nodes from the collection (there are more of course): /* HTML code snippet here */ My goal is to filter ou ...

Troubleshoot my code for clustering markers on a Google map

I'm currently working on a piece of code to generate a Google map that contains 3 hidden points within one marker. The idea is that when the main marker is clicked, these points will either merge into one or expand into 3 separate markers. However, I& ...

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

Please complete this mandatory field. Issue detected with ImageField in Django

I encountered an error stating 'This field is required' when trying to upload an image. I am puzzled as to why this error is occurring, as my model is quite simple. Any assistance in identifying the issue would be greatly appreciated. cl ...