HTML unable to connect with CSS

I have been attempting to modify the background color of a webpage by linking an external style.css file to my index.html using the href attribute:

<!DOCTYPE html>
<html>
    <head>
        <!-- <meta charset="utf-8"> -->
        <!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
    </head>
    <body>
        <!-- body content goes here -->
    </body>
</html> 

The CSS code I am using is simple:

body
{
    background-color: aqua;
}

This is the structure of my project:

https://i.sstatic.net/d7HJR.png

Keep in mind that index.html is located in the main project folder (freebookz), while style.css is in a separate folder (css). Therefore, the href attribute reads as follows:

href="css/style.css"

The issue I'm facing is that the CSS file is not being linked. I've tried this setup both in Vscode and Notepad++, with no success. Even reloading the page with SHIFT+CTRL+R has not resolved the problem.

If anyone can help me identify the error, I would greatly appreciate it. I have exhausted all attempts to troubleshoot on my own.

Answer №1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Welcome to the paragraph section</p>
</body>
</html>

Answer №2

Ensure to verify your media attribute within the

link tag, as you have mistakenly used a Unicode character “”” (U+201D)
instead of double quotation marks.

Take a look at my corrected code snippet below and integrate it into your own code for proper functionality:

<link rel="stylesheet" href="css/style.css" media="screen"/>

Please confirm if this resolves the issue on your end?

Answer №3

Yes, you are correct. Have you attempted to remove the comments? For instance:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css" media=”screen”/>
    </head>
    <body>
        <!-- body of...body -->
    </body>
</html>

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

Maintain the aspect ratio of an image within a flex container when the height is adjusted

I'm currently facing an issue with an image in a flex container. My goal is to maintain the image's ratio when the height of the container or window is decreased or resized. Check out this sample fiddle html, body { height: 100%; } .wrappe ...

Looking to utilize the jQuery Colorbox plugin for submitting a form using AJAX

Is it possible to use the colorbox plugin to submit a form through ajax and display the response in a new modal window? For instance, a user clicks a link which opens a modal dialog. Upon submitting the form within this modal, the modal should update wit ...

How can I use jQuery to add styling to my menu options?

Looking to customize my menu items: <ul> <li class="static"> <a class="static menu-item" href="/mySites/AboutUs">About Us</a> </li> <li class="static"> <a class="static-menu-item" href="/m ...

Experiencing issues with the overflow-x property not functioning correctly

This is my interesting <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <style type="text/css"> .bigbox { width:1024px; height:600px; background-c ...

Child component isn't receiving Angular flex layout styling

I am attempting to build a flexible layout grid component using mat-cards in Angular as shown below: <div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10" > <app-ca ...

My website doesn't seem to support Javascript, although it works perfectly on jsfiddle

I was tinkering around on jsfiddle and managed to get my code working flawlessly. However, when I tried to copy and paste it elsewhere, the functionality broke down. It seems that for some inexplicable reason, the code doesn't seem to pass through the ...

Label alignment in one line with responsive checkbox

Could someone assist me with adjusting the alignment of this checkbox when resizing the window for mobile view? The label text is breaking into a new line while the checkbox remains in its original position. How can I make the checkbox align closer to its ...

"Struggling with a basic Javascript function to refresh parts of a web page by calling a .php

After spending several hours browsing the internet, I am still struggling to get this straightforward example to function properly. Could someone please lend me a hand? My goal is to use JavaScript to display the contents of a PHP file. The display should ...

Adjusting the size of text in KineticJS to ensure it fits comfortably within a rectangle while

Check out this link: http://jsfiddle.net/6VRxE/11/ Looking for a way to dynamically adjust text, text size, and padding to fit inside a rectangle and be vertically aligned? Here's the code snippet: var messageText = new Kinetic.Text({ x: .25* ...

PHP-generated AngularJs Select Element

I'm facing an issue with my PHP function in my AngularJS application. I have created a function to select a default option, but it's not displaying the desired value. Here is the function code: function qtyList($selectName, $selectQty){ $st ...

"Looking to create a voting button similar to Stackoverflow's up-down feature? Let's explore how you

Challenges to Overcome What is the best approach for creating Ajax buttons (upward and downward arrows) that allow users to increase or decrease a number? How can user actions be stored in a variable called NumberOfVotesOfQuestionID? I am undecided on w ...

Tips for altering the design of a registration page

I'm struggling to modify my registration page layout so that the avatar is positioned on the left while the username, password input boxes are on the right. I attempted to use split divs without success and also tried adjusting the positioning of the ...

Switch the background image of one div when hovering over a different div

Can anyone assist me with creating an interactive map where continents light up as you hover over them? I am using multiple images within div elements in order to achieve this effect. Specifically, I want to change the background image of one div when hove ...

Using PHP to upload a lone image file to an FTP server

I'm feeling frustrated trying to achieve a simple task. I just want to create an HTML form and use PHP to upload the selected file to a specific directory on an FTP server, but for some reason it's not working as expected. Here is the HTML form ...

Creating immersive experiences with fabric.js in fullscreen mode on canvas

Attempting to implement a fullscreen mode (using HTML5 fullscreen) for a canvas object created with Fabric.js. var canvas = fabricCanvas.getSelectionElement(); if(canvas.requestFullScreen) { canvas.requestFullScreen(); } else if(canvas.webkitRequestFu ...

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

While we are familiar with pseudo-classes like :before and :after, have you ever wondered why there is no nav ul li a:left or :right? Do you think it's achievable? I'm open to using HTML5, CSS3, and JavaScript to make it happen. ...

The `background-size` property in jQuery is not functioning as expected

I am facing the following issue: When I click on a div with absolute positioning, I want to animate its position, width, and height. In addition, I want to change the background-size using jQuery. However, the problem is that all CSS properties are updat ...

Enhancing CSS and HTML: Increasing the Border Color of Dropdown Menus and Utilizing Multiple Words per Dropdown Item

https://i.sstatic.net/ZI8Ch.png CODE div.box { display: block; text-align: center; margin: auto; z-index: 5 } #navMenu { margin: 0; padding: 0; } #navMenu ul { margin: 0; padding: 0; line-height: 30px; } #navMenu li { margin: 0; padding: 0; list- ...

Is there a way to retrieve the list element that was added after the HTML was generated?

How can I reference a list element added using the append function in jQuery within my onclick function? See my code snippet below: $(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET ...

Cannot find CSS selector during web scraping operation

I recently started exploring web scraping and I'm currently working on extracting data from the following website: Specifically, I'm focused on extracting information from a particular table. However, the data in this table is not formatted in a ...