Tutorial Iniciante de CSS: Exercício

Lembra do mini-site que você fez no tutorial de html? Você vai criar uma Folha de Estilo (um arquivo CSS) pra esse mini-site, e linkar em todas as páginas. Defina estilos para os cabeçalhos, os páragrafos, as tabelas, etc.

Tente usar todos as propriedades que você viu nesse tutorial. Ponha bordas nas imagens, decore os títulos, deixe espaço nos textos.

Além disso, valorize a legibilidade e use o bom senso. Evite cores berrantes, trabalhe bem os espaços em branco.

Quanto terminar você pode enviar o resultado pro meu email ou hospedar no seu servidor, e não esqueça de avisar através dos comentários pra que eu possa avaliar o que você fez.

Quando se sentir pronto, siga para a próxima parte: html intermediário.

Páginas Relacionadas

• Próxima Página: Tutorial Intermediário de HTML
• Página Anterior: Tutorial Iniciante de CSS: Juntanto Tudo
• Tutorial Iniciante de HTML: Exercícios

Tutorial Iniciante de CSS: Juntando Tudo

Você já deve ter um arquivo HTML como o que foi feito no fim do Tutorial Iniciante de HTML, com a linha que a gente adicionou no começo desse Tutorial Iniciante de CSS, linkando o arquivo HTML ao arquivo CSS.

O código abaixo cobre todas as propriedades CSS desse tutorias. Se você salvar esse código como seu arquivo CSS e olhar o arquivo HTML no navegador, vai entender o que cada propriedade faz e como aplicá-las. O melhor jeito pra aprender de verdade isso tudo é brincar com os arquivos HTML e CSS e ver o que acontece quando você muda alguma coisa. Qualquer dúvida que você tiver, pode entrar em contato comigo.

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 80%;
	color: black;
	background-color: #ffc;
	margin: 1em;
	padding: 0;
}

/* Isso é um comentário */

p {
	line-height: 1.5em;
}

h1 {
	color: #ffc;
	background-color: #900;
	font-size: 2em;
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0.25em;
	font-style: italic;
	text-align: center;
	letter-spacing: 0.5em;
	border-bottom-style: solid;
	border-bottom-width: 0.5em;
	border-bottom-color: #c00;
}

h2 {
	color: white;
	background-color: #090;
	font-size: 1.5em;
	margin: 0;
	padding: 0.1em;
	padding-left: 1em;
}

h3 {
	color: #999;
	font-size: 1.25em;
}

img {
	border-style: dashed;
	border-width: 2px;
	border-color: #ccc;
}

a {
	text-decoration: none;
}

strong {
	font-style: italic;
	text-transform: uppercase;
}

li {
	color: #900;
	font-style: italic;
}

table {
	background-color: #ccc;
}

BlogBlogs Tags: +web, css, iniciante, tutorial

Páginas Relacionadas

• Próxima Página: Tutorial Iniciande de CSS: Exercícios
• Página Anterior: Bordas
• Juntando Tudo (Tutorial Iniciante de HTML) – Contém todo o HTML relacionado ao CSS dessa página.

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Iniciante de CSS: Bordas

Pra criar uma borda ao redor de um elemento, tudo que você precisa é dessa propriedae: border-style. Os valores podem ser solid, dotted, dashed, double, groove, ridge, inset e outset.

Veja o efeito de cada valor:

border-width define a espessura da borda, e geralmente aparece em pixels. Existem também as propriedades border-top-width, border-right-width, border-bottom-width e border-left-width. Finalmente, border-color define a cor.

Adicione esse código ao seu arquivo CSS:

h2 {
	border-style: dashed;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}

Isso vai criar uma borda tracejada ao redor de todos os cabeçalhos secundários (os elementos h2) do HTML, que tem espessura superior e inferior de 3 pixels e espessura da borda direita e esquerda de 10 pixels. Essas duas sobrescreveram o valor de 3 pixels de espessura definidos para a borda inteira – quando dois valores podem ser aplicados ao mesmo elemento, o que vale é o último que foi declarado.

Páginas Relacionadas

• Próxima Página: Juntando Tudo
• Página Anterior: Margens e Espaçamento
• Propriedades “Atalho” – Como usar a propriedade border pra definir cor, estilo e espessura da borda de uma vez só (Tutorial Intermediário de CSS)

Exemplos

• Bordas

Referência

• border-style
• border-width
• border-color
• border

BlogBlogs Tags: +web, tutorial, iniciante, css

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Tutorial Iniciante de CSS: Margens e Espaçamento

margin (margem) e padding (espaçamento) são as duas propriedades mais comuns para espaçar elementos. Margin é um espaço fora do elemento, e padding é um espaço dentro do elemento.

Mude o código CSS para h2 (não mexa no resto) para o seguinte:

h2 {
	font-size: 1.5em;
	background-color: #ccc;
	margin: 1em;
	padding: 3em;
}

Você vai ver que isso deixa um espaço da largura de uma letra ao redor do segundo cabeçalho, e o próprio cabeçalho é “largo” por causa do padding (espaçamento) com a largura de três letras.

Os quatro lados também podem ser modificados individualmente. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom e padding-left são as propriedades que você pode usar pra isso. Margin-top e padding-top definem o espaço acima, *-right definem o espaço a direita, *-bottom definem o espaço abaixo e *-left definem o espaço à esquerda.

O Box Model (Modelo das Caixas)

Margens, padding e bordas (que você vai ver na próxima página) são todos partes do que é conhecido como Box Model (Modelo das Caixas). O Box Model funciona assim: no meio você tem o box (a caixa) do conteúdo (uma imagem ou um texto, por exemplo), ao redor dela você tem o padding (espaço dentro do elemento), ao redor dele você tem a borda e ao redor dela você tem a margem (espaço fora do elemento). Pode ser representado visualmente assim:

Leia esse texto sobre o Box Model que você vai entender melhor.

Você não tem que usar todas essas propriedades, mas é importante lembrar que o modelo de caixa pode ser aplicado a qualquer elemento na página, e que é uma coisa poderosa!

BlogBlogs Tags: +web, tutorial, minicurso, css, iniciante

Páginas Relacionadas

• Próxima Página: Bordas
• Página Anterior: Texto
• Propriedades “Atalhos” – Como usar margin e padding para especificar diferentes valores pra top, right, bottom e left em uma só propriedade (Tutorial intermediário de CSS).

Referência

• margin
• padding

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.