Unable to modify the background color using the .css stylesheet

https://i.sstatic.net/uKcMs.jpgMy attempts to change the background color in a simple HTML page using a CSS style sheet have been unsuccessful. Despite no errors being present in my code, I am encountering this strange issue.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="Website/css/style.css" />
</head>

<body>
    <p>This is some content in the body</p>
</body>
</html>

In an effort to address this issue, here is what I have included in my style.css file:

body {
    background-color:black;
}

Any assistance offered will be greatly appreciated! Thank you!

Answer №1

Resolved! It turns out, the href path was incorrect. When specifying a path for a CSS stylesheet, it starts searching in the folders located at the same root level.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
    <p>This is some content in the body</p>
    <p>This is some content in the body</p>
    <p>This is some content in the body</p>
</body>
</html>

Answer №2

The issue lies within the href path. It is recommended to initiate your path with "css/style.css" rather than "/Website/css/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

What could be the reason behind the significant void in the grid I designed?

I'm currently learning how to utilize the grid container and have successfully created a grid with 2 images on top, 2 on the bottom, and one that stretches vertically on the left side. While I have arranged the grid as desired, I am facing an issue wi ...

Quickly switch between pages as they load

In Chrome, I'm experiencing a white flash between page loads that is causing transitions to appear choppy. I've taken various steps to optimize the site, such as using image sprites, reducing image sizes, minifying CSS, ensuring correct CSS loadi ...

What are the steps to ensure the effective functioning of my checkbox filter?

Currently, my product list is dynamically created using jQuery. I now need to implement filtering based on attributes such as color, size, and price. I found some code that filters the list items by their classes, which worked perfectly for someone else. ...

What could be causing the styled-component's flex value to not update?

I have a sidebar and main content on my website layout. The main content occupies most of the screen space, while the sidebar should only take up a small portion. Both elements are within a flexbox container, with the sidebar and main content as child divs ...

Creating Visuals from Text with ReactJS/NextJS

Looking to transform text into an image with a shareable link in ReactJS, similar to Spotify's lyrics sharing feature. I haven't attempted any solutions so far. I've explored various libraries without success. ...

`Why won't my xpath expression function properly?`

<DOC NUMBER=1> <DOCFULL> --> <br><div class="c0"> <p class="c1"><span class="c2">Document 1 of 3</span></p> </div> <br><div class="c0"> <br><p class="c1"><span class="c2"&g ...

Storing information from a table into LocalStorage

$('.new_customer').click(function () { var table = $("table"); var number = table.find('tr').length; table.append('<tr id="' + number + '"><td><input type="button" class="btn btn-success btn-xs" ...

Keystrokes may not consistently register in Firefox

I created a compact web application where users can interact by clicking on a button to trigger a modal dialog. Within this dialog, users have the ability to choose from various options. To enhance user experience, I implemented the utilization of the jQue ...

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

Applying flexbox to create a visually appealing design

Is there a way to achieve this layout using flexbox without relying on grid due to limited support in IE11? I want to be able to easily add or remove small divs without adding more containers. To see the desired layout, check out this image: Desired Layou ...

Utilize multiple background images in CSS with a set of three unique images

I have inserted three images into the background of my website's body. Two of them are displaying correctly (one with repeat-y), but the third one is not working. I've tried searching a lot but couldn't find a solution. body { backgr ...

Conceal the nearest parent element above using JavaScript (or jQuery)

I need to implement a functionality where clicking a button hides a specific HTML class. The structure of the HTML is as follows: <thead> <tr class="employee-list"> <th> <button class="show-emp">S ...

Troubleshooting my PHP MSQL Update function in CRUD operations

Having trouble with the Update function when trying to implement CRUD on my website. Can anyone assist me? I can successfully Create, Read and Delete, but updating is giving me issues especially for Admin users. Below is the code snippet: <?php // Inc ...

What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason. UPDATE: Thank you for the assistance, I was able to make the necessary adjustments. JSP: .ExeDropdown{ float: ...

Unable to stream Icecast link on Chrome browser

Recently, I encountered an issue with my custom-made player where no sound would come out when opened in Chrome. This has never happened before and I am puzzled as to why. Regardless of how the player is accessed - whether through a pop-up or by pasting th ...

Is there a way to prevent Javascript from modifying styles when printing?

Is there a way to prevent JavaScript from affecting styling during printing? For example, if I'm using JavaScript to hide certain content but want that content to be visible when printed. I have hidden a div using JavaScript and now I'm trying ...

Adjusting the background element of a fullpage.js layout during resizing and customization

Is there a way to make the background image responsive on a fullpage.js page, specifically for mobile and tablet devices? How can I ensure that a specific part of the image stays at the center of the page when resizing? For instance, in the provided imag ...

Retrieving precise passed arguments in the $(document).ready function

I am working on a gridview where I need the rows to expand and display the BatchID that is passed. Currently, I am using href="javascript:switchViews('div<%# Eval("BatchID")%>', 'one');" to pass this information, but I'm stru ...

Personalized Tumblr-style button

Hey there, I've been working on creating a custom Tumblr-like button and tried adding an iframe above it to make it clickable. However, something seems to be off as it's not functioning properly. I'm still trying to wrap my head around how i ...

`.svg file appearing slightly fuzzy when magnified in Chrome``

After careful consideration, I've chosen to use an SVG for my website logo. However, I am facing an issue with it rendering properly in Google Chrome. When the zoom level is set at 100%, the image appears blurry, but if I zoom out a couple of times, i ...