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.
  • I've experimented with moving the CSS file out of the folder and next to the HTML file, but that didn't solve the issue either.
  • Adding style brackets directly in the HTML file resulted in proper coloring, so it seems like everything is set up correctly.

During testing, nothing appears in blue as expected.

To enhance readability for this question, I moved my JavaScript code into a separate file which did work successfully.

If anyone has any suggestions or ideas, please share as I haven't found any new solutions in other related discussions.

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <meta charset="UTF-8">

    <link rel=”stylesheet” type="text/css" href="styles/style.css">

</head>
<body>
    // HTML content goes here
    <script src="javascript/myscript.js"></script>
</body>
</html>

And here's the CSS file:

#one {
    background-color: blue;
}
.number {
    background-color: blue;
}

This is my current folder structure:

https://i.stack.imgur.com/N5F2W.png

And this is the contents:

https://i.stack.imgur.com/6hoRW.png

Answer №1

Revise this

   <link rel=”stylesheet” type="text/css" href="styles/style.css">

Replace it with

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

Answer №2

Remember to use double quotes for opening and closing tags. Try out this code snippet:

 <link rel="stylesheet" href="styles/style.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

Verify Departure on External Links within Wordpress

Let me set the stage for you: We're dealing with a bank website here. So, whenever a user wants to click on an external link (could be to a Facebook page or a partner website), we need to have a notification box pop up saying "You are about to lea ...

Create a function that will repeatedly call itself at specified intervals, increment a variable, and update the class values of elements with an id matching the current value of the

I'm attempting to create a setup that cycles through different images <div id="img_box" class="shadow" onload="imgCycle(1)";> <img id="1" class='opaque imgbox selected' src="media/img ...

Displaying recursively retrieved data from an AJAX call on an HTML page using AngularJS

I am currently working on a recursive AJAX call where I receive server data in chunks. My goal is to display each chunk of data one below another on the front end. How can I achieve this without replacing previously received data with new data? I hope this ...

Combining two PHP includes within a single HTML file

As I delve into web development, an interesting issue has arisen: I have a single HTML file with two PHP includes. Strangely, only the first include is working while the second one seems to halt the transfer of HTML code to the browser. There are no errors ...

Displaying VueJS property inside an array of HTML elements

Currently, I am working with an HTML array that contains the following data: data-groups='["category_all", "data goes here"]' In my project, there is a prop named "title" that holds the specific string needed to be displayed in the "data goes he ...

Test your knowledge of Javascript with this innerHtml quiz and see

How can I display the output of a score from a three button radio button quiz without using an alert popup? I want the output to be displayed within a modal for a cleaner look. I tried using InnerHTML but now there is no output when the button is clicked. ...

Retrieving script data from a webpage

I found a link that I want to extract content from, here is the link: https://www.whatever.com/getDescModuleAjax.htm?productId=32663684002&t=1478698394335 However, when I try to open it using Selenium, it doesn't work. It opens as plain text wit ...

Tips for expanding an md-nav-item in Angular Material

Need help on stretching the md-nav-item element illustration 1 ------------------------------------------------ | ITEM1 | ITEM 2 | ------------------------------------------------ illustration 2 ------------------------------------------------ | ...

Just starting to learn jquery and I'm struggling with this code, can someone help?

I am trying to move the .icon element to the right and animate it based on its position().left value. Unfortunately, my code is not working as expected and I can't figure out why. It seems like such a simple task! <script> $("li.menu-item").ho ...

The Bootstrap modal fails to open

I am currently working on implementing a Navbar button that triggers a Bootstrap modal containing a form. While looking for resources, I stumbled upon a useful script at https://gist.github.com/havvg/3226804. I'm in the process of customizing it to su ...

implement a Django for loop within the template by utilizing JavaScript

Is it possible to incorporate a {% for in %} loop and {{ variables }} in a Django template using JavaScript DOM (insertAdjacentText, or textContent) and dynamically load data from the views without refreshing the entire page? If so, can you please guide me ...

Element that emulates a different element in HTML

Is it possible to have one element that can control and change multiple clone elements, mimicking every change made to the original? While JavaScript & jQuery can easily achieve this, most solutions involve separate variables or instances for each element ...

Learn the process of adding values to HTML forms within ExpressJS

I am facing a challenge in injecting Javascript variable values into HTML forms on an Expression JS server. I am unsure about how to solve this issue. All I want to do is insert the values of x, y, and res into the forms with the IDs 'firstvalue&apos ...

Executing a jQuery event after a div's background-image has finished rendering

Greetings and thank you for sparing a moment. I'm curious to know if there exists a method through jQuery to execute a function immediately after a background image in a div has completed downloading and rendering. Imagine you have the following div ...

Inject pure HTML code into a react div

I have extracted raw HTML content stored in the database and I am attempting to display it within a div element. const style = { border: '2px solid #eee', height: '270px', width: '100%', overflow: 'auto&ap ...

Display the element only when the request sent with getJSON exceeds a certain threshold of time in milliseconds

Here's a snippet of my JavaScript code: surveyBusy.show(); $.getJSON(apiUrl + '/' + id) .done(function (data) { ... surveyBusy.hide(); }) .fail(function (jqXHR, textStatus, err) { ... surveyBusy. ...

What is the best method for developing a draggable element that remains stable?

I have developed a simple script for draggable elements, however, I am facing an issue. Whenever I move the mouse quickly, the element loses focus. Is there a way to improve the stability of the dragging functionality regardless of how fast I move the mou ...

How can you customize the color of the arrows in Carousel Bootstrap?

I've utilized Carousel Bootstrap to create a slideshow, but I'm struggling with changing the color of the arrows. Could you please assist me in figuring out how to change the color of the arrows? Thank you! slideshow.component.html: <di ...

Change the function from onLoad to onClick exclusively

I'm experiencing a particle explosion on my webpage due to this code. I connected the onClick function to a button in my HTML so it executes only when that specific button is clicked. However, the function automatically runs when I load the HTML and ...

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...