Elementos do CSS não esta aplicando | HTML5 e CSS3 I: Suas primeiras páginas da Web

3
respostas

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Construindo uma base sólida e atividade Reajustando o estilo

por Tatiani da Silva

| 68.3k xp | 15 posts

Bom dia!

No código abaixo não estou conseguindo ajustar os três ultimos elementos da questão :

Defina o tamanho da fonte do título da barra de navegação como 30 pixels, e adicione um espaço entre ele e o menu de navegação de 25 pixels.
Adicione um espaço interno a todo o texto (isto é, à
que engloba o conteúdo principal) de 30 pixels acima e abaixo,

Percebo que meu código não subscreve o que estava no reset nessas duas partes. podem me ajudar a entre o conflito?

grata e abcs

insira seu código aqui

body{
    font-family:"Crimson Text", serif; 
    background-color:#F2FFFC;
    font-size: 120%;
    line-height:1.5;
}

h1, h2{
    font-family:"Open Sans Condensed", sans-serif; 
    text-align:center;
    font-size:30px;
}
main h1 {
    text-align:center;
    background-color:#851944;
    color:#FFF;
    padding: 20px;
    margin:0;
    border:10px solid #000000;
    font-size:60px;
}

p{
    text-align:justify;
    margin: 20px 0;
}

blockquote{
    background-color:#D9E5E3;
    margin:20px 40px ;
    border: 10px solid #C2CCCA;
    width:250px;
    box-sizing: border-box;
}

aside{
    background-color:#3C1D3D;
    color:#F2FFFC;
    width:250px;
    text-align:center;


}
footer{
    background-color:#000;
    color:#F2FFFC
}
nav a {
    color: #F2FFFC;

}
main a{
    color:#851944;

}

aside a{
    color:inherit;
    font-family:"Open Sans Condensed", sans-serif;
    text-decoration: none;    
}

div{
    width:720px; 
    margin: auto;

}
asside h1{
    font-size:30px;
    margin-bottom: 25px; 
}


main div{
    padding:50px 0; 
}

3 respostas

por Luiz Fernando Maehana

| 608.9k xp | 403 posts

Desenvolvedor Front-end

20/12/2017

Bom dia Tatiani,

Uma dúvida, você disse que o seu código CSS não sobrescreve o reset, esse reset é um outro CSS? ele está sendo chamado antes ou depois deste seu CSS? pois o CSS obedece uma ordem, se o reset estiver depois, ele vai considerar o reset como mais relevante.

Caso o reset esteja sendo chamado antes, abra o inspecionar elemento do seu navegador e verifique se as propriedades e classes estão de acordo.

Espero ter ajudado!

Abraços!

por Tatiani da Silva

| 68.3k xp | 15 posts

20/12/2017

Coloquei o reset antes da chamada do CSS. Sim se refere ao CSS da aula do tipo normalize.

por Luiz Fernando Maehana

| 608.9k xp | 403 posts

Desenvolvedor Front-end

20/12/2017

Olá Tatiani,

Refiz aqui rapidamente a aula e o CSS final ficou assim:

site.css

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

main h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 25px;
    border-bottom: 10px solid black;
    font-size: 60px; //Adicionado
}

p {
    text-align: justify;
    margin: 20px 0; //Adicionado
}

blockquote {
    background-color: #D9E5E3;
    border: 10px solid #C2CCCA;
    width: 250px;
    box-sizing: border-box;
    margin: 20px 40px; //Adicionado
}

aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center; //Adicionado
}

footer {
    background-color: #000;
    color: #F2FFFC;
}

nav a {
    color: #F2FFFC;
}

main a {
    color: #851944;
}

aside a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
}

blockquote, aside, footer {
    padding: 20px;
}

main div {
    width: 720px;
    margin: auto;
    padding: 30px 0; //Adicionado
}

//Adicionado tudo abaixo
aside h1 {
    font-size: 30px;
    margin-bottom: 25px;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

h2 {
    font-size: 30px;
}