Tutorial Iniciante de CSS: Exercício

7 03 2008

Logo do +web em tom azul claro

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





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.





Tutorial Iniciante de CSS: Bordas

7 03 2008

Texto com borda estilo "dashed"

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:

Diversos tipos de borda

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

Exemplos

Referência

BlogBlogs Tags: , , ,

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

7 03 2008

Elemento espaçado com CSS

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:

Representação em 3d do Box Model

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

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

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





Tutorial Iniciante de CSS: Texto

6 03 2008

Exemplo de texto espaçado com CSS

Você pode alterar o tamanho e a forma do texto numa página usando uma série de atributos, mostrados abaixo.

font-family

É o nome da fonte, como Times New Roman, Arial ou Verdana.

A fonte que você especifica precisa estar instalada no computador do usuário, então não tem muita utilidade usar fontes incomuns. É melhor usar algumas das fontes ditas “seguras” (que estão na grande maioria dos computadores). Dessas, as mais usadas são Arial, Verdana e Times New Roman. Você pode especificar mais de uma fonte, separadas por vírgulas. Fazendo isso, se o usuário não tiver a primeira fonte que você especificou, o navegador vai procurar pela lista até que encontre uma que ele tenha. Isso é muito útil, porque diferentes computadores geralmente tem diferentes fontes instaladas.

font-family: arial, helvetica;

Este exemplo é usado para que fontes parecidas sejam usadas em PCs (que geralmente tem Arial, mas não Helvetica) e Macs (que geralmente não tem Arial mas tem Helvetica, que será usada). Lembre que, numa lista de fontes, a primeira que o usuário tiver vai ser usada.

Nota: Se o nome de uma fonte tem mais de uma palavra, ele deve ser colocado entre aspas (“”), como em:

font-family: "Times New Roman"

diversas fontes css

font-size

O tamanho da fonte. Tome cuidado com isso – textos como cabeçalhos não devem ser parágrafos com fontes grandes; você ainda deve usar cabeçalhos (h1, h2, etc.) mesmo que, na prática, você possa fazer o tamanho da fonte de um parágrafo maior que o de um cabeçalho (embora você não deva).

font-weight

Define se um texto está em negrito ou não. Na prática, você vai usar font-weight: bold

ou

font-weight: normal

Na teoria, esse valor também pode ser bolder (mais escuro), lighter (mais claro), 100, 200, 300, 400 (equivale a normal), 500, 600, 700 (equivale a bold), 800 ou 900, mas como muitos navegadores balançam a cadeça e dizem “Acho que não é bem assim…”, é mais seguro ficar com bold e normal.

font-style

Define se o texto está em itálico ou não. Pode ser

font-style: italic

ou

font-style: normal

text-decoration

Define se o texto tem ou não uma linha o “enfeitando”.

text-decoration: overline Coloca uma linha acima do texto.

text-decoration: line-through Põe uma linha no meio do texto.

text-decoration: underline Só deve ser usado em links, porque os usuários geralmente esperam que texto sublinhado seja link.

Essa propriedade é geralmente usada pra decorar links, como retirar o sublinhado com

text-decoration: none

Usos da propriedade text-decoration

text-transform

Muda a caixa do texto (maiúscula ou minúscula).

text-transform: capitalize

Faz com que a Primeira Letra De Cada Palavra fique maiúscula.

text-transform: uppercase

Faz com que todo o texto fique MAIÚSCULO.

text-transform: lowercase

Faz com que todo o texto fique minúsculo.

text-transform: none

Esse eu vou deixar pra você adivinhar.

Cole isso no seu “web.css” e veja o resultado no navegador. Brinque um pouco com os valores. Experimente.

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 0.8em;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

a {
	text-decoration: none;
}

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

font-variant

A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos. Confundiu? Dê uma olhada nos exemplos a seguir:

4 exemplos de fontes small-caps

Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.

Espaçando texto

As propriedades letter-spacing e word-spacing servem para definir o espaço entre letras e palavras, respectivamente. O valor pode ser um tamanho ou normal.

A propriedade line-height define a altura das linhas em um elemento, como um parágrafo, sem ajustar o tamanho da fonte. Pode ser um número (que especifica um múltiplo do tamanho da fonte, ou seja, ‘2’ vai ser duas vezes o tamanho da fonte), um tamanho, uma porcentagem ou normal.

A propriedade text-align vai alinhar o texto dentro do elemento para a esquerda (valor left), direita (right), centro (center) ou deixar o texto justificado (justify).

A propriedade text-indent vai identar a primeira linha de um parágrafo por um tamanho ou uma porcentagem dada. Esse estilo é tradicionalmente usado em impressão, mas raramente em mídia digital, como a web.

Uso do text-indent

p {
	letter-spacing: 0.5em;
	word-spacing: 2em;
	line-height: 1.5;
	text-align: center;
}

 

Para se aprofundar no tema, leia esses dois artigos no site do Maujor: Estilizando texto parte 1 e parte 2.

Leia também o texto do Ramon Page sobre melhorar a legibilidade com espaços em branco. Afinal, além de saber as regras CSS você precisa saber o que fazer com elas.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , , , ,

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





Tutorial Iniciante de CSS: Cores

5 03 2008

Exemplo de página HTML com estilos aplicados

CSS tem 16.777.216 cores à sua disposição. Elas podem ter a forma de um nome, um valor rgb (red/green/blue – vermelho/verde/azul) ou um código hexadecimal.

red (vermelho) é o mesmo que rgb(255,0,0), que é o mesmo que rgb(100%, 0%, 0%), que é o mesmo que #ff0000 que é o mesmo que #f00.

Existem 17 nomes de cores válidas predefinidos. São eles aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white e yellow. Veja cada uma na tabela abaixo.

tabela de cores predefinidas no css

Os três valores no valor rgb vão de 0 até 255. 0 é o menor nível (por exemplo, nenhum vermelho) e 255 é o maior nível (por exemplo, vermelho completo). Esses valores também podem ser porcentagens. Preto é definido como ausência de cor – rgb(0,0,0) – e branco é definido como a união das cores – rgb(255,255,255).

Hexadecimal é um sistema numérico de base 16. Nós geralmente usamos o sistema numero decimal (base 10, 0 a 9), mas o sistema hexadecimal tem 16 dígitos, do 0 ao f.

O número hexadecimal tem o prefixo “#” (sustenido) e pode ter um tamanho de três ou seis dígitos. Basicamente, a versão de três dígitos é uma versão comprimida da versão de seis dígitos (#f00 se torna #ff0000, #c96 se torna #cc9966, etc.). A versão de três dígitos é mais fácil de entender (o primeiro dígito, como o primeiro valor em rgb, é o tom de vermelho, o segundo de verde e o terceiro de azul) mas a versão de seis dígitos te dá mais controle sobre a cor exata.

“color” e “background-color”

Cores podem ser aplicadas usando as propriedades color (define a cor do texto) e background-color (define a cor do fundo).

Um fundo azul com texto amarelo pode ser feito assim:

h1 {
	color: yellow;
	background-color: blue;
}

Veja como fica no seu navegador.

Essas cores são fortes demais e, como cores fortes demais incomodam o usuário, devem ser usadas muito raramente. Então é melhor mudar seu arquivo CSS pra tons levemente diferentes:

body {
	font-size: 0.8em;
	color: navy;
}
h1 {
	color: #ffc;
	background-color: #009;
}

Salve o arquivo CSS e atualize seu navegador. Você verá que as cores do primeiro cabeçalho (o elemento h1) mudaram pra amarelo e azul.

Você pode aplicar as propriedades “color” e “background-color” na maioria dos elementos HTML, incluindo body, o que vai mudar as cores de tudo na página.

Recomendo a leitura do artigo sobre cores do Maujor, que vai mais fundo nesse assunto.

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

Related Pages

Referência

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





Tutorial Iniciante de CSS: Seletores, Propriedades e Valores

4 03 2008

Trecho de código CSS

Enquanto HTML tem tags, CSS tem seletores. Seletores são os nomes dados a estilos em folhas de estilo internas e externas. O que nós chamamos de “estilo” é um conjunto de regras que vai definir como um elemento vai ser apresentado.

Nesse Tutorial Iniciante de CSS nós iremos nos concentrar nos seletores HTML, que são simplesmente o nome das tags HTML e são usados para mudar o estilo de todos os elementos de uma tag específica.

Pra cada seletor existem propriedades dentro de chaves, que são apenas palavras como color (cor), font-weight (peso da fonte) ou background-color (cor do background).

Cada propriedade tem um valor, definido após um sinal de “:” (dois-pontos, não um sinal de igual, e “;” (ponto-e-vírgula) separam as propriedades em um seletor.

body {
	font-size: 0.8em;
	color: blue;
}

Isso vai aplicar os valores dados às propriedades font-size e color do seletor body.

Basicamente, quando isso é aplicado a um documento HTML, todo texto entre as tags body (todo o conteúdo da janela) vai ter 0.8 ems de tamanho e cor azul. Abra o arquivo “web.css” que você criou na lição anterior e digite o código aí de cima. Salve, e abra o arquivo HTML em seu navegador. Brinque com os valores – mude a cor, aumente e diminua o tamanho – e atualize o HTML a cada mudança, pra ver o que acontece.

Tamanhos e Porcentagens

No CSS, existem muitas unidades para valores que são específicas de alguma propriedade, mas existem também unidades gerais que são usadas em inúmeras propriedades, e é melhor ir se acostumando com elas antes de continuar.

As unidades se dividem em dois grupos: relativas, que estão ligadas a outras unidades, e as absolutas, que possuem um tamanho fixo.

em (como em font-size: 2em) é a uma unidade relativa, e o tamanho da fonte é calculado. Então, por exemplo, “2em” quer dizer 2 vezes o tamanho atual (o tamanho que ia ser aplicado se você não mudasse pra “2em”). Dois elementos que possuem “font-size: 2em” podem ter tamanhos diferentes, dependendo do contexto, já que essa unidade é relativa.

% (como em font-size: 80%) é a unidade para… deixa eu me lembrar… porcentagens. É relativa, assim como em, e está ligada a um valor anterior.

px (como em font-size: 12px) é a unidade para pixels. É uma unidade absoluta, assim como todas abaixo. Por isso, dois elementos com “font-size: 12px” vão ter sempre o mesmo tamanho relativa ao tamanho do dispositivo de exibição. Dois elementos com “font-size: 12px” vão ter o mesmo tamanho em dispositivos com a mesma resolução, e tamanhos diferentes em resoluções diferentes.

pt (como em font-size: 12pt) é a unidade para pontos.

Existem ainda outras unidades como pc (picas), cm (centímetros), mm (millímetros) e in (polegadas).

Exercite. Copie o seguinte código:

body {
  font-size: 2em;
}
p {
  font-size: 4em;
}

Mude as unidades e os valores. Veja o que acontece quando:

1. A unidade do parágrafo é relativa e você dobra o tamanho da fonte do body.

2. A unidade do parágrafo é absoluta e você dobra o tamanho da fonte body.

Quando o valor é zero você não precisa especificar uma unidade (qual a diferença entre 0cm e 0mm?). Por exemplo, se você não quiser qua a página tenha bordas, pode fazer border: 0

Uma página web não é um meio estático, absoluto. Ela é feita pra ser flexível e o usuário deve ter o direito de ver a página do jeito que ele quiser, o que inclui o tamanho da font e o tamanho da tela.

Por causa disso, “em” e “%” são consideradas as melhores unidades pra usar com tamanhos de fonte (e possivelmente toda largura e altura como nós veremos no Tutorial Avançado de CSS), já que são relativas. Unidades absolutas, como “px”, que na maioria dos navegadores faz com que o texto não seja redimensionado, devem ser usados raramente, como em tamanhos de bordas.

Recomendo que você leia o artigo do Maujor sobre medidas css, que se aprofunda um pouco mais no assunto.

Páginas Relacionadas

BlogBlogs Tags: , , ,

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