Gli elementi html possono contenere più parole e se si desiderasse solo la prima lettera della prima parola da lettere maiuscole, come fare?

Soluzione CSS

element {
    text-transform: lowercase;
    display: block;
}
element:first-letter {
    text-transform: uppercase;
}

Si noti che all’elemento interessato settiamo lowercase cosi che la stringa sia tutta in minuscolo poi usiamo il :first-letter ma per usare :first-letter gli elementi devono avere il display: block;

Soluzione Javascript

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Si potrebbe anche aggiungere alla String.prototype in modo che tu possa usarlo con altri metodi:

String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

usandolo poi così:

'string'.capitalizeFirstLetter() // String