Tutorial Iniciante de CSS: Juntando Tudo

7 03 2008

Página colorida, com um folha de estilos aplicada

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: , , ,

Páginas Relacionadas

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

Anúncios

Ações

Information

One response

12 09 2013
ivandro

Muito bom ajudou muito

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: