Connecting two distinct HTML pages to two disparate CSS files

Recently, I encountered an issue while working on my website in Dreamweaver. The problem arose when trying to link a CSS file to an HTML page.

While the index.html page was successfully linked to style.css and displaying correctly, the Products.html page failed to be linked to styleproducts.css. Both CSS files were stored in a folder named "css," while Products.html was saved in a folder labeled "pages."

Below is the code snippet from Product.html for linking the CSS file:

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

I would greatly appreciate any assistance with this matter!!

htmlcss

Answer №1

Your direction is incorrect, try this instead

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

Your Product.html file is located in a different directory. Therefore, you must navigate out of the current folder using "../" and then enter the "css" folder.

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

The GET method is designed to automatically eliminate any trailing whitespace in the

Whenever I utilize the GET method to transmit a text to the server, like 'abc ', I notice that the whitespace characters at the end are always removed. As a result, the server receives 'abc' instead of 'abc ' My question is w ...

htmlgetwhitespace

CSS styling for a container element that enables word wrapping on child divs, while also being able to stretch to accommodate the width of its children

Is it feasible to create CSS that allows an element to support word-wrap:break-word, while also adjusting its width to fit the content when breaking is not possible? <html> <style> .outer { background-color:red; word-wrap:break-wor ...

csswebkitword-break

Struggling with pagination problems in Bootstrap 4 and looking to integrate QR code functionality into your blade template?

I am currently facing an issue with generating a batch of QR codes using the SimpleQR code generator in Laravel blade template on the fly for printing. The problem arises when a page break occurs, as it breaks the QR code. I attempted to use the break-insi ...

cssbootstrap-4printinglaravel-blade

Adjust the width of the column to only contain fixed content and not span the entire page

Check out my solution on Plunkr to see the issue I'm facing: Plunkr I'm dealing with a layout that includes a menu on the left and page contents on the right. My goal is to have the menu fixed in place so that it doesn't move when the page ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The PHP code encountered a syntax error due to an unexpected $EOF on the final empty line

I've been tasked with maintaining an old website that went offline due to script errors. I managed to resolve most of the issues in the script, but there's one error that's giving me trouble. The site is showing a syntax error that says "une ...

javascriptphphtmlsyntaxeof

What is the process for defining a date range in HTML5?

I am currently working on a wedding website and I am trying to set up a countdown for the wedding date. However, I am having trouble figuring out how to correctly display the countdown. https://i.sstatic.net/iGikh.png Here is the code snippet that I am u ...

htmltwitter-bootstrap

Continue scrolling once you reach the fixed-positioned div

live demo html <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> css .container{ margin: 0; padding: 0; ...

jqueryhtmlcss

Exploring the textures of an imported 3D model mesh with multiple materials in A-Frame and Three JS

Currently, I am exploring A-Frame using a 3D model imported from Blender. Some parts of this model contain multiple meshes with two or more materials assigned to them. It is easy for me to adjust the material properties of meshes with just one material. ...

javascripthtmlthree.jsaframe

What is the best way to position a div at the bottom of the main div?

How can I position a div with the class "boxLinks" at the bottom of the main box with the class "main-box"? Here's my idea: The main class has a width of 1200px; within this main class, there are 5 divs with each div having a width of 25%. .main- ...

htmlcss

Develop a custom input field feature that utilizes both JavaScript and CSS

I really appreciate the feature that allows me to resize the textarea by simply clicking and dragging on the slanted lines in the lower right hand corner. However, I am looking for a way to apply CSS styles to text which is not possible with a textarea. ...

javascripthtmlcss

Columns of varying widths, with a solid border separating each one

I am working on a layout with a fluid width left column and a fixed width right column. My challenge is to add a border that spans the entire height of the tallest column. Below is a simplified version of my current setup: .left { width: 100%; fl ...

htmlcsslayoutjsfiddle

Issue with Hover Effect for Input Type in Submit Form in HTML and CSS

In the following HTML code, a form is displayed inside a card HTML. The form appears after an onlick function which functions correctly. However, the submit button in the form below does not display a hover effect. <!-- Update details form here --> ...

htmlcss

Transfer data from TWO input fields within a PHP document to another PHP document using only one submission button

Is it possible to have two textboxes and submit the values entered in them to another PHP file using a single submit button? Transferring value from page1.php to page2.php Currently, I am able to pass a value from one text box: <form action='pag ...

phphtmltextboxsubmit

Transforming dynamic table text into an image: Step-by-step guide

I have a live scoreboard on my website that pulls information from another site, making the content dynamic. I want to enhance the display by replacing certain elements in the table with images, such as displaying logos instead of club names. However, my k ...

javascripthtmljquerycss

Tips for setting the style of child components in a ReactJS project with CSS modules, classNames, and JSX syntax

Currently in the process of setting up a project using React JS and I am interested in incorporating auth0 for authentication purposes, along with potentially integrating some serverless functions. auth0 conveniently offers a pre-made "seed" project at ht ...

csstwitter-bootstrapreactjsauth0

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...

jquerycssmenu

Tips on enabling users to update SQL database data on an HTML webpage

The mySQL database stores user input from a form like this: <form action="demo.php" method="POST"/> <p><label>title:</label> <input type="text" name="titulo" required/></p> ... $value = $_POST['titulo'] ; ...

phphtmlmysqlsqlforms

Read through the text, determine the length of each word, and keep track of how

Objective: Create a JavaScript program that takes input from users in the form of several lines of text and generates a table displaying the count of one-letter words, two-letter words, three-letter words, etc. present in the text. Below is an example ou ...

javascripthtml

Troubleshooting: CSS button animation not functioning

Attempting to create a hover animation for buttons on my webpage, I crafted the following CSS code: #B1 { margin: 50px; margin-top: 50px; margin-bottom: 50px; flex: 1 1 auto; padding: 20px; border: 2px solid #f7f7f7; text-align: center; te ...

javascripthtmlcss

Determine the initial left position of a div element in CSS prior to applying

Scenario : const display = document.querySelector('.display'); const container = document.querySelector('.outer-div'); document.addEventListener("click", (event) => { if (!event.target.closest("button")) return; if(event ...

javascriptcsscss-transitionsgetboundingclientrect