Curso de CSS

Neste artigo de nossa Apostila de HTML e CSS, vamos dar uma importante dica para quem deseja levar a sério nossos tutoriais de HTML e CSS e quer se tornar um Webmaster profissional, para trabalhar criando sites.

Falaremos, em detalhes, sobre o que é um webmaster, o que ele faz, onde, como trabalha, o que deve estudar, como entrar no mercado de trabalho e se trabalhar na criação de sites.

Ler Tutorial

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

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

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

Tag < span > - Como agrupar elementos inline em HTML e CSS com a SPAN

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 de nosso curso, iremos aprende aprender uma das tags, junto da tag <div>. que é extremamente usada para estruturar e organizar seus sites de uma maneira bem natural e lógica, através da tag <span>.

Estude offline: Apostila HTML + CSS

<span> - Destacando Elementos Inline no HTML &

No tutorial de CSS passado, falamos sobre a tag <div> e mostramos como é possível criar divisões para agrupar elementos que tem algum em comum, dentro de um mesmo local, um container, que é a div.

Usar a tag div junto do seletor ID e do CLASS em CSS é uma prática bem comum, e vamos usar esse grupo de ferramentas durante todo nosso curso de CSS, em diversos tutoriais.
Porém, os seletores de tag e tag div, como o nome diz, agem nas tags por completo.

Por exemplo, se você coloca o seletor ID numa tag de parágrafo <p> e aplica um estilo à ela, todo o parágrafo é estilizado pela(s) regra(s) de CSS.
Logo, a tag div aplica um estilo em todas as tags (elementos, ou objetos) que estão dentro dela.

Se usar os seletores ID e CLASS em uma tag qualquer para estilizar, estará estilizando todo o conteúdo da tag, o que nem sempre é o que queremos, como veremos em exemplos deste tutorial de CSS.

Todas as tags, exceto a tag <span>, pois esta tag permite que usemos os seletores ID e CLASS em apenas um trecho da tag, ou seja, a tag span é uma tag inline, pois ela é usada dentro de outras tags, é uma espécie de elemento interno de outro elemento (de outra tag).

Como usar a tag <span> em HTML e CSS

A sintaxe da span tag é como outra tag qualquer, a diferença é que devemos envolver o texto que quisermos entre: <span> e </span>

Por exemplo, o seguinte código HTML:

<p>Para que serve a tag span - Tutorial de <span>HTML</span> e <span>CSS</span></p>

Tem o seguinte efeito:
Para que serve a tag span - Tutorial de HTML e CSS

Ou seja, simplesmente envolver um trecho com as tags span não produz nenhum efeito propriamente dito. Mas vamos aplicar estilo nessas tags span, vamos colocar cor azul na palavra HTML e cor vermelha na palavra CSS, o código HTML fica:

<p>Para que serve a tag span - Tutorial de <span style="color:blue">HTML</span> e <span style="color:red">CSS</span></p>

E o efeito ocorrido nas tags span estilizadas será:
Para que serve a tag span - Tutorial de HTML e CSS

Ou seja, colocamos as tags <span> dentro de outra tag, a <p>, e aplicamos um estilo somente dentro daquele trecho específico.

Exemplo de uso da tag <span>

Agora que já vimos neste tutorial de CSS a importância, uso e como usar a tag <span>, vamos dar um exemplo de uso mais comumente visto, que é feito usando a span junto com seletores do tipo ID ou CLASS.

Vamos criar uma página que vai ter um artigo sobre "Tutorial de CSS", ou seja, um site com um texto.
Até aí tudo ok, vamos escrever um texto genérico sobre essa temática, porém vamos destacar duas coisas, sempre que aparecer "tutorial de CSS" no texto, vamos envolver esse trecho com uma <span class="tutorial">tutorial de css</span> e quando aparecer "Curso HTML Progressivo" vamos identificar este trecho com <span class="site">Curso HTML Progressivo</span>.

Recomendamos que primeiro escreva o texto, e só depois faça uma busca por "tutorial de css" e substitua esse texto por um com as tags span, e o mesmo para Curso HTML Progressivo.
Eu fiz essa substituição usando uma linguagem de programação, o JavaScript.

Agora que identificamos, vamos usar que aprendemos em CSS para estilizar cada vez que esses trechos apareçam em nossa página.
Sempre que aparecer "tutorial de CSS", vamos colocar um negrito e uma cor vermelha neste texto, pois queremos destacá-lo.
Já quando aparecer o nome do site, "Curso Progressivo", vamos aplicar um itálico, negrito, uma cor azul e uma fonte maior.

Nossa folha de estilos estilo.css fica:

.tutorial {
 font-weight: bold;
 color: red;
}

.site {
 font-style: italic; 
        font-weight: bold;
 font-size: 20px;
 color: blue;
}

Já nosso documento HTML com um texto genérico fica:

<!DOCTYPE html>
 
<html> 
<head>
 <title>Tutorial de CSS - a tag <span></title>
 <meta name="description" content="Tutorial de CSS sobre a tag <span>">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>

<body>
 <h1><span class="tutorial">Tutorial de CSS</span></h1>
 <h2>Introdução</h2>
 <p>Neste artigo de nosso <span class="site">Curso HTML Progressivo</span>, iremos falar da importância do CSS para o desenvolvimento web e daremos uma dica sobre um excelente <span class="tutorial">tutorial de CSS</span> que é possível achar online, e gratuito para download.</p>

 <h2>A importância de um <span class="tutorial">tutorial de CSS</span></h2>
 <p>Achar um bom <span class="tutorial">tutorial de CSS</span> na internet não é nada fácil.<br />
    É possível encontrar um ou outro <span class="tutorial">tutorial de CSS</span> solto, sobre assuntos desconexos, e a maioria já supõe que você saiba de muitas coisas.</p>

 <p>Um bom <span class="tutorial">tutorial de css</span>, é um que seja completo, assuma que o usuário nunca tenha estudado aquele assunto e que ensine da maneira mais clara e correta possível, passando informações e exemplos, pois só teoria não basta.</p>

 <h2>Onde achar um bom <span class="tutorial">tutorial de CSS</span> - <span class="site">Curso HTML Progressivo</span></h2>
 <p>Visando preencher a lacuna que faltava na internet brasileira, o <span class="site">Curso HTML Progressivo</span> oferta um tutorial completo de css, além de ensinar os conhecimentos necessários de HTML que você deve ter para estudar CSS.</p>

 <p>O <span class="tutorial">tutorial de css</span> da <span class="site">Apostila HTML Progressivo</span> é totalmente online, gratuito e não exige cadastro para o uso, basta acessar o site e começar a ler os artigos sobre CSS.</p>

 <p>Caso você seja iniciante, aconselhamos a seguir o conteúdo do Índice, pois fornece a ordem exata que você deve estudar pelo <span class="site">Curso HTML Progressivo</span>.</p>

 <p>Porém, se você não for iniciante, os artigos estão divididos em seções, e você pode usar qualquer <span class="tutorial">tutorial de CSS</span> como referência de consulta.</p>

</body>

</html>

Crie sua folha de estilos, seu documento.html e rode os códigos para ver o efeito.
Ok, não ficou muito bonito, tá parecendo o site do Restart, mas é só para mostrar o uso das tags <span>, em que situações e como devem ser usadas, é importante você ver o efeito do CSS em todos os artigos de nosso curso.

Ler Tutorial

ID selector em CSS- Seletor do tipo ID e sua diferença com o CLASS

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, iremos falar de um dos elementos mais usados em HTML, tanto para CSS como para a linguagem de programação JavaScript, que são os seletores do tipo ID.

Fazer download da Apostila de HTML + CSS

ID selector - O seletor de identificação em CSS

No tutorial passado de nossa Apostila de CSS falamos sobre o seletor class e vimos o incrível poder e flexibilidade que ele nos trás, pois podemos agrupar diversos trechos de nosso código em uma classe, identificar essa classe da maneira que bem quisermos e aplicar definições de estilo CSS neste trecho especificamente.

Os seletores do tipo id também servem para identificar o trecho de um código HTML para que possamos fazer o CSS atuar nele.
Mas se parar parar pensar, o seletor class também faz esse trabalho.

A principal característica do id selector é que ele serve para identificar (daí vem o nome id) uma parte única do código, diferente do class, que tem usos mais gerais e pode ser usado o mesmo nome várias vezes num mesmo documento de HTML.

E, mais uma vez, assim como o seletor class, a sintaxe do seletor id é quase idêntica.
A primeira parte é colocar o atributo id dentro de uma tag, de um trecho qualquer de seu código HTML e atribuir um valor a este atributo id.

O valor deste id é você quem escolhe, segundo as regras que usamos no atributo class.
Escolha um nome único, que descreve aquele elemento especificamente.
Assim, a sintaxe do uso de id no código HTML é:

<TAG id="identificador">

Por exemplo, vamos identificar diversos cabeçalhos:

<h1 id="primeiroH1">Cabeçalho principal</h1>
<h1 id="segundoH1">Cabeçalho secundário</h1>
<h1 id="ultimoH1">Último cabeçalho do artigo</h1>

Já dentro do CSS, para aplicarmos um estilo a um identificador usamos o símbolo de hashtag # seguido do nome do identificador.
É como fizemos no seletor CLASS, mas lá era com um ponto (.).

Veja:

#primeiroH1{
  regras CSS para o primeiro <h1>;
}
 
#segundoH1{
  regras CSS para o segundo <h1>;
}
 
#ultimo{
  regras CSS para o último <h1>;
}

Qual a diferença entre CLASS e ID ?

Estudando este artigo de tutorial e o tutorial passado sobre o seletor class, uma dúvida surge e atormenta os iniciantes em CSS: quando usar class e quando usar id ?

Realmente, vendo os códigos do ID e de CLASS só muda mesmo que em ID usamos o símbolo de hash (#) e em classes usamos o ponto (.)

ID e JavaScript

Sem dúvidas, um dos usos mais importantes do seletor id é para JavaScript.

Como o nome do seletor diz, ele serve para identificar um elemento, sendo vastamente usado em formulários HTML.

Através da linguagem de programação para werb JavaScript, podemos nos comunicar diretamente com cada elemento de um código HTML, devidamente identificado por seu id.

Por exemplo, em formulários, damos um nome a cada elemento do formulário e através disso o JavaScript ou PHP poderá saber as informações fornecidas pelos usuários ao preencher o form:

<input type="text" id="email">

<input type="password" id="senha">

<select name="estado" id="uf">

Ou seja, identificando cada membro, ele terá um nome único, que é só dele, assim uma linguagem de programação pode obter e trabalhar junto de um local específico do HTML, pois tem como identificar aquele trecho pelo seu nome.

ID é única, CLASS pode não ser

Os exemplos de formulários passado mostram uma das grandes diferenças entre id e class: as id são únicas, não podemos ter dois elementos de um formulário com a mesma id.

Nos Estados Unidos se referem a ID como nosso RG, ou seja, como sua identificação, o nome não é à toa, se soube inglês vai sempre lembrar que ID é algo único, não pode repetir ou aplicar uma ID com mesmo nome em dois ou mais elementos.

Já o atributo class pode ter o mesmo valor (mesmo nome da classe) em diversas tags.
Por exemplo, podemos colocar class="link" em diversos links de uma página, então quando aplicarmos o efeito CSS nessa class, todos os links que tem esse atributo com este valor serão afetados.

ID e Links âncora (links para saltos na mesma página)

Uma utilidade bem interesse do seletor id é para a criação de links do tipo âncora, que são links para acessar diferentes partes em uma mesma página.
Embora estejamos na seção sobre CSS de nosso curso, o uso do atributo id para este fim é algo do HTML, e não do CSS, pois na prática não estamos aplicando nenhum estilo as páginas de nossos sites.

Esse tipo de técnica e uso do ID é geralmente usado em páginas de FAQ, de perguntas em respostas.
Costumam ter um sumário das perguntas, aí você clica nelas e a tela da página começa a rolar automaticamente, e para exatamente na pergunta que você selecionou.
Em seguida você clica em "topo" e a página sobe lá para cima e você vê as perguntas novamente.

Para fazer isto é bem simples.
Primeiro você precisa identificar todos os elementos de uma página na qual os links vão apontar. No exemplo da FAQ (Perguntas & Respostas), vamos supor que cada pergunta está dentro de um cabeçalho H2 (<h2>). Fica:

<h2 id="pergunta1">Pergunta 1</h2>
<h2 id="pergunta2">Pergunta 2</h2>
<h2 id="pergunta3">Pergunta 3</h2>

A segunda parte é a criação de links com a tag <a>, e em vez de colocar o endereço "URL" no atributo href coloque "URL#ID", onde "ID" é o nome que você deu a cada elemento da página que quis identificar (no caso, as perguntas nas tags <h2>)

<a href="www.seusite.com.br/pagina.html#pergunta1">Pergunta 1</a>

<a href="www.seusite.com.br/pagina.html#pergunta2">Pergunta 2</a>
<a href="www.seusite.com.br/pagina.html#pergunta3">Pergunta 3</a>

Como, criamos dois identificadores para este tutorial de nosso curso, os "id-selector" e "diferenca", que vão para os títulos principais desta página (http://www.htmlprogressivo.net/2014/01/ID-selector-CSS-Seletor-tipo-ID-diferenca-CLASSE.html), veja:

ID Selector
A diferença entre ID e CLASS

Em CSS, o seletor ID se sobressai ao seletor CLASS

É perfeitamente possível aplicar um seletor do tipo ID e um de tipo CLASS a um mesmo elemento de um código HTML.

Por exemplo, vamos supor que em todos os links, tags <a>, de um página tenha um seletor class com o valor "links" (nome da classe), pois queremos aplicar um mesmo estilo em todos os links (uma mesma cor, por exemplo).

Vamos supor que você criou um mega tutorial de CSS com 10 partes, e em todos os links desses artigos são da cor azul e sublinhados, como é o comum.
Porém, em tutoriais com diversas páginas, é comum ter um link "anterior" e "próximo", apontando para a parte anterior e para a próxima página do tutorial.

Ou seja, esses dois links são especiais, você quer que eles tenham cores e fontes diferentes.
Então você coloca um seletor id no primeiro link (id="anterior") e no segundo (id="proximo").
Note que estes dois links terão tanto o seletor class (class="links") como o seletor id (id="anterior" ou id="proximo").

Na sua folha de estilos CSS você define que todo elemento da classe "links" vai ser azul e com sublinhado, e também define que os links com id "anterior" ou "proxima" vão ser vermelhos e em negrito.

Ou seja, há um aparente conflito. Mas como dissemos no título desta seção do artigo, o seletor ID se sobressai ao seletor CLASS, então os links "anterior" e "próximo" serão vermelhos e em negrito.
Embora estes links tenham recebido dois estilos, é óbvio que não pode fazer os dois ao mesmo tempo, e nesses casos a prioridade é sempre vencida pelo seletor ID, pois ele é mais específico e único.

Note que você pode ter milhões de links nos seus artigos, todos vão ser azuis e sublinhados, somente os links "anterior" e "proxima" serão vermelhos e negrito.
E você fez isso de uma maneira totalmente automatizada e escrevendo pouquíssimas linhas no seu arquivo CSS.

Interessante este CSS, não?

Ler Tutorial

Sumário do Curso

Informações sobre HTML

Conceitos básicos sobre criação de websites

Tutorial sobre Formatação de Texto em HTML

Tutoriais sobre Imagens em HTML

Tutoriais sobre Tabelas em HTML

Tutoriais sobre Frames em HTML

Tutoriais sobre Formulários em HTML

Curso de CSS (Cascading Style Sheets)

Tutorial Básico de CSS

Tutorial de CSS: Formatação de Textos

Layout de um site em CSS: Box Model (Modelo de Caixas)

Tutorial de CSS sobre Imagens

01. Imagens em CSS02. Estilizando imagens em CSS03. Background - Alterando plano de fundo

Tutorial CSS em Links

Tutorial de HTML5

Tutorial de Imagens em HTML5

Curso de SEO

Entendendo o Google

Técnicas de SEO

Monetização de Sites

Google Adsense

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

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

CSS em Links - Por que estilizar ?

A propriedade link do CSS

A propriedade hover do CSS

A propriedade visited do CSS

A propriedade active do CSS

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

Como adicionar as bordas em CSS - A propriedade border

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

Espessura da Borda em CSS - A Propriedade border-width

Cores nas Bordas em CSS - A Propriedade border-color

Usando somente a propriedade border em CSS

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

<span> - Destacando Elementos Inline no HTML &

Como usar a tag <span> em HTML e CSS

Exemplo de uso da tag <span>

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

ID selector - O seletor de identificação em CSS

Qual a diferença entre CLASS e ID ?

ID e JavaScript

ID é única, CLASS pode não ser

ID e Links âncora (links para saltos na mesma página)

Em CSS, o seletor ID se sobressai ao seletor CLASS

Tutoriais de HTML e CSS

01. Imagens em CSS
02. Estilizando imagens em CSS
03. Background - Alterando plano de fundo