3
respostas

Acrescentando e alterando cores

Olá, achei muito boa essa dica da Caroline sobre o site com opções paletas de cores e fiz meu código acrescentando cor em outras partes do texto pelo arquivo CSS e alterando as cores usadas em aula ;)

Código CSS

body {
    background: #FEFAE0;
}

h1 {
    color: #283618;
}
p {
    text-align: center;
    color: #283618;
}

em strong {
    color: #bc6c25;
}

Código HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head> 
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="style.css">

        <style>
        </style>
    </head>
    <body>
        <h1 style="text-align: center">Sobre a Barbearia Alura</h1>

        <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

        <p style="font-size: 20px"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

        <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
    </body>
</html>
3 respostas

Sim muito irado, mas uma dica muito massa que eu to adotando é usar um css como default principal dai eu declaro as cores usando o:

:root { --branco:#fff; --bege: #f9f9f9; --cinza: #e5e5e5; --vinho: #8d0606; --branco: #fff; --cinza-escuro: #808080; --preto: rgba(0, 0, 0, 0.75); }

.exemplo{ background-color: var(--cinza); }

quando vou declarar em uma class fica muito mais traquindo, pois eu atribuo um nome a cada cor da paleta e fica muito prática de lembrar. Sem falar que para fazer a alteração eu vou no arquivo de css geral e lá eu posso mudar as cores mesmo depois de ter terminado meu css. Não sei em que momento do curso você está, mas estava tateando aqui o forum e achei interessante dar essa dica. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

}

Boa dica! Vou aplicar dessa forma também!

Ainda não cheguei na parte de uso de :root no css mas consegui entender a ideia e achei ótima :D valeu mesmo pela dica, Luiz!! Vai facilitar bastante.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software