Iniciando com CSS

Neste artigo iremos pegar um simples documento HTML e aplicar o CSS nele, aprendendo algumas coisas pr√°ticas sobre a linguagem no decorrer do processo.

pré-requisitos:

Conhecimento básico sobre computador, softwares básicos instalados, conhecimento básico de como trabalhar com arquivos, e conhecimento básico sobre HTML (estude Introdução ao HTML.)

Objetivo: Entender os fundamentos que vinculam um documento CSS a um arquivo HTML, e ser capaz de estilizar um texto simples com CSS.

Iniciando com algum HTML

Nosso ponto de partida e um documento HTML. Você pode copiar o código abaixo se desejar trabalhar no seu próprio computador. Salve-o como index.html em uma pasta, no seu computador.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Getting started with CSS</title>
</head>

<body>

    <h1>I am a level one heading</h1>

    <p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="http://example.com">link</a>.</p>

    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

    <ul>
        <li>Item one</li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
    </ul>

</body>

</html>

Observa√ß√£o: Se voc√™ est√° lendo isso em um dispositivo m√≥vel ou em um ambiente onde n√£o possa criar arquivos, n√£o se preocupe ‚ÄĒ editores de c√≥digo ao vivo est√£o dispon√≠veis abaixo para permitir que voc√™ escreva o c√≥digo de exemplo aqui, nesta p√°gina.

Adicionando CSS para o nosso documento

A primeira coisa que precisamos fazer √© falar para o HTML que temos algumas regras CSS que desejamos usar. H√° tr√™s formas diferentes de aplicar CSS a um documento HTML que voc√™ normalmente vai encontrar, contudo, por enquanto, iremos olhar para o mais habitual e √ļtil ‚Äď vincular o CSS a partir do cabe√ßalho do seu documento.

Crie um arquivo na mesma pasta em que se encontra o seu documento HTML e salve-o como style.css. A extens√£o .css nos informa que se trata de um arquivo CSS.

Para ligar o style.css ao index.html adicione a seguinte linha em algum lugar dentro do <head> do documento HTML:

<link rel="stylesheet" href="styles.css">

Este <link> elemento diz ao navegador que temos uma folha de estilo, usando o atributo rel, e a localização desse arquivo como o valor do atributo href. Você pode testar se esse CSS funciona adicionando regras ao styles.css. Usando o seu editor de código, adicione as linhas seguintes ao seu arquivo CSS:

h1 {
  color: red;
}

Salve os seus arquivos HTML e CSS e atualize a página no seu navegador. O nível de cabeçalho um, no topo do documento, deve estar agora em vermelho. Se tudo estiver correto, parabéns! - Você teve sucesso ao aplicar CSS a um documento HTML. Se nada aconteceu, observe cuidadosamente se você digitou tudo certo.

Você pode continuar trabalhando no styles.css localmente, ou pode usar nosso editor interativo abaixo pra continuar com este tutorial. O editor interativo age como se o CSS no primeiro painel estivesse vinculado ao documento HTML, assim como fizemos com o documento acima.

Estilizando elementos HTML

Fazendo o nosso cabe√ßalho ficar vermelho, demonstramos que podemos pegar e estilizar um elemento HTML. Fazemos isso especificando um seletor de elemento ‚ÄĒ Isto √©, um seletor que combina diretamente com o nome do elemento HTML. Para especificar todos os par√°grafos no documento, voc√™ usaria o seletor p. Para tornar todos os par√°gragos verdes, voc√™ usaria:

p {
  color: green;
}

Voc√™ pode especificar m√ļltiplos seletores, separando-os com virgula. Se eu quero que todos os par√°grafos e todos os itens da lista se tornem verdes, ent√£o minha regra se parecer√° com isto:

p, li {
    color: green;
}

Experimente isso no editor interativo abaixo (edit the code boxes), ou no seu arquivo CSS local.

 

Alterando o comportamento padr√£o dos elementos

Quando olhamos para um documento HTML bem marcado, at√© algo t√£o simples como o nosso exemplo, podemos ver como o navegador est√° tornando o HTML leg√≠vel adicionando algum estilo padr√£o. T√≠tulos s√£o grandes e em negritos, nossa lista possui marcadores. Isso acontece porque navegadores tem uma folha de estilo interna contendo estilo padr√£o, a qual eles aplicam para toda a p√°gina por padr√£o; sem eles, todo o texto seria executado em conjunto e ter√≠amos que estilizar tudo do princ√≠pio. Todos os modernos navegadores mostram conte√ļdo HTML por padr√£o, da mesma maneira.

Contudo, você frequentemente irá desejar algo diferente do que foi escolhido pelo navegador. Isso pode ser feito simplesmente escolhendo o elemento HTML que você quer mudar, e usando uma regra CSS para alterar a forma como ele se parece. Um bom exemplo é o nosso <ul>, uma lista não ordenada. Ele tem uma lista marcada, e, se decido não escolher essa marcação, posso removê-los fazendo assim:

li {
  list-style-type: none;
}

Experimente adicionar isto ao seu CSS agora.

A propriedade list-style-type é uma boa propriedade para se ver no MDN para ver quais valores são suportados. Dê uma olhada na página para list-style-type e encontrará um exemplo interativo no topo da página para experimentar alguns valores diferentes nele, todos os valores permitidos são detalhados mais abaixo na página.

Olhando para essa p√°gina voc√™ descobrir√° que, al√©m de remover a marca√ß√£o da lista, que voc√™ tamb√©m pode alter√°-los ‚ÄĒ Teste mud√°-los para marca√ß√£o quadrada, usando valores de square.

Incluindo uma classe

Até agora, temos estilizado elementos baseado em seus nomes HTML. isto funciona enquanto você desejar que todos os elementos desse tipo, no seu documento, se pareçam o mesmo. Na maioria das vezes, isso não é o caso, e, então, você precisará encontrar uma maneira de selecionar um subconjunto de elementos sem alterar os outros. A maneira mais comum de fazer isso é adicionar uma classe ao seu elemento HTML e especificar essa classe.

No seu documento HTML, adicione um atributo de classe ao segundo item da lista. Sua lista se parecer√°, agora, assim:

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

No seu CSS, você pode especificar a classe special criando um seletor que inicia com um caractere de ponto final. Adicione o seguinte código ao seu arquivo CSS:

.special {
  color: orange;
  font-weight: bold;
}

Salve e recarregue a p√°gina no navegador, para visualizar o resultado.

Você pode aplicar a classe special para qualquer elemento na sua página que desejar ter a mesma aparência o item dessa lista. Por exemplo, pode-se querer que o <span>, no parágrafo, também se torne laranja e em negrito. Experimente adicionar uma class de special a ele, em seguida, recarregue a sua página e veja o que acontece.

Algumas vezes, ver√° regras com um seletor que lista o seletor do elemento HTML junto com uma classe:

li.special {
  color: orange;
  font-weight: bold;
}

Essa sintaxe significa "pegue qualquer elementoli que tenha uma classe special". Se você fizesse isso, não seria mais possível aplicar a classe a um <span> ou outro elemento, simplesmente adicionando a classe a ele; você teria que adicionar esse elemento à lista de seletores, assim:

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

Como pode imaginar, algumas classes podem ser aplicadas a muitos elementos e você não quer ter que editar seu CSS a cada vez que algo novo precisar assumir esse estilo. Portanto, as vezes é melhor ignorar o lemento e simplesmente se referir à classe, a menos que você queira criar algumas regras especiais para um elemento em particular, e, talvez, queira ter certeza que eles não serão aplicados aos outros.

Estilizando coisas baseadas em sua localização no documento

H√° momentos quando voc√™ desejar√° que algo se pare√ßa diferente, baseado onde ele est√° no documento. Existem v√°rios seletores que podem lhe ajudar aqui, mas, por enquanto, iremos olhar apenas alguns. No nosso documento est√£o dois elementos <em> ‚ÄĒ um dentro de um par√°grafo e o outro dentro do item de lista. Para selecionar apenas um <em> aninhado dentro de um elemento <li> posso usar um seletor chamado combinador descendente, a qual simplesmente, assume a forma de um espa√ßo entre dois outros seletores.

Adicione a seguinte regra a sua folha de estilo.

li em {
  color: rebeccapurple;
}

Este seletor selecionará qualquer elemento <em> que está dentro (um descendente de) um <li>. Deste modo, no seu documento de exemplo, você deve achar que o <em> no terceiro item da lista agora está roxo, mas o que está dentro do parágrafo permanece inalterado.

Outra coisa que voc√™ pode gostar de experimentar √© estilizar um par√°grafo quando ele vem diretamente ap√≥s um t√≠tulo no mesmo n√≠vel de hierarquia no HTML. Para isso, coloque um +  (um combinador irm√£o adjacente) entre os seletores.

Experimente adicionar esta regra à sua folha de estilo também:

h1 + p {
  font-size: 200%;
}

O exemplo ativo abaixo inclui as duas regras acima. Verifique adicionando uma regra para tornar um span vermelho, se ele está dentro de um parágrafo. Você saberá se fez certo quando o span no primeiro parágrafo ficar vermelho, mas o do primeiro item da lista não mudar de cor.

Observação: Como pode ver, CSS nos dá várias maneiras de especificar elementos, e temos somente arranhado a superfície até agora! Analisaremos adequadamente todos esses seletores e muitos outros, nos nossos artigos Seletores posteriormente neste curso.

Estilizando coisas baseadas no estado

O tipo final de estilo, que vamos dar uma olhada neste tutorial, √© a habilidade de estilizar coisas com base em seu estado. Um exemplo direto disso √© quando estilizamos links. Quando aplicamos um estilo a um link, precisamos especificar o elemento <a> (√Ęncora). Isto possui diferentes estados, dependendo se ele foi visitado, se n√£o foi visitado, se o mouse est√° passando por ele, se foi teclado ou no processo de ser clicado (ativado). Voc√™ pode usar CSS para especificar estes diferentes estados ‚ÄĒ o CSS abaixo estiliza links n√£o visitados com a cor rosa e links visitados com a cor verde.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

Você pode alterar a aparência do link quando o usuário passa o mouse sobre ele. Por exemplo, removendo o sublinhado, o que é realizado na próxima regra:

a:hover {
  text-decoration: none;
}

No exemplo ativo abaixo, voc√™ pode brincar com diferentes valores para os v√°rios estados do link. Adicionei as regras acima, e agora perceba que a cor rosa √© bastante clara e dif√≠cil de ler. ‚ÄĒ porque n√£o mudar isso para uma cor melhor? Pode deix√°-los em negrito?

 

Removemos o sublinhado do nosso link ao passar o mouse. Pode-se remover os sublinhados de todos os estados de um link. Vale lembrar, no entanto, que em um site real, voc√™ deseja garantir que os visitantes saibam que um link √© um link. Deixar o sublinhado no lugar pode ser uma pista importante para as pessoas perceberem que √© poss√≠vel clicar em algum texto dentro de um par√°grafo ‚ÄĒ esse √© o comportamento ao qual est√£o acostumados. Como tudo em CSS, existe o potencial de tornar o documento menos acess√≠vel com suas altera√ß√Ķes ‚ÄĒ procuraremos destacar poss√≠veis armadilhas em locais apropriados.

Observa√ß√£o: Voc√™ ver√° frequentemente men√ß√£o de acessibilidade nessas li√ß√Ķes e no MDN. Quando falamos sobre acessibilidade, estamos nos referindo aos requerimentos para a nossa p√°gina web ser compreens√≠vel e utiliz√°vel por todos.

Seu visitante pode muito bem estar em um computador com um mouse defeituoso, ou um dispositivo m√≥vel com uma tela sens√≠vel ao toque. Ou eles podem estar usando um leitor de tela, que l√™ o conte√ļdo do documento, ou podem precisar de muito texto grande, ou estar navegando no site apenas usando o teclado.

Um documento HTML simples √© geralmente acess√≠vel a todos ‚ÄĒ Ao come√ßar a estilizar esse documento, √© importante que voc√™ n√£o o rone menos acess√≠vel.

Combinando seletores e combinadores

Vale ressaltar que você pode combinar vários seletores e combinadores. Até agora, vimos assim:

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span { ... }

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p { ... }

Você pode combinar multiplos tipos juntos, também. Experimente acrescentar o seguinte código:

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

Isso estilizará qualquer elemento com a classe special, a qual está dentro de um <p>, que vem logo após um <h1>, que, por sua vez, está dentro de um <body>. Ufa!

No HTML original que forncemos, o √ļnico elemento estilizado √© <span class="special">.

N√£o se preocupe se isto parece complicado no momento ‚ÄĒ em breve, voc√™ come√ßar√° a entender como escreve mais CSS.

Empacotando

Neste tutorial, demos uma olhada na quantidade de maneiras as quais pode-se estilizar um documento usando CSS. Estaremos desenvolvendo esse conhecimento ao longo da caminhada atrav√©s das Li√ß√Ķes. No entanto, agora, voc√™ j√° sabe o suficiente para estilizar o texto, aplicar CSS com base em diferentes maneiras de especificar elementos no documento e procurar propriedades e valores na documenta√ß√£o do MDN.

Na próxima lição, veremos como o CSS é estruturado.

Neste módulo