There seems to be a disconnect between CSS and HTML

I have tried troubleshooting my code based on other examples, but I am still unable to fix the issue!

For my project, I need to utilize XHTML and an external CSS file. While the HTML appears to be working fine, the CSS styles are not being applied to the webpage. I attempted changing the DocType and ensured that both files are located in the same directory.

This is what my setup looks like...

HTML (index.html)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Homepage</title>
    <link rel="stylesheet"
          type="text/css"
          href="style.css" />
</head>
<!-- etc... -->

CSS (style.css)

body {
    background-color: #EEE;
    font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
    margin: 0;
}
a {
    text-decoration: none;
    color: #000;
}
#container {
    background-color: #FFFFFF;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* etc... */

Answer №1

After careful consideration, I made the decision to retype the entire heading and it successfully resolved the issue at hand. I suspect that there were unseen characters embedded within the link tag, most likely occurring during the transition from textEdit to Sublime. I appreciate your efforts in attempting to assist me with this matter.

Answer №2

The following code snippet

<?xml version="1.0" encoding="UTF-8"?>
designates your file as an XML file. To remove this designation, simply delete that line. The link provided indicates a reference to a style.css file located in the same directory as your HTML file.

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

Verify that the style.css file exists in the specified location.

Ensure that the media attribute is declared in your link. Check out this specification for more information: Like this specification Furthermore, it's recommended to include standard headers in your code. Here is a list of valid DTDs to consider: http://www.w3.org/QA/2002/04/valid-dtd-list.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

Show a message using <li> tags that include <img> elements

I've been working on figuring out how to position text above or below an image like this: However, I'm facing an issue where only the images are being displayed (as shown in the example): I can't use the code from W3schools directly becaus ...

Mathjax3 causing bootstrap columns to become overwhelmed

Currently, I am utilizing MathJax3 in conjunction with Bootstrap4. It seems that the feature of automatic line breaking has not yet been incorporated into MathJax3. The code snippet below showcases a layout consisting of 3 columns: a left spacing column, ...

What is the best way to style the header of a table when scrolling in CSS?

Currently, I am facing an issue with applying the top CSS property to the thead element of a table while scrolling. I have attempted various methods but have been unsuccessful in achieving the desired outcome. Initially, I used the scroll event, however, ...

Is there a way in CSS/3 to dynamically adjust the height based on the width?

Is there a way in CSS/3 to maintain the shape ratio of a div while keeping it responsive? Let's say the container is 100px wide. For example: width: 100%; height: 100%-of-width; Result: The div is 100px wide and 100px high. Another example: ...

Combining the classes "col" and "col-3" simultaneously

I am utilizing the "col" class to generate 7 equal columns, with a responsive design that features two rows - one with 4 columns and the other with 3. Here is my code: <div class="row mt-20"> <div class="col col-3"> <img ...

Images with varying heights: A bug in Chrome and Safari

I have a div that is absolutely positioned from the top and bottom of the screen. The images inside the div are set to scale to fill the height, while maintaining proportionate width. The images are displayed inline, and I've added white-space:nowra ...

Using InnerHTML in Javascript within the Quasar/VueJS framework is unsupported

I am looking to dynamically create tables based on the items inside the 'counts' array below. The number of tables and their contents can change. Here is my divContainer, where the innerHTML will be appended: <div id="divContainer" style="pa ...

Looking for assistance with adjusting an image on your website? Let us

I've created a website , where I'm having some trouble displaying an image with past issues fully. Only half of it is showing up, and I'm not sure what the issue is. My ultimate goal is to add the image and link it to another site on the sa ...

Tips for designing a dropdown menu for selecting the number of passengers

Looking for guidance on adding a passenger count dropdown form similar to the one in the image below. I've searched everywhere but can't find a demo or any help. Can someone assist me with this? https://i.sstatic.net/RO1vi.jpg Appreciate any he ...

Stop HTML <dialog> from automatically closing using Vue

I'm working on a project where I need to use Vue to programmatically prevent an HTML dialog element from closing when the close event is triggered. Here's the code snippet I am currently using: import {ref} from 'vue'; const dialogTe ...

Layering digital sheets of paper and rearranging them with the help of CSS

I want to create a visual representation of a stack of paper sheets as a metaphor. The idea is to neatly stack the sheets on top of each other, with only the header of each sheet visible and the rest of the content covered. !-------------- | Sheet 1 +--- ...

Selenium typically only returns a portion of the script tag's content when using InnerText and InnerHTML

Seeking to automate front-end tests for a client's webpage in Selenium (java), I am faced with the challenge of extracting data from within the <script></script> tag in the provided HTML. <html> <head>...</head> <body& ...

Is there a way to reverse the image without physically clicking on it?

I've created a JavaScript code for matching images in a 4x4 grid. The goal is to flip the images when clicked and then flip them back if they don't match. I've managed to flip the images initially, but there's an issue with flipping the ...

What is the best method for creating a pop-up image with CSS3?

Hey there, I've been struggling to create a pop-up image effect using CSS and CSS3. Unfortunately, I'm facing some issues with pseudo-classes like (visited, actived, and focus) as they don't seem to work for me. The only one that works is ho ...

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

Hello, I am new to web development and could use some guidance on creating a popup window for users to enter their username and contact number. It should be able to store this information in a database and activate after the user has been idle for about 10 ...

Button click triggers popup

I have a basic HTML page with a button. I recently signed up for Mailchimp's newsletter and forms widget, and they provided me with a code to add to my site. The code currently triggers a pop-up when the page loads, but I would like it to only activat ...

Align the content of the list items to the center and position the list in the center of

I am struggling to get the List centered beneath "Contact Me" and the hr tag. Both of those elements are perfectly centered in the column, but the list and icons are aligned to the left. Ideally, I would like them to be in the center like everything else. ...

Difficulty encountered when trying to use Bootstrap tooltip with Bootstrap icon

Attempting to implement bootstrap tooltips on bootstrap icons with the following code: <body> <script> const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') ...

Attempting to develop a search feature for a multi-layered array using JavaScript

I've been attempting to search through a multidimensional array in JavaScript, but I'm facing some issues. Specifically, I am looking to input the first number from one of the 3 rows and retrieve the entire row. Essentially, my goal is to extract ...

Div text with superfluous line breaks

Whenever a user clicks the sign-up button ("Cadastrar" in Portuguese) on my website, the newsletter form successfully hides. However, there seems to be unnecessary line breaks in the success message. Why is this happening? I am trying to make sure that th ...