Search code examples
htmlcsshtml-heading

Why do CSS instructions not recognize header classes?

Why does a CSS file not understand a reference to a header based on its class? One would expect the following two CSS commands to set each line as a different color. Instead, we are presented with unexpected behavior. 

h1.red{
    color: red;
}
h1.blue{
    color:blue;
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1 class='red'>This text should be red.</h1>
        <h2 class='blue'>This text should be blue.</h2>
    </body>       
</html>

Is there any way to distinguish more than one header tag in CSS?

Solution

  • You are trying to modify an <h2> element with an h1 selector. Try 

    h1.red{
    color: red;
}
h2.blue{
    color:blue;
}