What is the reason behind HTML comment delimiters failing to function within HTML style tags?

Currently, I am utilizing CSS and HTML in my project. To implement styles, I am utilizing both an external stylesheet as well as a "style" element within the HTML to override certain styles.

However, I have encountered an issue. When I insert an HTML comment within the "style" element, the style override does not work as expected. Strangely enough, when I use CSS comments instead, the override functions correctly. Since the "style" element is part of HTML, it raises the question: why do HTML comments interfere with the overrides in the "style" element?

As an illustration:

<html>
    <head>
        <title>test</title>
        <style>
            <!-- body{background:#eee;} -->
        </style>
    </head>
    <body></body>
</html>

The provided example showcases the peculiar behavior of the styles being applied despite the presence of comment tags.

Check out the jsFiddle Demo (verified on Chrome 16.0.912.75 Windows 7)

Answer №1

When it comes to commenting on styles, use /* Style */ format, and for HTML make sure to follow the structure above.

Answer №2

CSS differs from markup languages as it is a standalone code block within an HTML page, much like JavaScript in a script block. While HTML comments are recognized throughout the HTML document, they do not function the same way inside a CSS style block.

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

Login block for Episerver

I'm brand new to episerver cms and I'm trying to add a "login block" to the top right corner of my home page where front-end users can log in. I've created a “LoginBlock”, ”LoginBlockController” along with a class called “LoginForm ...

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...

Setting the height of a child div: A step-by-step guide

Within a nested div with a height of 48px and positioned relatively, there is another child div also with a height of 48px. The goal is to set the maximum height of the child div to 80% and the minimum height to 40%. However, even after applying these sett ...

The length of the LinearProgress bar does not match the length of the navbar

Utilizing the LinearProgress component from Material UI, I created a customized ColoredLinearProgress to alter its color: import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import { LinearP ...

What is the best way to send an email with a randomly generated HTML output using a <button>?

I am currently working on a feature where a random HTML output is sent to me via email whenever a user clicks on a button on the website page. The user receives a code when they click the button, and I want that code to be emailed to my address automatical ...

Submitting data through a PHP server-side script

I am facing a dilemma regarding why the form is not submitting and directing me to the index.php page. Being new to PHP, I am attempting to utilize the User object. Below is my current progress: <main> <header> <h1>Cr ...

The bullets in the HTML unordered list are partially hidden from view

My unordered list is experiencing issues with displaying bullets correctly. In Firefox and Internet Explorer, the bullets are only partially shown, while in Chrome they are not visible at all. Adding margin-left: 5px to the <li> element resolves this ...

What is the best method for retrieving text from elements designated by class?

I am currently using BeautifulSoup to scrape data from a website, but I am facing an issue with extracting only the text I need. The specific part of the website data that I want to grab is: <div content-43 class="item-name">This is the te ...

Incorporating Javascript jQuery functionalities from an external file

I have encountered an issue when trying to run my index.html file with the control.js file that I outsourced. It seems like they are not working together properly: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.c ...

What is the best way to insert a React component or raw HTML into another React component?

Dealing with raw HTML markup returned from an AJAX call can be tricky in React. I've tried using dangerouslySetInnerHTML, but React just throws errors when I do. It's like trying to navigate through a maze. After some trial and error, I decided ...

Enhancing the appearance of an Angular.js application

On the same page, there are two buttons - one for buying and one for selling. It appears that both buttons share the same HTML instance. This creates a problem when trying to style them individually using classes, ids, or other HTML-targeted selectors, as ...

Using Node JS to serve an HTML file along with cascading style sheets

As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...

Creating a central navigation menu for a website

Currently, I am working on incorporating a menu in the center of a webpage (please note that this is not a top navigation menu). Here is the initial setup: Users are able to click on various menu items to access different content. I have written code fo ...

Is there a way to create a soft light blue backdrop for text using HTML and CSS?

Is there a way to create a light blue background effect behind text using HTML and CSS? You can view the image reference here ...

The lower division remains static when the browser window is resized

Why does the div with class .lower not move to the bottom of the page when the screen is resized? Could this be because of its CSS property position:absolute;? Check out the code snippet here. #lower { width: 100%; position: absolute; bot ...

Count duplicated values in an array of objects using JavaScript ES6

I am working on creating a filter for my list of products to count all producers and display them as follows: Apple (3) I have managed to eliminate duplicates from the array: ["Apple", "Apple", "Apple"] using this helpful link: Get all non-unique values ...

jquery add to table id, not to a table within

Having trouble adding a table row to a specific table ID without it appending to other tables with different IDs nested inside. I've searched for a solution but can't seem to find one. Can someone help me figure out what I'm doing wrong? Her ...

Issue with the read more button inoperative for two specific paragraphs

Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...

How can the spacing between Angular Material's mat-card-content and mat-card-actions be adjusted?

I am creating a mat card layout where there are two separate cards within the main card's content section. However, when I add a button for the actions section of the main card, there is no spacing between these two sections. How can I create a vertic ...

Adjust the column count based on the screen size, Susy suggested

When using the Compass/Sass plugin Susy, you typically set the number of columns in the _base.scss file. I prefer to have 12 columns for a desktop view, but this may be too many columns for a mobile display. Is there a method to alter the number of column ...