Comment causing problems in HTML code

StackOverflow https://stackoverflow.com/questions/22285821

Question

i'm starting to learn HTML and am being introduced to CSS.

I am trying to turn a from black to green (pretty simple). Now, since this is for my own learning, i am adding my own comments for referral.

I noticed that if i kept the comment in, the CSS wouldnt work and the text would stay black, but when i remove the comment, the CSS worked?

Can anyone explain why this is happening please?

Here is the code i have for this 

<html xmlns="http://w3.org/1999/xhtml"> 

<head> 
<title>Homepage</title> 
<meta http-equiv="Content-type" content="text.html; charset=UTF-8"/>
<meta name="keywords" content="CCS, in-line, internal, external, style sheets"/>
<meta name="description" content="CSS internal, external and in-line"/>
<meta name="author" name = "Jordan Atkinson" />

<!-- internal CSS, this is to be put after the meta tags and will be inside a tag called <style type="text/css>
This is the tag that is used so that CSS can recognise its start point, imagine it as the public static void main(String[] args) in Java-->
<style type="text/css">

<!-- Typing h1 (known as a 'selector' selects the element in the body you want to apply the CSS, the braces is where you put the attributes and values to
style an element. H1 can be any tag within the body, so you could type table if you wish to apply styles to tables. Color (american spelling):green 
changes the color to that specified after the colon. after the green, you MUST always end with a semi colon.-->
h1 {color:green;}

</style>

</head>

<body>

<h1>Homepage</h1>


</body> 

</html>

The comment which is causing the problem is this:

<!-- Typing h1 (known as a 'selector' selects the element in the body you want to apply the CSS, the braces is where you put the attributes and values to
style an element. H1 can be any tag within the body, so you could type table if you wish to apply styles to tables. Color (american spelling):green 
changes the color to that specified after the colon. after the green, you MUST always end with a semi colon.-->

Any help would be grateful.

Regards

Jordan.

Was it helpful?

Solution

Style elements are defined (in HTML 4 terms) as containing CDATA.

They contain stylesheets. They cannot contain markup.

HTML comments are markup.

In this case, your comment is being treated as part of your selector.

If you want a comment in a style element, use a CSS comment.

/* CSS comment syntax */

You have a xmlns attribute, so you might be using XHTML (this probably isn't a good idea, it causes lots of complications and few developers get any benefit from it). You can have markup in a style element in XHTML (since XML has no concept of intrinsic CDATA) but this isn't HTML compatible so your document will break if served as text/html.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top