Go to Previous Section:
Getting started Esta é a primeira seção do tutorial de introdução as CSS e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.
O que é CSS ?
Cascading Style Sheets (CSS) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).
Um documento é um conjunto de informações que são estruturadas utilizando uma linguagem de marcação.
- Um documento, é uma página da web como esta que você está lendo.
A informação que você vê em uma página web é geralmente estruturado utilizando a linguagem de marcação HTML (HyperText Markup Language). - Dialogos, também chamados de Janelas Modais de um aplicativo, são frequentemente documentos.
Tais diálogos podem também ser estruturados usando linguagem de marcação, como XUL. Este é frequentemente o caso em aplicações Mozilla, mas não é um caso comum.
Neste tutorial, temos boxes com o título Mais detalhes como o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.
Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.
Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá trabalhar com documentos que estão armazenados em arquivos.
Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:
| HTML | para paginas web |
| XML | para documentos estruturados em geral |
| SVG | para gráficos |
| XUL | para interfaces de usuários em Mozilla |
Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.
Apresentar um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente — por exemplo, na tela de um computador, projetor ou impressora.
CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta um documento a um usuário é chamado de user agent (UA), no Brasil agente de usuário. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.
Para mais definições formais sobre terminologia relacionadas com CSS, veja Definições na especificação CSS.
Ação: Criando um documento
- Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.
- Copie e cole o código HTML abaixo . Salve o arquivo usando o nome
doc1.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Documento de exemplo</title> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> - No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar.
Você deve ver o texto com as letras iniciais em negrito, como este:
Cascading Style Sheets O que você vê no seu navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.
O que veremos depois?
Go to Next Section:
Why use CSS?Seu documento ainda não usa CSS. Na próxima seção você usará CSS para especificar o estilo.