Na aula faltou mencionar o marcador !important
Se tivermos esse marcador na nossa definição no arquivo css e não a tivermos na declaração inline ela sobrescreve o inline, nesse caso ficando com a cor "gray".
color: gray !important;
Se ambas as declarações (inline e arquivo externo) tiverem o marcador !important a do inline prevalece.
Possivelmente não falaram do !important porque não é uma boa prática.
Eu não lembro se falam mais para frente ou na parte 4.
Dá uma olhada no google: "css important boa prática". Tem bastante artigo explicando porque não é uma boa ideia usar.
Nesse tópico do fórum tem uma orientação do prof. Gabriel Leite também: https://cursos.alura.com.br/forum/topico-uso-do-important-no-css-109550