Saik Saik - 3 months ago 9
CSS Question

HTML and CSS p selector wont work without h1 selector

Hi I am new to HTML and CSS and I encountered a strange issue. I am trying to change the color of my text with style and p selector and it works as long as I use h1 selector as well. Here is my code.

<!DOCTYPE html> <!-- Indicates which HTML version is being used -->
<html> <!-- HTML starts here --> <!-- Also called root element -->
<head> <!-- background/setup information goes inside head -->
<meta charset = "utf-8" /> <!-- defines character set -->
<title> Hello Internet! </title> <!-- website title name -->

<style type = "text/css"> <!-- Added for CSS -->


h1{

}


p{
color: red;
}

</style>

</head>

<body>


<p> This text is red </p>



</html>


So with this code my line of text is actually red but as soon as I remove the h1 selector from the code, the text goes back to black. Can anyone explain please why this is happening ?

Answer

You put an HTML comment in there! Remove the comment and it will work:

<!DOCTYPE html>
<!-- Indicates which HTML version is being used  -->
<html>
<!-- HTML starts here  -->
<!-- Also called root element -->

<head>
    <!-- background/setup information goes inside head -->
    <meta charset="utf-8" />
    <!-- defines character set -->
    <title> Hello Internet! </title>
    <!-- website title name -->
    <style type="text/css">
    p {
        color: red;
    }
    </style>
</head>

<body>
    <p> This text is red </p>
</body>

</html>

If you want to add comments to the <style> tag, use CSS comments:

/**
 * This is a valid CSS comment
 */
/* This one too! */
/***************************
****************************
Even this one!
****************************
***************************/
Comments