Bom dia gente.
Estou montando uma pagina de login para como estudo que está com o código abaixo.
html...
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<main>
<div class="conteudo" id ="cabecalho">
<img id="img_logo" src="img/logo.png" alt="Logo, SIAGRI">
</div>
<div id="plano_de_fundo">
</div>
</main>
<footer class="conteudo" id = "rodape">
<div>© 2017 Siagri - Todos os direitos reservados</div>
</footer>
</body>
</html>
css...
/* Geral */
/* TAG's */
/* Id's */
#cabecalho{
background-color: black;
}
#plano_de_fundo{
background-color: lightgray;
width: 100%;
height: 100%;
}
#rodape{
position:fixed;
background-color: white;
bottom: 0;
}
/* classes */
.conteudo{
height: 70px;
width: 100%;
}
A minha duvida é o seguinte: eu criei a classe 'conteudo' para definir as propriedades gerais do cabeçalho e rodapé, mas eu também gostaria que todo conteúdo que estivesse dentro da classe ficasse alinhado no centro na vertical e tivesse uma margem a esquerda com um determinado valor, assim, toda vez que eu criasse uma div e colocasse ela com a classe 'conteúdo', ela herdasse essas propriedades gerais. Alguém poderia me ajudar? pois ainda me perco em algumas definições no css...