/* FORMAS DE ESTILIZAR OS ELEMENTOS (Baseado em Hierarquia)
1. CSS in Line:prioridade de estilização, muda apenas os elementos da linha
EX.
2.Criando uma tag dentro do
Ex.
3. Criando um arquivo.css (usado profissionalmente)
*/
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Comfortaa:wght@300..700&display=swap');
* /* dessa forma, as margens de todos os elementos são zeradas*/
{
margin: 0;
padding: 0; /*espaçamento */
box-sizing: border-box; /*o border engloba apenas o margim e o padding*/
}
body
{
background-color:#DFFFFA;
color: #3d0e0e;
font-family: "Comfortaa",serif;
}
h1,h3
{
color:#d1a1a1;
}
h2
{
color: #d1a1a1;
font-size: 1.4rem;
}
header
{
padding: 2rem; /* REM= Unidade de medida relativa, isso se adequa ao que o usuario definir*/
background-color: #693c2d;
text-align: center; /*centraliza o título*/
}
main /*ajustar o espaço entre os elementos*/
{
padding: 2rem;
display:flex; /*usar um tal de flexbox*/
flex-direction: column; /*organiza em coluna, o padrão é em row=linha*/
gap:2rem; /*define o espaçamento entre os "filhos", os outros itens*/
}
section /*Ajusta o espaçamento entre uma pergunta e outra*/
{
display: flex;
flex-direction: column;
gap: 1rem;
}
/*Estilizar o input :estiliza por atributo*/
input[type="radio"],[type="checkbox"]{
accent-color: #fdc1f8; /*modifica a cor de dentro das bolinhas*/
}
input[type="text"], input[type="password"],input[type="date"], input[type="email"]
{
width: 100%; /*largura*/
padding: 0.6rem;
border: 2px solid #e9c1e4;
outline: none; /*serve para questões de acessibilidade, porém esteticamente pode ser desabilitado*/
border-radius: 5px; /*arredonda a borda do espaço de responder*/
}
/*Estilizar pseudo elementos*/
/*Estilizar placeholder*/
input ::placeholder
{
color: #693c2d; /*Não mudou apenas a cor de dentro ligeiramente, para mudar a cor do texto do placeholder, é preciso deixar o background-color do input text transparente*/
}
select
{
cursor: pointer; /*quando o mouse passa por cima da caixa de seleção, muda o ícone para o icone de apontar o dedo*/
color: #030100;
border: 2px solid #e9c1e4;
border-radius: 5px;
outline: none;
width: 9rem;
padding: 5px;
text-align: center;
font-size: 16px;
font-family: "Comfortaa",serif;
}
img
{
width: 15rem;
display: block;
margin: auto; /*coloca a img no centro*/
}
figcaption{ /*coloca a legenda no centro*/
text-align: center;
}
table
{
width: 100%;
border-collapse:collapse; /*deixa a borda normal, sem todas aquelas divisórias anteriores*/
}
th
{
background-color: #865341; /*fundo para o cabeçalho da tabela*/
padding: 0.2rem;
}
td
{
color: #3d0e0e;
padding: 0.6rem;
text-align:center;
}
tfoot td /*edita a quarta linha (boa sorte na próxima) */
{
background-color:#865341 ;
}
/*estilizar lista de respostas*/
details
{
background-color: #d1a1a1;
border-radius: 5px;
padding: 0.6rem;
}
summary
{
text-align: center;
color:#3d0e0e;
margin:0.5rem;
cursor:pointer;
}
ol /*Coloca a lista dentro da borda do details*/
{
margin-left: 5rem;
}
ol li /*a lista é descendente de ol */
{
padding: 0.2rem;
}
fieldset /*borda do informações de contato */
{
border: 2px solid #d1a1a1;
border-radius: 5px;
padding: 1rem;
}
legend /*o informações de contato*/
{
color:#693c2d;
padding: 0 0.5;
}
textarea /*area do comentários*/
{
outline:none;
border-radius:5px;
border: 2px solid #865341
}
button
{
border:none;
padding: 0.5rem;
background-color: #e9c1e4;
border: 2px solid #865341;
font-family: "Comfortaa",serif;
border-radius: 5px;
}
/*Para editar o footer que é um parágrafo, trabalha-se com classes. Logo, fazer: