Por que usar CSS?

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Esta segunda parte do  CSS Getting Started tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.

Informação: Por que usar CSS?

As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag <head> do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos  na tag <head> de seu documento.

Uma folha de estilo externa, tem muitas vantagens.:

  • Ajuda a evitar código repetido
  • Facilita a manutenção
  • Permite fazer mudança no site inteiro alterando apenas um arquivo.
Exemplo

Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..

Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo  juntamente com o conteúdo da página.

Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.

Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo.  Mais adiante neste tutorial, você verá algumas exceções a esta disposição.

Mais detalhes

Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.

Por exemplo, você pode usar a tag <b> para fazer o texto em negrito, e pode especificar a cor de fundo  na sua tag <body>.

Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.

Ação: Criando uma folha de estilo

  1. Crie outro arquivo de texto no mesmo diretório que o documento doc1.html você criou na primeira seção.
  2. Salve seu documento como: style1.css. Este arquivo será sua folha de estilos.
  3. Em seu CSS, cole a linha abaixo, e salve o arquivo:
    strong {color: red;}
    

Linkando seu documento para sua folha de estilo

  1. Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo:
    <!DOCTYPE html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Documento Simples com CSS</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p>
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>
    
  2. Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas:
    Cascading Style Sheets

View above Demo

Desafio

Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.

Encontre mais cinco nomes de cores que as CSS trabalham.

Possible solution

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

Hide solution
Veja a solução para este desafio.

O que veremos?

Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para  aprender mais sobre como seu navegador trabalha e exibe um documento.

Etiquetas do documento e colaboradores

 Colaboradores desta página: rogeralbinoi
 Última atualização por: rogeralbinoi,