Question about VS 2010 web application template (html markup)

Question

In the image below, in my markup, the title of the page is "Welcome to My sample Web Site" (not all caps). However, in the split screen, the title is shown in all caps.

The code in CSS is:

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color:white;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

I want to display the title as I coded in the markup (not all caps).

Answer 1

I would try changing font-variant: small-caps; to font-variant: normal;

Answer 2

Try:

h1 {
font-variant: normal;
}

Other possible values are, as you've seen, small-caps and inherit.

Answer 3

The line causing the change is in the

h1, h2, h3, h4, h5, h6

group.

You could change the line:

font-variant: small-caps;

to be:

font-variant: normal;

but that would change all of the headers back to normal casing. If you just want to change the title header to normal, add the following to the CSS:

#title h1
{
    font-variant: normal;
}