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.

```css
h1.red{
    color: red;
}
h1.blue{
    color:blue;
}
```

```html
<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?