CSS Style within a style?

Question

Is it possible to have a style within a style?

For example, something like this:

#content
{
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;

     h1
     {
       font-family: arial;
     }

}

What I am actually trying to do is have the header font as arial only inside the content div.

Answer 1

No, only like that:

#content
{
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
}


#content h1
{
       font-family: arial;
}

Answer 2

This is what you need

#content
{
    text-align: center;
    border-style:solid;
    border-width:10px;
    border-color: #121212;
}

#content #header
{
    font-family: arial;
}

Update: Since your question has changed

#content h1
{
    font-family: arial;
}

Answer 3

You could use LESS if you want to, but the other solutions posted here work fine too. If you include LESS, you need to have a javascript include to parse the LESS to actual CSS (from the website):

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

You can also parse the CSS server-side with node.js and serve the compiled CSS document.