Div element is not being styled by the second CSS class

I'm facing an issue while trying to split my html code into separate php files. I can't seem to figure out the error in my index.php file. Here is a snippet from the file:

.topheader {
  background-color: #404040;
  color: white;
  padding: 16px;
}

.footer {
  background-color: #404040;
  color: white;
  padding: 16px;
}
<head>
  <link rel="stylesheet" href="./css/main.css">
</head>

<div class="topheader">
  <h1>KivaGIS</h1>
</div>

<div class="footer">
  <h1>Footer</h1>
</div>

Currently, only the .topheader style seems to be applied to the HTML. Both classes are identical and I will enhance them individually once this issue is resolved. Can anyone please review and let me know why the .footer style is not being applied?

Here is a screenshot of how it looks on my machine:

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

htmlcss

Answer №1

It appears to be functioning correctly for me, with the .topheader and .footer elements having distinct styles.

.topheader {
  background-color: #404040;
  color: blue;
  padding: 16px;
}

.footer {
  background-color: #404040;
  color: red;
  padding: 16px;
}
<head>
  <link rel="stylesheet" href="./css/main.css">
</head>

<div class="topheader">
  <h1>I AM BLUE</h1>
</div>
<br>
<div class="footer">
  <h1>I AM RED</h1>
</div>

Answer №2

When it comes to your document, make sure that both the .topheader and .footer classes have the same style. By simply adjusting the style values, you will notice a significant difference.

.topheader {
  background-color: #404040;
  color: white;
  padding:16px;
 }
.footer {
  background-color: #FFEE00;
  color: Red;
  padding:16px;
 }

Answer №3

Take a moment to review this code and ensure that the href of your stylesheet is correct in your own code.

<!DOCTYPE html>
<html>
<head>
 <style>
.topheader {background-color: #404040;color: white;padding:16px;}
.footer {background-color: #404040;color: white;padding:16px;}
</style>
</head>
<body>
<div class="topheader">
  <h1>KivaGIS</h1>
</div>

<div class="footer">
  <h1>Footer</h1>
</div>
</body>

Answer №4

It was brought to my attention by others that the code itself was not the issue. I hadn't realized that Chrome had been caching the CSS file, causing me to spend the entire night updating it without seeing any changes due to an older version being used by Chrome.

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

After disabling the cache, as shown in the attached screenshot, everything is now functioning perfectly.

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

Customizing Bullet Points in CSS Styling

In an attempt to replicate a specific style in my <ul>, I have utilized the CSS property list-style-image. However, I am facing difficulties aligning the text after the image. How can I achieve this desired alignment? You can view the current output ...

htmlcsstwitter-bootstrapbootstrap-4sass

What are some methods to avoid clipping absolute positioned elements while maintaining a box shadow around the parent div?

Here is an example to illustrate my question: Example Code The code provided above is a simplified version of my actual code. I am facing an issue where setting the wrap-div to overflow: visible prevents the menu from being cut off, but it also causes the ...

javascripthtmlcssoverflow

Not all words are compatible with word-wrap, don't you think?!

I have a situation where I used the following CSS properties for a div: word-wrap: break-word; text-align: justify; When a single word is too long to fit within the width of the div, it wraps or breaks into multiple lines. However, if a second word with ...

javascripthtmlcss

Adjust the size of the Error Validation message container

https://i.sstatic.net/e6Lor.png Once validations are added, the error message is displayed within the width of that div. How can I adjust the width to make the error message fit on a single line? Alternatively, if there are other methods for front-end val ...

htmlcssbootstrap-5

Footer not sticking to the bottom of the page with Material UI

View Page Screenshot My challenge is with the Footer using AppBar when there is no content. It doesn't properly go to the end of the page, only to the end of the content. I want it to stick to the bottom of the page if the content doesn't reach ...

htmlcssreactjsmaterial-ui

Insert a new, unique div onto an HTML webpage using JavaScript, ensuring no duplicates are created

Having an issue with this code snippet where nothing is being added. It seems like the variable result may not be taking a number or something else, but I'm not entirely sure why. $(document).ready(function () //document.getElementById(1).style. ...

javascriptjqueryhtmlcss

Tips for creating a fixed width div

Here in this code snippet http://jsfiddle.net/sjD24/6/ You will see a table (or matrix as some may call it) of bookmarks. Each row is identified by a tag. The challenge here is to make sure that the column for tags has a consistent width. The specific c ...

htmlcss

Issues encountered with integrating external jQuery/JavaScript functions with Wordpress child theme template

After creating a custom template in my WordPress child theme, I added a link to the Bootstrap v3.0.3 .js file stored on my site. While the popup modal is functioning properly, the jQuery tabs seem to be having some issues. Although they are being display ...

javascriptjquerycsswordpress

"Discover the power of Jade template engine: A guide to effortlessly setting a stunning background image

Is there a way to add a background-image to my HTML page when using Jade? I would really appreciate any guidance on how to do this. Thank you in advance! ...

htmlpug

Deleting various classes (jQuery)

Is there a more effective alternative to rewriting the following code snippet? $('element').removeClass('class1').removeClass('class2'); I am unable to utilize removeClass(); because it would eliminate ALL classes, and that ...

jquerycss

Ensure that the user's browser cache is cleared after deploying a new version on Firebase hosting

Utilizing create-react-app for my front end scripts and firebase hosting for deployment has been smooth overall. However, I've encountered an issue where updates to CSS and HTML files don't always reflect on the domain until I manually clear the ...

htmlcssreactjsfirebasefirebase-hosting

Puppeteer's flawed performance leads to the generation of low-quality

Currently, I am utilizing puppeteer to generate a PDF from my static local HTML file. However, the resulting PDF is turning out to be corrupted. When attempting to open the file using Adobe Reader, an error message pops up stating 'Bad file handle&apo ...

javascripthtmlnode.jspdfpuppeteer

Ways to incorporate a dynamic HTML form that allows for input elements to be added both horizontally and vertically while maintaining connected lines

Looking to design a form that showcases HTML elements in both vertical and horizontal positions, with lines connecting them as seen in this example: https://i.sstatic.net/jB12f.png. Can anyone offer guidance on how to achieve this? Thanks! ...

javascripthtmlcssvue.jsvuejs2

Unlocking the API endpoints within nested arrays in a React project

{ [ "quicktype_id": 1, "quicktype": "Laptops", "qucik_details": [ { "type_name": "car", "type_img": "car_img" }, { "type_name": "van", "type_img": ...

javascripthtmlreactjsarraysapi

Displaying truncated title text

Would it be feasible to display clipped text (overflow: hidden) in a way that is fully readable when hovered over? An attempt like this: div:hover { overflow: visible; background-color: yellow; } results in the text overlapping, making it impossible ...

htmlcsshoveroverflow

Maintain scroll position when updating the DOM in Vue.js

Currently, I am working on a chat application that loads recent chat messages and stores them in an array called messages. As users scroll through the history, previous chat messages are loaded and added to the beginning of the messages array. One challeng ...

javascripthtmlvue.js

jQuery Mishap - Creating an Unspecified Issue

At the moment, my website displays a list of registered users in one column and their email addresses with checkboxes next to them in another column. Users can check the boxes and then click a submit button to generate a list of the selected emails separat ...

javascriptjqueryhtmlcss

Troubleshooting Problem with HTML Links in jQuery Accordion

After experimenting with adding a link to the HTML section of the accordion, I discovered that the link appears bold and does not open. I attempted to create a class or ID to fix this issue, but my efforts were unsuccessful. http://jsfiddle.net/q2Gm9/ ...

jqueryhtmlcsshyperlink

Struggling to format a responsive CSS background image

I'm facing an issue with setting responsive dimensions for a background image within a div that displays differently on mobile. Currently, I am manually specifying the width and height, but I want to avoid doing so. When I try using 100% for the width ...

htmlcss

The button is only partially visible

My HTML code for a small web app has a button that says "ok," but it's too tiny to display the text fully. I wonder if I'm missing something with the span element? How can I enlarge the button so that it's bigger and shows the entire "ok" ...

htmlcssbutton