Exercício - Use conceitos CSS

  • 7 minutos

Você deseja começar a estilizar sua página da Web de currículo. Você começa selecionando a fonte e definindo tamanhos para os vários elementos que você usa na página.

Este módulo usa vscode.dev - uma versão baseada na Web do Visual Studio Code e CodeSwing. Essas ferramentas ajudam a agilizar o processo de desenvolvimento. Nenhuma instalação local é necessária para completar os exercícios que se seguem.

Criar um projeto

Você começa criando uma pasta, configurando suas ferramentas e criando um "swing" usando o CodeSwing em vscode.dev. Um swing exibirá automaticamente os resultados do seu código no vscode.dev. Usar o Microsoft Visual Studio Code com o CodeSwing permite que você faça modificações rapidamente com uma visualização das atualizações acontecendo em tempo real.

  1. Crie uma pasta na área de trabalho chamada resume.
  2. Abra vscode.dev.
  3. Selecione Abrir pasta.
  4. Navegue até a pasta de currículo criada anteriormente e selecione Selecionar pasta.
  5. Quando solicitado a Permitir que o site visualize arquivos, selecione Exibir arquivos.
  6. Selecione o botão Extensões .

    Captura de tela do botão de extensões do Visual Studio.

  7. Na caixa de texto Extensões de Pesquisa no Marketplace , digite CodeSwing.
  8. Selecione Instalar para instalar o CodeSwing.
  9. Abra a Paleta de Comandos selecionando Ctrl+Shift+P ou Cmd-Shift-P num Mac.
  10. Digite CodeSwing na Paleta de Comandos e selecione CodeSwing: New Swing no Diretório.
  11. Selecione Selecionar pasta para usar o diretório atual (que é aquele que você criou em uma etapa anterior).
  12. Selecione Básico: HTML/CSS/JavaScript.
  13. Se solicitado a Salvar alterações para retomar, selecione Salvar alterações.
  14. Selecione o x ao lado script.js dentro vscode.dev para fechar o arquivo JavaScript, pois você não usa esse arquivo durante o exercício.

O Visual Studio Code cria duas seções lado a lado. A esquerda serão seus editores, onde você pode inserir seu HTML e CSS. O direito se comporta como um navegador, exibindo os resultados do seu código.

Criar o HTML

Você usa HTML existente para nos permitir focar apenas no CSS. O HTML inclui o link elemento para fazer referência ao arquivo CSS.

  • Copie o seguinte HTML para a janela intitulada index.html:

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Your Name</h1>
        <a href="mailto:your-email@example.com">your-email@example.com</a>

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

        <h2>Education</h2>
        <h3>School name</h3>
        <h4>Major</h4>
        <ul>
            <li>GPA: 4.0</li>
            <li>Years attended</li>
        </ul>

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

Definir tipo e tamanho de fonte

Por padrão, a maioria dos navegadores usa uma fonte serifa como Times New Roman. Você deseja definir o padrão da página para uma fonte mais popular. Além disso, você deseja definir o tamanho da fonte para a página e vários cabeçalhos.

  1. Dentro do arquivo intitulado style.css, adicione o seguinte CSS para definir a família de fontes como Verdana com opções de fallback e o tamanho da fonte para 12 pixels no html elemento:

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    Você está usando o html elemento para atualizar a fonte raiz e o dimensionamento. Com o html elemento permite que você use rem dimensionamento.

  2. Observe que a página é atualizada automaticamente com as alterações.

  3. Adicione o seguinte código CSS ao final do style.css para definir os tamanhos para h1 o .h4

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem é baseado no tamanho da raiz, que é de 14 pixels. Como exemplo, este CSS define o tamanho de h1 22,4 pixels.

  4. A página é atualizada automaticamente no vscode.dev.

  5. Deixe a janela aberta, pois você a usará no próximo exercício.

Resultado e próximas etapas

A captura de tela a seguir é o resultado do CSS aplicado neste exercício. Se você deseja experimentar diferentes fontes e tamanhos, você pode modificar o CSS como desejar.

Captura de tela da página final conforme renderizada no navegador.