What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

As a beginner, I am facing an issue with my CSS. When I directly insert the CSS into the head of my .html file, everything looks perfect. However, when I link my .css file into the head, the very first word ("Holy") does not display properly. I have double-checked the CSS to ensure it is the same whether pasted or linked, but I'm still unable to find a solution. Any help would be greatly appreciated. Thank you in advance.

This is the CSS code:

<span class="holy"></span>
<span class="waiving"></span>
<span class="american"></span>
<span class="flag"></span>
<span class="batman"></span>

<style>
  .holy {
    background-color: red;
    color: white;
  }
  .waiving {
    background-color: white;
    color: blue;
  }
  .american {
    background-color: blue;
    color: white;
  }
  .flag {
    background-color: white;
    color: red;
  }
  .batman {
    background-color: black;
    color: yellow;
  }
</style>

And this how I've linked it where only the First "Holy" doesn't work:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="batman_with_css.css">
</head>

<body>
  <span class="holy">Holy</span>
  <span class="waiving">Waiving</span>
  <span class="american">American</span>
  <span class="flag">Flag</span>
  <span class="batman">Batman!!!</span>
  <br>
  <img src="https://i.pinimg.com/736x/af/7b/d3/af7bd3df85c1397456084b29e3729269--keaton-batman-batman-car.jpg">

</body>
<html>

Finally, here is the HTML file with the CSS code within the head where everything works correctly:

<!DOCTYPE html>
<html>
<head>
  <span class="holy"></span>
  <span class="waiving"></span>
  <span class="american"></span>
  <span class="flag"></span>
  <span class="batman"></span>

  <style>
    .holy {
      background-color: red;
      color: white;
    }
    .waiving {
      background-color: white;
      color: blue;
    }
    .american {
      background-color: blue;
      color: white;
    }
    .flag {
      background-color: white;
      color: red;
    }
    .batman {
      background-color: black;
      color: yellow;
    }
  </style>

</head>
<body>
  <span class="holy">Holy</span>
  <span class="waiving">Waiving</span>
  <span class="american">American</span>
  <span class="Flag">Flag</span>
  <span class="batman">Batman!!!</span>
  <br>
  <img src="https://i.pinimg.com/736x/af/7b/d3/af7bd3df85c1397456084b29e3729269--keaton-batman-batman-car.jpg">
</body>
</html>

Answer №1

It is important to avoid inserting HTML code into stylesheets, as this can lead to issues, such as including unnecessary span elements at the beginning.
To resolve this, modify your CSS file to resemble the following:

.sacred {
background-color: green;
color: gold;
}
.freedom {
background-color: silver;
color: black;
}
.brave {
background-color: red;
color: blue;
}
.liberty {
background-color: white;
color: navy;
}
.heroic {
background-color: maroon;
color: gold;
}

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 attempt to run 'setProperty' on 'CSSStyleDeclaration' was unsuccessful as these styles are precalculated, rendering the 'opacity' property unchangeable

I am attempting to change the value of a property in my pseudo element CSS class using a JavaScript file. Unfortunately, I keep encountering the error mentioned in the title. Is there any other method that can be used to achieve this? CSS Code: .list { ...

The image disappears when I click on a link and then return to the main page, but this only happens in Mozilla Firefox

Upon opening the main page, everything functions flawlessly. However, if I navigate to another page through one of my href links and then return to the main page, my div with the class "bild" disappears. Oddly enough, this issue only occurs in Mozilla Fire ...

Interact with a dropdown menu using Selenium

Typically, my approach with the Selenium Select object is as follows: val selectCode = new Select(driver.findElement(By.id("someID"))) selectCode.selectByValue("4") The issue arises when there is no value in the html code. Here is an example of a ...

Vuetify's scrolling list feature allows for smooth navigation through a list

Check out my Vuetify code snippet that utilizes a list: <v-list> <v-list-tile v-for="user in users" :key="user.id" avatar @click="" > <v-list-tile-content> < ...

Adjust the appearance of an element based on user selection from a dropdown menu under certain circumstances

I am working on creating a dropdown menu using a JavaScript array. My goal is to display a specific span element when certain options are selected. For instance, I want the span to be shown only when options "a" and "c" are selected, but not when option " ...

What's going on with the background color? It doesn't seem

I have incorporated Bootstrap into my html code and I am attempting to modify the background color of a div when the screen resolution changes from large to medium or small. Even though I have added a class, the change does not reflect when adjusting the ...

The Bootstrap column and row elements are having difficulty cooperating with their respective parents and children

Bootstrap functionalities like -xl are working, but when I use multiple classes such as col-lg-4 and col-md-4, they do not align in one row. I have already set the parent to row and the child to col, but they are still not displaying correctly. Images th ...

Troubleshooting border problems with Bootstrap 3 tables

Recently, I encountered a problem with the Bootstrap 3 table-bordered where the right border was not showing up. Below is the code snippet of my table: <table class="table table-bordered table-hover"> ... </table> Upon inspecting the table vi ...

What could be causing my Bootstrap carousel to only slide once?

I'm currently working on integrating a Bootstrap Carousel into my website, but I've encountered an issue where it moves only once and then becomes unresponsive. After checking the file order, I couldn't find any issues there. So, I'm qu ...

Troubleshooting HTML/CSS problem related to background size adjustment

Struggling with setting a background image on my HTML code. The issue is when I resize the browser, the image either zooms in too much or cuts off part of the website. Is there a way to resize the background image based on the browser window size? Appreci ...

Tips for changing the color of an underline in an <a> tag when it is hovered over

Is it possible to change the color of the underline in an <a> tag when hovering over it? After some investigation, it seems that direct color changes are not feasible. Instead, you can use the border-bottom option. However, my attempt did not yield ...

Learning how to access my CSS file using Express and Node.js

I am new to using express and node.js. I am trying to develop my app, but for some reason, my style.css file is not being recognized and I am unsure why. Initially, I attempted to use .scss files, but after researching, I discovered that it was not possi ...

CSS dilemma: A snag with pointer-events and the a:focus attribute

Does anyone have experience troubleshooting issues with navbars? I could really use some help. I am facing an issue with my navigation bar where I have different links that reveal an unordered list of sublinks upon clicking. The CSS for my <ul> is ...

Issue with scrollTop not functioning when using onclick on an <a> tag within a div

After various attempts and research online, I am still experiencing erratic scrolling behavior with the scrollTop function. My goal is to scroll within a specific div when clicking on links. The content of my div: <div id="test" style="height:400px; o ...

The Page Transcends the Boundaries of the HTML Tag

This particular issue sets itself apart from the common overflow problems that are often faced by people. Interestingly, I have only encountered this problem while using Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox, on the other hand, seem to b ...

Tips for receiving notifications when the Collapsible collapses

I'm having trouble figuring out how to receive notifications when the Collapsible is expanded and collapsed. Currently, I am not receiving any type of notification. Any suggestions on how to make this work? Below is my code: --Imported jQuery < ...

Updating the DOM through Long Polling allows us to maintain existing attributes in jQuery Plugin

UPDATE: The functionality is all set; the pushes are working. The only issue I'm facing is that each push resets the #load_info div to empty. Is there a way to retain the original content inside the div, even though the content will be an updated vers ...

Jumbotron causes navigation bar to malfunction on mobile site

I'm experiencing an issue with Bootstrap Jumbotrons on my website - they extend beyond the container, causing the navbar on the mobile version to not fill the screen. This problem only occurs on pages with a jumbotron present. Attempting to use a Car ...

The function Mediarecorder.start() is experiencing issues on Firefox for Android and is not functioning

Recently, I've been facing a peculiar issue while developing a web application. The purpose of this app is to capture about 10 seconds of video intermittently from the device webcam and then upload it to a server. For this functionality, I utilized th ...

Opacity of background color only applies to the color

So, here's the scenario - I currently have a background that looks like this: background:url(../img/arrow_lch.png) right no-repeat #2e443a; The challenge I'm facing is how to decrease the opacity of only the background color (#2e443a). Any sugg ...