Tutorial de CSS em Vídeo Aula - Estilização de Link

Neste Tutorial de CSS em Vídeo Aula, vamos mostrar dois vídeos que falam sobre a estilização de links através do CSS.

Veremos como alterar sublinhado, cores, plano de fundo, imagens linkadas etc.

Quer trabalhar em CASA como Webmaster? Então obtenha AGORA SEU CERTIFICADO !

Ler Tutorial

CSS em Links: Colocar e tirar sublinhado, mudar cor, colocar plano de fundo e bordas

Neste Tutorial de CSS de nosso curso, vamos aprender um pouco mais como estilizar links através do CSS.

Botão criado estilizando links com CSS

Aprenderemos como retirar sublinhado, inserir, mudar cor do link, inserir uma cor de plano de fundo, bordas etc. Você verá como essas opções do CSS nos permitirão estilizar nossos links das mais diversas maneiras, ao gosto do webmaster / webdesigner.

Fazer download da Apostila de HTML + CSS

Já estudamos diversas maneiras de estilizar links, e no tutorial passado estudamos sobre as propriedades link, hover, visited e active dos links.

Lembrando que links também podem ser vistos como textos, textos com características especiais, mas são textos. Ou seja, também podemos aplicar as propriedades do CSS que aplicamos nos textos.

E é basicamente isso que faremos neste tutorial.
Usar diversas propriedades do CSS nos links, e veremos as inúmeras possibilidades que temos de estilizar os hiperlinks.

Ler Tutorial

Links em CSS - As propriedades link, visited, hover e active

Neste tutorial de nosso Curso de HTML & CSS, vamos aprender a trabalhar exclusivamente em cima dos links, e veremos uma gama de possibilidades de estilização dos hiperlinks através do CSS (especificamente, através das propriedades link, visited, hover e active.

• Apostila HTML Progressivo: Fazer download

CSS em Links - Por que estilizar ?

Os dois principais pilares da internet são, sem dúvidas, a informação e a ligação desses dados.

De nada adianta um importante centro de pesquisas fazer estudos e descobertas, se não tiver como compartilhar essas informações com outras pessoas e instituições.

E quando falamos em compartilhar informações, estamos falando dos links.

Os links são os responsáveis por levar uma pessoa de um local da rede para outro.

Quando queremos mostrar algo para alguém, passamos o link.

Quando queremos mostrar pro leitor que ele pode se informar mais sobre um assunto em outra página, fazemos isso criando um link.

Ou seja, o link tem o efeito de ligar uma página na outra, e esse conceito é um dos mais importantes em termos de criação de sites.

Por links serem tão especiais, é natural que devamos destacar, mostrar para os leitores e deixar bem claro que aquilo é um link, é um elo, uma âncora que poderá levar ele para outro local, onde ele poderá obter mais informação.

E é isso que iremos fazer neste tutorial de CSS, que é destacar, tratar diferente os links.
Como sempre, com o CSS nós temos bem mais flexibilidade e recursos do que com o HTML puro.

Existem quatro tipos de comportamentos de links.
O primeiro é antes de de interagirmos com o link, quando não clicamos nem passamos o mouse e é a primeira vez que vemos aquele link.

O segundo comportamento é quando passamos o mouse em cima do link.

A terceira interação ocorre quando estamos clicando no link.

E por fim, a última possibilidade de interação com links é quando nos deparamos com um link cuja página de destino já foi visitada por nós.

A propriedade link do CSS

A primeira interação com os links é feita através do seletor pseudo-classe :link
Quando colocamos esse seletor em uma tag <a>, é porque vamos estilizar aquele link somente quando o usuário não tiver interagido com o link.

Assim, se quisermos que um link tenha a cor azul antes de ser clicado, fazemos:

a:link { 
        color: #00F; 
}

A propriedade hover do CSS

Caso usemos o seletor :hover na tag <a>, a estilização feita nesse elemento terá efeito quando passarmos o mouse em cima dele.

Por exemplo, para que o link que antes era azul, se torne verde ao pousarmos o mouse em cima, o código CSS é:

a:hover { 
        color: #0F0; 
}

A propriedade visited do CSS

Com certeza você já notou que ao entrar em alguns sites, os links que você já visitou a página de destino tinha um aspecto diferente.

Por exemplo, geralmente os links que você nunca visitou são azuis e os links que você já visitou são vermelhos.

Para definirmos a estilização de um link que já foi clicado, usamos a propriedade :visited
Assim, para o link visitado ser vermelho, usamos o código:

a:visited { 
        color: #F00; 
}

A propriedade active do CSS

Por fim, uma ferramenta pouco conhecida e usada é o seletor :active, que irá atuar na estilização DURANTE o ato de clicar.

Como geralmente esse ato é bem rápido, essa propriedade é pouquíssimo usada.
Para ver ela funcionando, clique no link e segure, e verá que a estilização do CSS para :active foi realmente definida.

Por exemplo, para que um link se torne da cor preta durante o ato de clicar, usamos o código CSS:

a:active { 
        color: #FFF; 
}

Ler Tutorial

Background em CSS - Como Alterar Plano de Fundo (Tutorial de CSS: background-image, color, repeat, position e attachment)

Neste tutorial de CSS, vamos falar da propriedade background e de suas varições, onde o CSS, com suas várias ferramentas, nos permite definir e manipular planos de fundo de um site de várias maneiras.

Ler Tutorial

Vídeo Aula (Tutorial de CSS) - Fontes em CSS

Nesta excelente vídeo aula da Universidade XTI, vamos ver uma lição sobre a estilização de fontes em CSS, através da propriedade font e suas variações, para complementar os tutoriais que estudamos aqui em nosso Curso de HTML e CSS.

Ler Tutorial

Tutorial de CSS sobre Imagens e Figuras

Neste tutorial de CSS de nosso curso, vamos introduzir a seção sobre Imagens em CSS.

Embora já tenhamos falado no assunto em nosso Tutorial de HTML sobre Imagens, porém o que é possível de fazer em CSS, se comparado somente ao HTML, é até covardia comparar, o CSS simplesmente no permite fazermos que quisermos com as imagens, posição, alinhamento, bordas, espaçamentos e uma série de outras possibilidades.

Ler Tutorial

Propriedade float - Como Posicionar Elementos na Esquerda ou Direita (Tutorial de CSS)

Neste tutorial de CSS, vamos aprender uma das propriedades mais importantes e usadas na estilização de sites, o float.

Como ele vamos ter total controle sobre o posicionamento de todo e qualquer elemento de nossos sites, nos possibilitando a criação de layouts mais profissionais, usando o CSS, de uma maneira bem simples.

Ler Tutorial

As Propriedades width e height - Como Definir Altura e Largura (Tutorial de CSS)

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de CSS, iremos aprender duas das propriedades mais importantes para se criar um site: width e height, que servem para definir a largura e altura de qualquer elemento HTML.

• Baixar PDF: Apostila HTML + CSS Progressivo

Ler Tutorial

A Propriedade display em CSS: Elementos inline e block - Tutorial

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Em nossos tutoriais sobre o modelo das caixas (Box Model) em CSS pudemos ver como os elementos do layout de um site são caixas, ou blocos, que vão se encaixando, se acomodando e formando um site.

Mas, como tudo no CSS, é possível também alterar como essas caixas são exibidas em um site, e isso será feito através da propriedade display em CSS.

• Fazer download da Apostila de HTML + CSS

Propriedade CSS display - Como os elementos são exibidos

Que os elementos de um site são blocos, ou retângulos e vão se encaixando entre si através de configurações de HTML e CSS para formar um layout, estamos careca de saber.

Inclusive, ao estudar as propriedades margin, border e padding vimos que é possível fazer diversas mudanças nessas "caixas", como espaçá-las, colocar bordas com diversos tipos de efeitos e até aumentar seu espaçamento interno.

Mesmo com essas possibilidades, essas caixas continuam a ser caixas, blocos retângulos.
O que a propriedade CSS display faz é mudar como essas caixas vão se comportar.

Aliás, display, em inglês, significa exibir, e através da propriedade CSS display iremos selecionar como os elementos de um site serão exibidos e como vão se relacionar entre site.

No decorrer de nossos tutoriais de CSS, vimos basicamente dois tipos de propriedade CSS display, que foram os display block e display inline, que vamos explicar melhor agora.

O que são elementos em bloco (block) e em linha (inline) no CSS

Um importante tipo de caixa é o do tipo bloco (block box), exemplos desse tipo de display são os parágrafos <p>.
Lembre-se que quando usamos esta tag, ela cria um bloco, uma divisão, que separa o parágrafo do que estiver acima e do que estiver abaixo.

Como exemplo, vamos escrever "Tutorial de CSS", mas vamos colocar o "de" entre as tags <p> e </p>, o código HTML é:

Tutorial <p>de</p> CSS

Se testarem o resultado, verão que a palavra "de" foi isolada, tem um bloco só para ela, uma divisão abaixo e acima, além de tomar toda a largura (width) disponível.

O mesmo ocorre com a tag <div>, testem o seguinte código:

Tutorial <div>de</div> CSS

O resultado é o mesmo:
Tutorial

de

CSS

Um outro tipo comum de tipos de caixa, são as do tipo inline, ou em linha.
Se nos elementos do tipo block havia uma divisão acima, abaixo e pegava todo o espaço lateral, o mesmo não ocorre nos elementos inline, como o nome sugere, esses elementos ficam na mesma linha.

O exemplo mais clássico é de negrito <b>.
Veja, vamos colocar somente a palavra "de" entre as tags <b>:
Tutorial de CSS

O mesmo ocorre com a tag <i>, que dá o efeito de itálico:
Tutorial de CSS

As Propriedades CSS display: inline e display: block

Ok, vimos que algumas tags são do tipo block por padrão, como as de parágrafo e as divs.
Já outras, como as de negrito <b>, itálico <i> e a <span> são inline, pois são renderizadas na mesma linha.

Isso no HTML, no padrão.
Como sempre, o CSS nos dá a incrível flexibilidade e poder de mudar o que quisermos, e isso vai ficar ainda mais claro quando aprendermos sobre a propriedade display do CSS.

Basicamente, usando a propriedade display com o valor inline, estamos dizendo para o CSS exibir aquele elemento como se fosse inline, e caso usemos a propriedade display com o valor block, aquele elemento vai ser exibido como se fosse naturalmente block, ou seja, com uma divisão abaixo, acima e ocupando toda a largura (width).

Como usar a propriedade CSS display: inline

Por exemplo, as tags de cabeçalho H1, H2, H3 etc, são todas do tipo display: block, por padrão.
Vamos mudar isso?

No seu documento HTML teste o código:

<h1>Tutorial </h1>
<h2>de </h2>
<h3>CSS</h3>

Agora em sua folha de estilos experimente fazer:

h1, h2, h3{
 display: inline;
}

O resultado vai ser que estas tags ficarão uma ao lado da outra, onde antes, sem o uso de display inline, elas ficariam uma abaixo da outra.

Como usar a propriedade CSS display: block

E assim como fizemos na propriedade anterior, para transformar um elemento display block em display inline, o contrário é possível e análogo, bem simples.

Por exemplo, alguns defacers, hackers que costumam invadir sites para alterar sua aparência apenas, costumam 'bagunçar' os sites, deixando-os feios, e uma maneira bem simples de fazer isso é através da propriedade display.

Por exemplo, as tags de negrito <b> e itálico <i> são elementos display inline por padrão, afinal seria extremamente incômodo ter uma divisão, uma quebra de linha antes e depois de cada palavra em negrito, seria uma bagunça.

Por exemplo, o código HTML dessa frase: Tutorial de CSS
É:

<b>Tutorial</b> <i>de</i> <u>CSS</u>

Adicionando o simples código CSS em sua folha de estilos:

b, i, u {
 display: block;
}

Você já faria com que todas as palavras em negrito, itálico e sublinhadas se tornassem do tipo display block. Simples e poderoso, esse CSS, não?

Mais propriedades CSS display

Para nossos propósitos atuais, de nossos tutoriais básicos de CSS, entender o que é, como funciona e como usar o display: inline e o display: block é, por hora, suficiente.
Porém, a propriedade display vai muito mais além e nos fornecesse diversas opções no quesito de 'exibir' (display) algum elemento de nosso site.

No decorrer de nosso Curso de HTML e CSS iremos estudar as outras possibilidades existentes da propriedade display em detalhes, mas por hora iremos dar um pequeno resumo sobre o que é possível fazer com essa fantástica propriedade do CSS display.

Ler Tutorial

A propriedade margin do CSS - Tutorial sobre como usar margens

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste artigo de nossa apostila de CSS, iremos falar sobre o último, e provavelmente mais usado, elemento que compõe a Box Model (Modelo das Caixas), que são as margens, através do estudo da propriedade margin.

• Apostila HTML Progressivo: Fazer download

Margem em CSS - A Propriedade margin

Se estiver acompanhando nosso curso de HTML e CSS desde o início, certamente sabe que esta não é a primeira vez que abordamos o tema margens, pois tratamos de margem em parágrafos, onde vimos como espaçar os parágrafos entre si, tanto acima como abaixo.

Na verdade, as margens são muito usadas, principalmente por conta da propriedade margin, que é extremamente flexível, e nos permite definir as margens tanto em cima, abaixo e nas laterais, e de qualquer coisa.

O anúncio ao lado, por exemplo, tem um código CSS que define uma margem, um espaçamento do bloco de publicidade deste texto, para que não fiquem colados.

Em nosso Tutorial de Imagens em CSS, também iremos aprender a manipular imagens em um site, para definir seu local, margens, distâncias e espaçamentos, tudo através do nosso querido e todo poderoso CSS.

Se você já estudou a propriedade padding, vai entender logo o funcionamento da margin, pois podemos espaçar tanto acima (margin-top), abaixo (margin-bottom), na esquerda (margin-left) e pela direita (margin-right).





Embora essas propriedade do modelo de caixas (Box Model) do CSS se pareçam, elas são bem diferentes, com funções bem específicas.

A diferença de padding e margin

A princípio, parece um pouco confusa as funções da margin e da padding, mas vamos explicar bem isso agora, pois são coisas diferente, e você de ter tais conceitos bem definidos em sua mente.
Após a explicação iremos mostrar na prática a diferença da margin e da padding.

O segredo é: a margem atua fora da borda.
É isso que diferencia da propriedade padding do CSS, que faz um espaçamento interno no elemento, entre a borda e o elemento, mas internamente.

Ou seja, ela é o espaçamento externo, do lado de fora das bordas, sendo muito usada para distanciar um elemento de outro, como uma figura de um texto, duas figuras entre si, um jogo em JavaScript do restante do conteúdo do site etc.

Assim, você tem um elemento, ou uma caixa (um bloco) em seu site.
Coloque outro bloco. Ok, agora para separar um elemento de outro, você usa as margens, vai distanciá-los, dar um espaçamento externo entre os blocos.

Exemplo de código CSS com padding e margin

Vamos criar um simples exemplo, passo a passo.
Primeiramente crie seu documento HTML e sua folha de estilos.

Nosso site HTML ficou assim:

<!DOCTYPE html>
 
<html> 
 <head>
 <title>Tutorial de CSS - A Propriedade margin</title>
 <meta name="description" content="Como usar margens através da propriedade margin do CSS, em sites HTML.">
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>

 <body>
 </body>

</html>

Note que o nome de nossa folha de estilos é estilo.css.
Agora vamos criar um simples parágrafo dentro da tag <body>:

<p>Curso de CSS Completo !</p>

Vamos aplicar uma borda nesse parágrafo, uma largura de 100px e colocar a cor branca nesse bloco.
O código para você aplicar na folha de estilos CSS é:

p{
 border: solid;
 width: 100px;
 background: white;
}

Veja o resultado.
Agora vamos adicionar um padding, de 10px em cada lado, apenas adicione o seguinte código CSS na sua folha, ao elemento p:

padding: 10px 10px 10px 10px;

Abra seu site e veja o resultado do padding, um espaçamento INTERNO, dentro da borda!
Vamos agora adicionar uma tag div, que vai englobar o parágrafo <p> da <body>, vamos nomear essa div com o atributo class e dar o nome de "bloco".

O código fica:

<div class="bloco">
 <p>Curso de CSS Completo !</p>
</div>

Volte na folha para estilizarmos essa div. que vai ter uma borda de cor azul, largura 125px e fundo amarelo. Ou seja, adicione o seguinte código em sua folha de estilos:

.bloco{
 border: solid blue;
 width: 125px;
 background: yellow;
}

margin-left, margin-right, margin-top, margin-bottom e margin

Agora vamos adicionar as margens!
Adicione cada um dos seguintes códigos, um por você e você vai ver qual a utilidade da propriedade margin:

margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;

Você pode substituir todas essas linhas por uma só, assim como fizemos com a padding:

margin: 10px 10px 10px 10px;

Maneiras de uso da propriedade margin

A propriedade de margem do CSS possui algumas funcionalidade bacanas, para adicionamos margem de várias maneiras simples, e uma delas nós mostramos no exemplo imediatamente acima, quando colocamos quatro valores de tamanho em sequência.

Quando fazemos isso:

margin: Apx Bpx Cpx Dpx;

O valor A define a margem superior, o valor B define a margem direita, o valor C define a margem inferior e o valor D a margem da esquerda.

Já se você colocar somente um valor: margin: Apx ;
Esse valor A será as margens em todas direçõas (top, right, down e left)

Se colocar dois valores: margin: Apx Bpx ;
O primeiro valor, o "A" será a margem inferior e superior (bottom e left) e o segundo valor "B" será o valor das margens laterais (right e left)

E por fim, é possível colocar três valores: margin: Apx Bpx Cpx;
Onde o A é para margem superior, o B para as margens laterais e o valor C é a margem inferior.

Lembrando que pixel (px) é só uma das medidas, você pode usar porcentagem, pt, em etc.

Veremos melhor como usara a propriedade margin e suas propeidades específicas, margin-top, margin-right, margin-bottom e margin-left, quando aprendermos a colocar mais blocos em nossos sites, como imagens, vídeos etc.

Ler Tutorial

Bordas - Tutorial de CSS sobre a propriedade border

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de CSS, vamos aprender sobre um dos elementos mais importantes do Box Model, que são as bordas, através do estudo da propriedade border do CSS.

Vamos aprender como adicionar bordas acima de um elemento (border-top), na direita (border-right), abaixo (border-bottom) e na esquerda (border-left), além de aprender como alterar o tipo de borda (border-style: dotted, dashed, solid, double e none), espessura (border-width) e cor (border-color).

• Baixar PDF: Apostila HTML + CSS Progressivo

Como adicionar as bordas em CSS - A propriedade border

Sem dúvidas, o elemento do modelo das caixas mais fácil de ser percebido, são as bordas.
As bordas são elementos que servem para separar o padding da propriedade margin (veja essa imagem do Box Model).

As bordas são usadas para marcar, delimitar e separar uma região no layout de seu site.
Graças a flexibilidade do CSS, podemos definir onde nossa borda irá existir, se nos quatro lados (acima, abaixo e nas laterais), somente em um lado ou em uma combinação qualquer que desejarmos.

Para adicionarmos uma borda acima de qualquer elemento, usamos a propriedade:

border-top

Já para adicionar a borda na lateral direita, fazemos:

border-right

Abaixo:

border-bottom

E, por fim, na lateral esquerda de um elemento:

border-left

Por exemplo,para que todos os parágrafos tenham uma borda sólida, em todos os lados, fazemos:

p{
 border: solid;
}

Veja o efeito nos parágrafos, do código CSS acima:

Este parágrafo possui borda sólida em todos os lados

Tipos e Estilos de border em CSS - A propridade border-style

No exemplo anterior, mostramos como é a criação de uma borda e usamos o valor solid na propriedade border, que serve para definir uma borda sólida.

Porém, o CSS nos permite estilizar essa borda de várias maneiras, através da propriedade border-style.
Dentro os possíveis valores, vamos destacar os principais, que são:

• border-style: solid - Aplica o efeito de uma borda sólida
• border-style: double - Ao invés de uma linha, aplica um estilo CSS de duas linhas mais finas como borda
• border-style: dotted - Aplica o efeito de uma borda pontilhada (dot é ponto, em inglês)
• border-style: dashed - Aplica o efeito de tracejado
• border-style: none - Não aplica efeitos de borda

Veja o seguinte código CSS & HTML que mostra todos os efeitos acima, aplicados em parágrafos:

<p style="border: solid;">Esta borda possui o estilo solid</p>
<p style="border: double;">Esta borda possui o estilo double</p>
<p style="border: dotted;">Esta borda possui o estilo dotted</p>
<p style="border: dashed;">Esta borda possui o estilo dashed</p>
<p style="border: none;">Esta borda não é visível</p>

Agora veja o resultado:

Esta borda possui o estilo solid

Esta borda possui o estilo double

Esta borda possui o estilo dotted

Esta borda possui o estilo dashed

Esta borda não é visível

Existem ainda as borders do tipo groove, ridge, inset, outset, none, e hidden na propriedade border-style do CSS.

Espessura da Borda em CSS - A Propriedade border-width

Além de podermos definir que bordas irão aparecer e seu estilo, o CSS também nos permite escolher a espessura (grossura ou largura) da borda, e de mais de uma maneira, através da propriedade border-width.

A maneira mais precisa de definir a espessura da border, através da propriedade border-width é usando as unidades de medida, como o pixel (px), pt ou em.

Por exemplo, o código HTML e CSS de três parágrafos, com bordas de espessura 1 pixel, 2 pixels e 3 pixels é:

<p style="border-width: 1px;">Borda de 1 pixel</p>
<p style="border-width: 2px;">Borda de 2 pixel</p>
<p style="border-width: 3px;">Borda de 3 pixel</p>

Veja como fica:

Podemos usar algumas palavras, keywords especiais que definem a espessura de uma borda em CSS:
border-width: thick - Borda mais espessa (thick é grosso, espesso em inglês)
border-width: medium - Borda de espessura média
border-width: thin - thin significa fino, ou seja, define uma borda fina

Exemplo de código HTML e CSS:

<p style="border-width: thick">Borda thick</p>
<p style="border-width: medium">Borda medium</p>
<p style="border-width: thin">Borda thin</p>

Crie um documento HTML e teste os efeitos!

Cores nas Bordas em CSS - A Propriedade border-color

E, por fim, o CSS ainda nos permite definir a cor da borda, através da propriedade border-color, que pode receber o código de cores tanto através do nome, do sistema RGB ou por valores hexadecimais.

Veja nosso tutorial sobre Cores em Fontes no CSS, é a mesma ideia e lógica.

Vejamos um exemplo de código CSS e HTML usando a propriedade border-color :

<p style="border-color: red">Borda na cor vermelha</p>
<p style="border-color: rgb(0,255,0)">Borda na cor verde</p>
<p style="border-color: #0000ff">Borda na cor azul</p>

Usando somente a propriedade border em CSS

Como vimos, há várias maneiras de definirmos as bordas em elementos de um layout, através somente do CSS, podemo definir o tipo de borda, espessura e até a cor.

Para usar esse atalho, que é a propriedade border unicamente, baste dar como atributo um tamanho, uma cor e uma estilo.
Por exemplo, para que suas tags de cabeçalho H1 tenham espessura de 1 pixel, pontilhadas e de cor vermelha, e para que seus parágrafos sejam envolvidos por bordas de 2 pixels de largura, com borda sólida e azul, aplique o estilo CSS:

h1 {
 border: 1px dotted red;
}

p{
 border: 2px solid blue;
}

Ler Tutorial

Espaços no Site - Tutorial de CSS Sobre a Propriedade padding

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de nosso Curso de CSS, vamos aprender um importante elemento do Box Model (ou Modelo de Caixas), o padding.

• Estude offline: Apostila HTML + CSS

A propriedade padding do CSS - Espaçamento ao redor do conteúdo

Como estudamos o Box Model, ou Modelo de Caixa, vimos que o primeiro bloco, ou caixa, ao redor de um conteúdo (que pode ser um texto, uma figura ou outro elemento qualquer) é o padding, que é uma espécie de espaçamento, enchimento ou acolchoamento.

Ou seja, ao definirmos os valores para a propriedade padding, estamos definindo o valor do espaçamento entre o conteúdo e a borda do elemento (da caixa em questão).

Lembrando que podemos formatar o espaçamento em quatro direções: top, bottom, left e right (acima, abaixo, na esquerda e na direita).

Assim como outros elementos que definem algum tamanho em CSS, vamos formatar essas distâncias da propriedade padding através do valor em pixels (px), pt ou em.

A propriedade padding tem cinco variações diferentes, de acordo com uma direção específica do espaçamento, ou para definir todas de uma vez.
Veremos agora como usar cada uma dessas variações.

padding-top : Espaçamento Acima do Conteúdo em CSS

A primeira variação da propriedade padding que vamos estudar é a padding-top, que vai definir o espaçamento acima do conteúdo.

A sintaxe é simples:

padding-top: n px;

Onde 'n' é um valor numérico, e px é apenas uma das maneiras de se definir a unidade (px é de pixel).

Para facilitar a visualização e teste do padding, vamos usar apenas um parágrafo (<p>) como sendo o conteúdo, e vamos pintar o fundo dele de cinza, para você visualizar bem esse padding.

Crime um documento .html e use o seguinte código em sua folha de estilos:

p{
 padding-top: 10px;
 background: grey;
 width: 400px;
}

Note que escolhemos 10px . Então, teremos um espaçamento de 10 pixels acima do texto presente em todos os parágrafos.
Vejamos como esse código se mostra quando abrirmos o site HTML:

Este parágrafo tem 10px de padding, acima

Agora 20 px, veja como aumenta o espaço:

Este parágrafo tem 20px de padding, acima

padding-bottom : Espaçamento Abaixo do Conteúdo em CSS

Agora, nesta variação da propriedade padding que vamos estudar a padding-bottom, que vai definir o espaçamento abaixo do conteúdo.

A sintaxe do padding-bottom é:

padding-bottom: n px;

Onde 'n' é um valor numérico, e px é apenas uma das maneiras de se definir a unidade (px é de pixel).
O seguinte código HTML & CSS mostra dois exemplos de uso do padding-bottom, um de 10 pixel e outro de 20 pixel:

<p style="padding-bottom: 10px; background: grey;">Este parágrafo tem 10px de padding, abaixo (bottom)</p>
<p style="padding-bottom: 10px; background: grey;">Este parágrafo tem 20px de padding, abaixo (bottom)</p>

Veja o efeito e como aumenta o espaçamento abaixo do conteúdo:

Este parágrafo tem 10px de padding, abaixo (bottom)

Este parágrafo tem 20px de padding, abaixo (bottom)

padding-left : Espaçamento na Esquerda do Conteúdo em CSS

Agora vamos aprender a usar a propriedade padding para criar um espaçamento lateral, vamos usar a padding-left, para definir um espaçamento na lateral do conteúdo, na esquerda (left).

Vamos usar o atributo width para definir uma região de 300 pixels de largura.
O seguinte código CSS & HTML vai criar dois parágrafos estilizados, com a propriedade padding-left valendo 10 pixels no primeiro parágrafo, e 20 px no segundo:

<p style="padding-left: 10px; background: grey; width= 300px;">Este parágrafo tem 10px de padding, na esquerda (left)</p>
<p style="padding-left: 20px; background: grey; width= 300px;">Este parágrafo tem 20px de padding, na esquerda (left)</p>

Veja o efeito e o espaçamento na lateral esquerda:

Este parágrafo tem 10px de padding, na esquerda (left)

Este parágrafo tem 20px de padding, na esquerda (left)

padding-right : Espaçamento na Direita do Conteúdo em CSS

Agora, analogamente ao que fizemos anteriormente, o padding-right serve para criar um espaçamento, mas agora na direita do conteúdo.

Veja o código HTML e de CSS, com 10px e 20px na lateral direita:

<p style="padding-right: 10px; background: grey; width= 200px;">Este parágrafo tem 10px de padding, na direita (right)</p>
<p style="padding-right: 20px; background: grey; width= 200px;">Este parágrafo tem 20px de padding, na direita (right)</p>

Rode o código dessa padding-right e veja o resultado no seu documento .html

padding : A propriedade de Espaçamento no CSS

Como dissemos anteriormente, é recomendável que você defina o espaçamento usando a propriedade padding para todas as direções: top, bottom, left e right.

Para evitar ter que repetir padding-top, padding-bottom, padding-right e padding-left, você pode definir todos esses valores em uma única propriedade, a padding.
A sintaxe é:

padding: tpx rpx bpx lpx;

Onde 't' é o valor para o top, 'r' de right, 'b' de bottom e 'l' de left.
Ou seja, você fornece 4 valores em sequência e sem vírgula, onde a ordem é sempre: top, right, bottom e left.

Por exemplo, se você deseja que seus parágrafos tenha 20 pixels de espaçamento acima, 10 pixels na direita, 25 pixels abaixo do conteúdo e 15px na esquerda, usando a propriedade padding, coloque em sua folha de estilos o seguinte código CSS:

p{
 padding: 20px 10px 25px 15px;
 width: 300px;
 background: gray;
}

Ler Tutorial

Box Model (Modelo de Caixas) em CSS - Margin, Padder e Border

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de nosso Curso de CSS, vamos falar de um dos conceitos mais importantes sobre o CSS, o de Box Model (ou Modelo das Caixas).

Com a ideia apresentada neste artigo, entenderemos mais sobre layouts mais bonitos e profissionais, com colunas, espaçamentos, margens e outras ideias que fazem parte do Box Model em CSS.

• Fazer download da Apostila de HTML + CSS

Box Model em CSS - O Modelo de Caixas

Neste tutorial, não iremos estudar especificamente alguma propriedade do CSS ou nova tag, muito menos mostrar códigos e exemplos.

Vamos estudar algumas ideias e conceitos que nos farão entender melhor como funcionar o CSS, como ele age no HTML, e como ambos "vêem" cada elemento que inserimos no código HTML & CSS.

Box em inglês significa caixa, e é, basicamente, isso que cada elemento de um site é, é tudo uma espécie de caixa, no sentido de ser um retângulo, um bloco é a melhor definição.

Olhe nosso site, nossa Apostila HTML Progressivo.

Ele é todo composto por caixas, por retângulos ou blocos.

Veja, tem um bloco lá em cima, com o nome do site e uma frase logo abaixo.

Abaixo, colado, tem um bloco com os links de navegação, com as sessões e tutoriais.

Na esquerda tem um bloco com anúncio do AdSense, outros cursos, dicas de livros etc.

Na direita, há um bloco com os tutoriais mais visitados, e acima deste bloco há um pequeno bloco do G+, do Google Plus.

Dentro do nosso artigo, que é uma caixa, box ou bloco, há diversos blocos menores.

O título (uma tag <h1>) é um bloco retangular.

Cada parágrafo é uma caixa também, ela tem seu espaço para ocupar.

Uma figura com sua legenda também é um box, encaixado no restante do conteúdo.

O importante de se entender aqui é: as tags, elementos e tudo mais no HTML, quando são renderizados pelo navegador, o que vai ser visto são blocos, são boxes que vão se encaixando em cima, do lado, abaixo do outro, formando o layout de um site. Viu isso?

Elementos do Box Model - De que é feito o Modelo de Caixas

Ok, já sabemos e visualizamos o box model, e sabemos que o layout é a disposição e organização desses blocos, dessas caixas.

Agora vamos entrar em detalhe sobre cada um desses elementos, de cada caixa/box, e saber do que elas são compostas e como funcionam.

Cada caixa é composta por 4 elementos:

• conteúdo (content) do elemento, que pode ser um texto do parágrafo, imagem etc
• padding (acolchoamento ou enchimento, em inglês), fica imediatamente ao redor do conteúdo
• border (bordas) são linhas que delimitam o elemento, podendo aparecer em um ou mais direção (cima, baixo e nas laterais)
• margin (margens) é o espaçamento entre os elementos, ou seja, entre as caixas ou tags (boxes)

Veja a seguinte imagem para entender melhor o box model:

Fonte da Imagem: w3schools.com

Padding, Border e Margin: top, bottom, left e right

Ao longo dos próximos tutoriais de CSS, iremos estudar bastante sobre estas 3 propriedades padding, border e margin, pois eles não são importantes, seu uso é simplesmente  obrigatório e essencial na criação de qualquer de um layout profissional para qualquer site que você venha a fazer.

O flexível CSS no permite usar somente um, outro ou todos desses elementos.

E podemos formatar a região superior (top), inferior (bottom), esquerda (left) e direita (right) de cada um deles.

Veja na figura como é a ordem das caixas, que envolvem qualquer elemento de conteúdo:

Embora o CSS nos permita alterar somente uma ou outra caixa e seus valores, os que não forem claramente definidos nas folhas de estilo, serão renderizados de acordo com as propriedades padrão de cada navegador do usuário.

Ou seja, é uma prática importante e profissional definir e formatar o padding, border e margin, e os lados que compõe essas boxes em CSS (top, bottom, left e right).

Ler Tutorial

Estilos CSS em Listas: As Propriedades list-style-type e list-style-position (Tutorial)

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de nosso Curso de CSS, vamos aprender como aplicar estilos em listas, tanto as listas ordenadas (<ol>) como as não ordenadas (<ul>), através das propriedades list-style-type (para alterarmos os tipos de listas) e da list-style-position (posição dos bullets e números).

Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:

• Apostila HTML Progressivo: Fazer download

CSS em Listas: A propriedade list-style-type

Já aprendemos, no tutorial de HTML sobre listas, a usar as tags <ul>, <ol> e a <li> (estude agora, se não tiver estudado ou não se lembrar).
Com elas, criamos listas simples (com os bullets), listas numeradas e ordenadas alfabeticamente.

Porém, como sempre, o HTML puro tem suas limitações, e o pior: elas variam de navegador para navegador, ou até mesmo dependendo do sistema operacional e dispositivo.

Mas, como tudo, o CSS nos permite definir e estilizar do jeito que mais nos convém, e não seria diferente para as listas, já que são elementos importantíssimos e extremamente usados na criação de sites.

A formatação das listas usando CSS é feita, basicamente, usando duas propriedades de estilo.
O "list-style-type" nos permite escolher estilos de listas que podem ser:

Lista não-ordenada: <ul>

Podemos usar três tipos de listas não ordenadas, com disco (disc), quadrado (square) e círculo (circle), que são os possíveis valores da propriedade list-style-type.
Vejamos a sintaxe:

list-style-type: disc

list-style-type: square

list-style-type: circle

Uma lista que apresenta três itens (<li>), cada um com o bullet em formato diferente, é feita usando o seguinte código de CSS e HTML:

<ul>
 <li style="list-style-type: disc">Lista com disc</li>
 <li style="list-style-type: square">Lista com square</li>
 <li style="list-style-type: circle">Lista com circle</li>
</ul>

Cujo efeito é:

• Lista com disc
• Lista com square
• Lista com disco

Lista ordenada: <ol>

Caso queiramos usar alguma tipo de lista que forneça uma ordem ou numeração, devemos usar a tag <ol>, onde os itens podem ser:

• decimal (decimal)
• decimal com zero na frente (decimal-leading-zero)
• numeração romana minúscula (lower-roman)
• numeração romana maiúscula (upper-roman)
• alfabeto minúsculo (lower-alpha)
• alfabeto maiúsculo (upper-alpha)

Vejamos um exemplo de código HTML & CSS que mostra todos os tipos de listas ordenadas:

<ol>
 <li style="list-style-type: decimal">Lista com decimal</li>
 <li style="list-style-type: decimal-leading-zero">Lista com decimal-leading-zero</li>
 <li style="list-style-type: lower-roman">Lista com lower-roman</li>
 <li style="list-style-type: upper-roman">Lista com upper-roman</li>
 <li style="list-style-type: lower-alpha">Lista com lower-alpha</li>
 <li style="list-style-type: upper-alpha">Lista com upper-alpha</li>
</ol>

O efeito é:

1. Lista com decimal
2. Lista com decimal-leading-zero
3. Lista com lower-roman
4. Lista com upper-roman
5. Lista com lower-alpha
6. Lista com upper-alpha

Posição da Lista em CSS: A propriedade list-style-position

O CSS é uma linguagem de estilo tão poderosa, que ela trabalha até mesmo em pequenos detalhes, nos possibilitando fazer tudo que quisermos com nossos sites.

Um belo exemplo disso é a propriedade list-style-position, que nos permite posicionar o local do bullet (círculo, quadrado ou disco) ou da numeração/ordem alfabética da lista.

Há dois locais (e valores) possíveis das lista:
inside - A lista faz parte do texto
outsite - A lista é separada, indentada, do texto

Vejamos um exemplo onde a lista faz parte do conteúdo, pois usam,os list-style-position: inside

<ol>
 <li style="list-style-position: inside">Os bullets dessa<br />lista estão
  <br />dentro do conteúdo<br />de texto
 </li>
 <li style="list-style-position: inside">Note como<br />a numeração da lista
  <br />faz parte do texto<br />
 </li>
</ol>

O efeito deste código HTML & CSS é:

1. Os bullets dessa
   lista estão
   dentro do conteúdo
   de texto
2. Note como
   a indentação da lista
   faz parte do texto, sem margem entre o bullet e o texto
   

Agora veja o que ocorre com os bullets caso usemos list-style-position: outside

<ul>
 <li style="list-style-position: outside">Os bullets dessa<br />lista estão
  <br />fora do conteúdo<br />de texto
 </li>
 <li style="list-style-position: outside">Note como<br />os bullets da lista
  <br />não faz parte do texto<br />
 </li>
</ul>

O resultado é:

• Os bullets dessa
  lista estão
  fora do conteúdo
  de texto
• Note como
  os bullets da lista
  não faz parte do texto
  

Neste ´ultimo caso, a numeração/bullets ficam à parte, em local diferente do texto.

Ler Tutorial