Opa. Fala aí, Renan! Beleza, cara? =)
Na minha cabeça, só faz sentido falar em "elemento pai", se você estiver falando de algum outro também, ou seja, é um conceito relativo... Dito isso, um elemento é considerado "pai" de outro, se o contiver... Exemplo:
<html>
<head>
</head>
<body>
<h1>Olá mundo!</h1>
</body>
</html>
Repare que a própria indentação ajuda nesse caso! Observe, também, que o elemento <html> está envolta de todos os outros, mas diretamente, apenas de <head> e <body>... Conseguiu ver isso? Se você conseguiu, agora podemos concluir que o <html> é pai de <head> e <body>! E esses dois elementos, são pai de quem?
Se observamos o código novamente, veremos que não há nada dentro de <head>, então ele não é pai de ninguém, mas <body> é pai de <h1>, pois o contém, sacou? =)
Sobre as propriedades... Quando falamos de CSS, o próprio nome da linguagem já ajuda: Cascading Stylesheet, ou seja, folhas de estilo em cascata! Isso quer dizer, que as propriedades que você define para um elemento são transmitidas para os elementos filhos também! Isso fica mais fácil de visualizar quando você pensa nas propriedades tipográficas, como tamanho de fonte!
body {
font-size: 12px;
}
div {
font-size: 20px;
}
p {
font-size: 15px;
}
Repare que eu defini três valores de tamanho de fontes distintos... Agora vamos usar o seguinte HTML:
<html>
<body>
Primeiro texto!
<div>Segundo texto!</div>
<p>Terceiro texto!</p>
<ul>
<li>Outro texto...</li>
</ul>
</body>
</html>
Se aplicarmos o CSS nesse HTML o que acontecerá?
Primeiro, a fonte padrão será 12px, pois definimos no body, então o "Primeiro texto!" aparecerá com esse tamanho... Se não tivéssemos definido um valor para a div, ela também teria 12px, mas, como definimos, ela terá 20px, sacou?
Além disso, também definimos para o p, então seu tamanho será de 15px!
Mas... E no caso do texto que está dentro da <li>? Como não definimos nada, ele terá o valor herdado do seu elemento pai, no caso, a <ul>... Mas também não definimos um valor para ela, então ela também herdará do seu elemento pai, o body... Ou seja, 12px, sacou? =)
A ideia é essa... Rs. Espero ter ajudado, mas qualquer dúvida não deixe de postar por aqui para que possamos ajudá-lo! =)
Abraço e bons estudos,
Fábio
