I am facing an issue where my CSS file is not connecting with my HTML

I added the link to my html pages, but my css is only showing up on the first page and not on any of the others.

<head>
    <title>Angels Drawings</title>
    <link rel="stylesheet" href="style.css">
    <STYLE>
    <!--
    A{text-decoration:none}
    -->
    </STYLE>
</head>

<body>
    <h1>Angel</h1>
    <ul>
        <li>Home</li>
        <li><a href="Pages/Page2.html">Page 2</a></li>
        <li><a href="Pages/Page3.html">Page 3</a></li>
    </ul>
    <h2>This is her website</h2>
    <p>And this is all the info</p>

</body>

Answer №1

Make sure to keep in mind that when dealing with multiple pages in different directories, the relative paths for resources like CSS files will need to be adjusted accordingly. If you try to use the same URL for the CSS file on pages in different directories, it will not work as intended.

After discussing the specific use case with the original poster, it was clarified that in the Angelswebsite.html file, the CSS link should be:

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

For all the pages within the Pages subdirectory, the CSS link should be adjusted to:

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

Tips for swapping out text with a hyperlink using JavaScript

I need to create hyperlinks for certain words in my posts. I found a code snippet that does this: document.body.innerHTML = document.body.innerHTML.replace('Ronaldo', '<a href="www.ronaldo.com">Ronaldo</a>'); Whil ...

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

Recently, I've been developing a left swipe gesture handler for chat bubbles. Implementing touchMove and touchStart seems like the logical next step, but for now, I'm focusing on making it work seamlessly for PC/web users. I managed to make it f ...

Why don't inline style changes implemented by JavaScript function properly on mobile browsers like Chrome, Dolphin, and Android?

View the jsFiddle here Issue on PC/Windows browser: When performing action, h1 header "gif" disappears and video starts playing. Problem on mobile devices: The gif does not disappear as expected but the video still plays indicating that JavaScript is fun ...

Converting a Powershell array into an HTML format

I have three arrays that I need to display on an HTML page: foreach($item in $array1){ // write array data to HTML } foreach($element in $array2){ // write array data to HTML } foreach($value in $array3){ // write array data to HTML } What is the ...

Choosing JavaScript

<select> <script type="text/javascript"> $.get( 'http://www.ufilme.ro/api/load/maron_online/470', function(data){ var mydata = new Array(); var i = 0; // индекс масси ...

Tips for ensuring compatibility of CSS in IE7 and IE8

Despite using the following styles to dynamically display alternative colors in my HTML code, I am facing compatibility issues with IE7 and IE8. Surprisingly, everything works perfectly fine on IE9 and above. It seems these styles are not supported by IE7 ...

The browser is opting to download the HTML file rather than displaying it

Recently, I set up a server using Node.JS express where I specified the location of an HTML file in the public folder. app.use(express.static(__dirname + '/public')); app.listen(8080); In previous projects, this setup worked seamlessly. However ...

How can you use a jQuery Selector to target all images and sources within dynamic containers?

I am currently attempting to identify all images and their paths (srcs) within the dynamic containers. The dynamic containers refer to container patterns stored in an array, which is filled dynamically. For example: var containers = new Array( ...

PHP combined with jQTouch

I have a form on an HTML page that is passed to a PHP script. The PHP works fine, but I am facing some issues in displaying the HTML content on the PHP page. When I use <?php echo $message; ?> in the body of the HTML, the variable displays properly. ...

Tips for concealing overlay when the cursor hovers

Can anyone help me with a code issue I'm having? I want to hide an overlay after mouse hover, but currently it remains active until I remove the mouse from the image. Here is the code: .upper {position: absolute; top: 50%; bottom: 0; left: 50%; tra ...

Strategies for styling the contents within <details> while excluding <summary> in CSS

I'm attempting to apply a 10px padding to the Story box using CSS, without introducing any additional HTML elements into the website code. Is there a way to include the padding in the Story box without incorporating a new HTML element? To clarify: H ...

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

As I work on developing a web app using Yeoman and the Angular generator on Windows 7, I go through the process of running 'yo angular' followed by 'grunt' to build the app for deployment. The index.html file in the dist folder gets upd ...

Interactive table with dynamic data retrieval

I need help displaying data dynamically from a datatable using an API. The API I am working with is located at this URL and I am utilizing the bootstrap4 datatable. You can also find my code on this JSFiddle. Can someone provide guidance or an example on h ...

What is the best way to generate a fresh JSON object within a react hook function?

I am currently facing two issues. Firstly, I am having trouble figuring out how to add/update the JSON items within a hook. Secondly, React seems to be restricting me from using the name that is stored in a previous JSON file. I am open to exploring alter ...

What are some techniques to create a dynamic background for a div that

I've been attempting to create responsive background images within a div element, but unfortunately, my current method is not producing the desired results. Below is an excerpt of my CSS code: .block-main{ background: url(images/ohdaihiep/bg1. ...

Troubleshooting: Issues with Angular form validation functionality

I am completely new to Angular and attempting to create a signup form. Despite following tutorials, the form I've built doesn't seem to be validating properly. Below is the code that I have been using: <div class="signup-cont cont form-conta ...

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

Stack Divs Without Using Absolute Positioning

Attempting to overlay divs without using absolute positioning has been quite a challenge. The issue arose when trying to integrate a Paypal cart through Javascript on the website. By default, the cart was positioned closely to the top margin of the webpage ...

The bar chart in chartjs is not displaying properly due to incorrect grouping

I attempted to generate a multi bar chart using Chart.js, but encountered an issue where the jobType and jobCount were not displayed correctly based on each companyName. Below is the table: https://i.sstatic.net/ZyKZH.png Here is the PHP file (CompanySel ...

Unique solution: "Using CSS to ensure the overflow document always scrolls to the bottom

Is there a way in CSS to make a div with overflow: scroll always automatically scroll to the bottom along the Y-axis, regardless of its content? For example, like a chat thread that consistently displays the latest message at the bottom. I've encount ...