Curso de HTML grátis: Propriedades CSS

Muito bom! Você já sabe várias coisas sobre HTML e CSS, mas ainda faltam algumas propriedades CSS para você ficar mais fera ainda na sua introdução ao desenvolvimento de sites.

Como eu já descrevi nas aulas anteriores, normalmente utilizamos as classes (class) para selecionar um elemento e modificar suas propriedades de estilo.

Em nosso arquivo CSS (criado na aula anterior), deixei várias propriedades para você tentar modificar, porém, não descrevi nada sobre o que elas eram capazes de fazer. Foi intencional, já que a melhor forma de aprender é colocando a mão na massa, mas é claro que não vou deixar você a ver navios, sem nenhuma explicação.

Nessa aula vamos falar bastante sobre as propriedades CSS e o que elas são capazes de fazer.

Como propriedades CSS são definidas?

Para editar as propriedades CSS de um elemento, você precisa primeiro especificar uma classe para tal elemento, por exemplo:

<div class="minha_classe">Conteúdo da DIV</div>

Essa tag HTML (<div>), especifica uma sessão em um documento, e no trecho de código acima, ela tem uma classe chamada de “minha_classe“.

Para alterar suas propriedades, basta escrever um ponto (.) e o nome da classe no seu arquivo CSS. Exemplo:

.minha_classe{}

As chaves servem para especificar que tudo o que está dentro delas pertence à classe minha_classe.

.minha_classe{
	font-size:12px;
}

No exemplo acima, tudo o que estiver envolvido na classe .minha_classe terá fonte de 12 pixels.

Uma única classe pode receber quantas propriedades você desejar, no entanto, tais propriedades devem ser separadas por um ponto e vírgula (;).

.minha_classe{
	font-size:12px;
	background:#ffffff
}

Não é necessário colocar o ponto e vírgula na última propriedade de uma classe.

Cada uma das propriedades CSS têm valores, você pode encontrar todos os valores em W3schools CSS Reference. Mas não se preocupe com isso, com o tempo você vai decorando o que cada propriedade faz e para qual motivo deve utilizá-las.

Um pouco mais adiante, vou passar uma lista com as propriedades mais utilizadas no CSS.

As propriedades do nosso arquivo CSS

Lembra do nosso arquivo CSS?

/* Meu CSS */
*{
	margin:0; 
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.topo, 
.corpo, 
.barra-lateral, 
.rodape{
	padding:20px;
}
.topo,
.rodape{
	width:100%;
	height:100px;
	background:#000;
	color:#fff;
	text-align: center;
}
.corpo{
	width:70%;
	float:left;
	background:#f1f1f1;
}
.barra-lateral{
	width:30%;
	float:right;
	background:#ccc;
}

Vou explicar o que cada uma das propriedades desse arquivo faz logo abaixo.

Margin

Essa propriedade configura a margem de um elemento HTML em pixels, porcentagem e EMs. Tais margens podem ser definidas em geral (como fizemos) ou para qualquer um dos cantos do elemento. Exemplo:

margin:0;

Especifica que nenhum dos quatro cantos do elemento terá margem.

margin:0 10px;

Especifica que a parte superior e a parte inferior do elemento terão margem 0, já a parte da direita e da esquerda têm 10px de distância.

margin:0 10px 5px 3px;

Especifica que o topo não tem margem, a direita tem margem de 10px, a parte inferior tem margem de 5px e a parte da esquerda tem margem de 3px.

Padding

O padding funciona praticamente como a margem, no entanto, ao invés de empurrar o elemento, ele faz tal elemento inchar até atingir os pixels desejados:

padding:0 10px 5px 3px;

No exemplo acima, o elemento não tem enchimento superior, tem um enchimento de 10px na direita, de 5px na parte inferior e 3px na esquerda.

Box-sizing

Box-sizing é uma propriedade do CSS3 e não é suportado por todos os navegadores de Internet, no entanto, o trecho abaixo:

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

Identifica que a borda do elemento não deve ultrapassar o tamanho do elemento que envolve o elemento que recebeu essa propriedade.

Observação: O seletor asterisco (*), indica todos os elementos. Portanto, todos os elementos do nosso exemplo terão suas bordas no tamanho correto dos elementos que os envolvem.

Width e Height

Propriedades que especificam a largura e altura do elemento respectivamente.

width:100%;
height:100px;

No nosso exemplo, o elemento tem 100% de largura e 100px de altura.

Background e color

Background especifica a cor de fundo que desejamos utilizar no elemento e color a cor do texto, tais cores são especificadas pela tabela de cores HTML.

Text-align

Text-align especifica o alinhamento do texto que desejamos, tais alinhamentos podem ser: Left (esquerda), Center (Centro), Right (Direita) e Justify (Texto justificado).

Float

Float empurra um elemento para a direita (right) ou para a esquerda (left), permitindo que outros elementos o envolvam com o espaço que sobrou.

Font-size

Font-size especifica o tamanho da fonte de determinado elemento, por exemplo, 12px para nosso caso.

Tabela de propriedades CSS

Abaixo vou passar uma lista com as propriedades mais utilizadas em CSS para estilizar elementos HTML.

Propriedades de cor

Propriedades de fundo e borda

Propriedades básicas para caixas

Margem e estilo

Decoração de textos

Propriedades de fonte

Propriedades de listas

Concluindo

HTML e CSS não são extremamente difíceis, o problema é entender para qual motivo podemos utilizar cada uma das tags e quais propriedades CSS devemos aplicar para atingir um objetivo maior.

Como você ainda está aprendendo, recomendo que tente criar documentos em HTML com vários estilos diferentes para treinar.

Próxima aula

Na próxima aula vamos criar nosso próprio site. Vou tentar explicar a maneira que utilizo para criar e estilizar um site básico com HTML e CSS.

Todas as aulas

Veja todas as aulas do curso:

• Aula 1: Introdução ao HTML
• Aula 2: Tags HTML
• Aula 3: Introdução ao CSS
• Aula 4: Propriedades CSS
• Aula 5: Criando seu próprio site

Lembre-se de seguir nosso blog. Postamos todos os nossos novos artigos no Google Plus, Twitter e Facebook. Além disso, enviamos artigos por e-mail, basta se inscrever. Fique sempre por dentro de nossos tutoriais.