Estou com problemas no header e a class titulo-principal

Então, meu problema está na class do header (.titulo-principal) está lá no início, no site.css, onde defini uma estrutura para ele em outras páginas, como a bio.html e blog.html(onde no header só havia o título principal). Daí, agora tive que iniciar uma nova página, a index.htm(que além do título principal, tem um subtitulo e a lista das ".palavra-home"), usando o mesmo CSS (site.css), sendo que essas estruturas criadas anteriormente, não estão permitindo as modificações na nova página, lá no novo index.css. Como o header está com a class .titulo-principal, tudo que tem nele, está seguindo a mesma estrutura, do título principal, não me permitindo fazer alterações no font-family da class .palavra-home no index.css. O subtitulo eu até consegui dar um jeito, criando a class .subtitulo-principal.

Bom, não sei se consegui explicar exatamente minha dúvida, mas se alguém entendeu e puder me ajudar, fica aqui o meu muito obrigado.

Abaixo tem partes dos códigos onde meu problema está.

index.html:

<header class="titulo-principal">
        <img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>
        <ul>
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home boas-praticas">Boas práticas</li>
            <li class="palavra-home codigo-limpo">Código limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home design">Design</li>
        </ul>
    </header>

site.css:

.titulo-principal {
    text-align: center;
    background-color:#851944;
    color:#FFF;
    padding: 2rem;
    border-bottom: .5rem solid black;
    margin: 0;
    font-size: 300%;
    text-transform: uppercase;

}

index.css:

.subtitulo-principal {
    font-size: 1.5rem;
    text-align: center;
    text-transform: none;
}
.palavra-home {
    font-size: 1.5rem;
    text-transform: none;
    font-family: "Shadows Into Light" cursive;
    font-weight: bold;
    color: #D5447E;
}