Neste capítulo você vai abrir uma página no computador, ligar uma folha de estilos e reconhecer uma mudança feita por você.

Seu ponto de partida

Esta é a primeira etapa e não exige programação. Abra pacote de exemplos/01-primeira-pagina. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

O código completo do primeiro HTML está no fim deste volume. As regras de apoio do link Pular para o conteúdo serão estudadas com calma no capítulo 10.

Abra uma página que já funciona

Comece pela pasta inicio deste exemplo. Dê dois cliques em index.html. O navegador mostra uma página chamada Caderno CSS. Ela ainda tem a aparência básica do navegador. Você já tem uma página funcionando, mesmo sem personalização.

Agora abra o mesmo arquivo num editor de texto. No Windows, use Abrir com e escolha o Bloco de Notas ou seu editor. O arquivo é o mesmo, mas cada programa o apresenta de outra maneira. O editor mostra as instruções; o navegador mostra o resultado.

HTML identifica o conteúdo. As marcas

e

inicia um parágrafo. O fechamento

Use uma cópia da pasta inicio para sua prática. Guarde o exemplo pronto na raiz para comparar. Não edite os arquivos dentro do zip: extraia a pasta antes de começar.

Faça no seu exemplo

Em index.html, localize o h1 existente. O bloco mostra as linhas que você vai reconhecer; não cole um segundo título.

<h1>Caderno CSS</h1>
<p class="apresentacao">Um lugar para estudar uma coisa por vez.</p>

Mude uma coisa e preveja

Troque apenas Caderno CSS por Meu caderno de estudo.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Salve no editor, volte ao navegador e recarregue. Confira o novo título no corpo da página. A aba usa outro texto, definido em title.

Resultado esperado neste teste: O título visível deve mudar. A cor e o tamanho continuarão os mesmos.

Se não acontecer

Se a alteração não aparecer, confira se salvou e se abriu a mesma cópia. Se o nome terminar em index.html.txt, ative a exibição das extensões e remova somente o .txt final.

Dê estilo à página com um arquivo local

CSS define a apresentação: fonte, cores, bordas e espaços. O Simple.css é um arquivo CSS pronto que fornece uma base para páginas pequenas. Usaremos essa base para ver uma melhoria logo no início. Mais adiante você entenderá como escrever seus próprios ajustes.

O arquivo simple.css já está na pasta inicio. Não é necessário baixar nada para estudar. Uma referência no HTML diz ao navegador onde encontrá-lo. O atributo href contém o caminho; rel=“stylesheet” identifica uma folha de estilos.

head guarda informações sobre a página. body guarda o conteúdo exibido. O link da folha de estilos fica dentro de head. Copie a linha abaixo antes de . Não a coloque dentro de um parágrafo.

Abrir no computador não publica nada. Se a barra de endereço começa com file:, você está vendo um arquivo do disco. Mesmo que sua máquina esteja conectada à internet, a página ainda não está acessível ao público.

Faça no seu exemplo

Em inicio/index.html, dentro de head e antes de , acrescente a referência acima.

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

Mude uma coisa e preveja

Mude temporariamente href=“simple.css” para href=“simples.css”.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Salve e recarregue para observar o erro. Depois restaure simple.css, salve e recarregue. A página deve recuperar fonte, espaços e largura de leitura.

Resultado esperado neste teste: A aparência pronta deve desaparecer, pois não existe um arquivo chamado simples.css.

Se não acontecer

Um caminho escrito errado não significa que o HTML sumiu. O conteúdo continua aparecendo; o navegador apenas não encontrou a folha de estilos.

Faça sua primeira regra CSS

Você vai manter simple.css intacto e escrever seus ajustes em custom.css. Essa separação permite reconhecer o que veio pronto e o que você mudou. O arquivo custom.css já existe na pasta de prática.

Adicione a segunda referência logo depois da referência a simple.css. A ordem será importante no próximo volume. Por enquanto, mantenha a base primeiro e os seus ajustes depois.

A regra abaixo escolhe h1. O nome que faz essa escolha é seletor. As chaves delimitam as declarações. font-style é a propriedade que será alterada; italic é o valor. Dois-pontos separam propriedade e valor, e ponto e vírgula terminam a declaração.

Faça uma mudança por vez. Você não precisa modificar a cor, a largura e a fonte juntas para aprender CSS. Uma alteração pequena é mais fácil de observar e de desfazer.

Faça no seu exemplo

No HTML, acrescente depois do link a simple.css. Em custom.css, acrescente a regra completa abaixo das regras de apoio já fornecidas.

h1 {
  font-style: italic;
}

Mude uma coisa e preveja

Troque italic por normal.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Salve custom.css e recarregue index.html. Compare o título. Restaure italic para chegar ao resultado de referência deste volume.

Resultado esperado neste teste: O título deve perder a inclinação. Os parágrafos não serão modificados por essa regra.

Se não acontecer

Se nada mudar, confirme o nome custom.css e seu link no HTML. Não cole a regra CSS diretamente no corpo do arquivo HTML.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Compare a mesma ideia sem e com estilo

Estas duas capturas do site de origem mostram a diferença produzida pela folha de estilos. O conteúdo continua sendo HTML nos dois casos. Não é necessário recriar toda essa página para aprender a primeira personalização.

Código completo para conferir

Este é o index.html da referência pronta. A pasta inicio começa sem os dois links CSS, que você adiciona durante a prática.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Caderno CSS | Curso de CSS</title>
  <link rel="stylesheet" href="simple.css">
<link rel="stylesheet" href="custom.css">
  
</head>
<body>
  <a class="pular" href="#conteudo">Pular para o conteúdo</a>
  <header>
    <h1>Caderno CSS</h1>
    <p>Pequenos passos para aprender CSS.</p>
    
  </header>
  <main id="conteudo" tabindex="-1">
    <h2>Meu ponto de partida</h2>
<p class="apresentacao">Um lugar para estudar uma coisa por vez.</p>
<p class="nota">Leia, mude uma coisa e confira o resultado.</p>

  </main>
  <footer>
    <p>Material fictício para estudo local.</p>
  </footer>
</body>
</html>

O arquivo custom.css completo também acompanha a referência. As regras de apoio de foco e do link de acesso serão explicadas no capítulo 10.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Faça o título aparecer sem inclinação, mantendo a folha pronta ativa.
2. Crie um erro no nome da referência a custom.css e descreva o que continua funcionando.
3. Explique a diferença entre editar um arquivo e recarregar sua página.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Use font-style: normal na regra h1 de custom.css. Não é necessário editar simple.css.

2. Um href errado impede carregar a personalização. A base continua ativa se seu próprio link estiver correto.

3. O editor modifica o arquivo no disco. Salvar grava a alteração; recarregar faz o navegador ler novamente os arquivos.

Quando seguir

Você consegue mudar o título, salvar, recarregar e recuperar um caminho de CSS escrito errado. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1

O arquivo completo

Referência do exemplo 01-primeira-pagina, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Caderno CSS | Curso de CSS</title>
  <link rel="stylesheet" href="simple.css">
<link rel="stylesheet" href="custom.css">
  
</head>
<body>
  <a class="pular" href="#conteudo">Pular para o conteúdo</a>
  <header>
    <h1>Caderno CSS</h1>
    <p>Pequenos passos para aprender CSS.</p>
    
  </header>
  <main id="conteudo" tabindex="-1">
    <h2>Meu ponto de partida</h2>
<p class="apresentacao">Um lugar para estudar uma coisa por vez.</p>
<p class="nota">Leia, mude uma coisa e confira o resultado.</p>

  </main>
  <footer>
    <p>Material fictício para estudo local.</p>
  </footer>
</body>
</html>

custom.css

/* Personalizações do Caderno CSS. Preserve simple.css. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pular {
  position: absolute;
  left: -10000px;
}
.pular:focus {
  position: static;
}

/* Capítulo 01 */
h1 { font-style: italic; }