Page specific styles in default stylesheet

[imperialized]

I guess this would be more of an optimization and load time question more so than specific coding question. Anyhow, I was wondering how you all felt about including all styles in a style sheet.

 

For example, my login form will only be displayed on one page, so should I include that in my default stylesheet that is loaded on all pages or have page specific stylesheets for each page that contain those styles that are used solely on that page?

 

/* LOGIN  */

#login_container form{
    padding: 10px 25px;
}

#login_text {
	width: 200px;
    height: 40px;
border: 2px solid #E1EEF5;
background: #FFFFFF;
text-transform: lowercase;
font: bold 16px Arial, Helvetica, sans-serif;
color: #000000;
    border-radius: 5px;
    padding: 0px 10px 0px 10px;
    margin-bottom: 3px;   
} 

#login_text:hover{
    width: 200px;
    height: 40px;
border: 2px solid #2E9AFE;
background: #FFFFFF;
text-transform: lowercase;
font: bold 16px Arial, Helvetica, sans-serif;
color: #000000;
    border-radius: 5px;
    padding: 0px 10px 0px 10px;
    margin-bottom: 3px;
}

.login_submit {
    float: right;
    width: 100px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}    

 

It seems unnecessary for the browser to read all of that if there is no login that will be displayed, what is your opinion on the matter?

[trq]

CSS files are cached. So making a client donwload a new stylesheet for each page is more of a waste of resources than having all your styles in a single sheet.