Esta tradução está incompleta. Ajude atraduzir este artigo.
Go to Previous Section:
What is CSS?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.
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.
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
- Crie outro arquivo de texto no mesmo diretório que o documento doc1.html você criou na primeira seção.
- Salve seu documento como:
style1.css. Este arquivo será sua folha de estilos. - Em seu CSS, cole a linha abaixo, e salve o arquivo:
strong {color: red;}
Linkando seu documento para sua folha de estilo
- 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> - Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas:
Cascading Style Sheets
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.
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.
O que veremos?
Go to Next Section:
How CSS works.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.