Seu Primeiro Laboratório de CSS: Dominando o Básico

Introdução

🧑‍💻 Novo no Linux ou no LabEx? Recomendamos começar com o curso Quick Start with Linux.

Olá, bem-vindo ao LabEx! Neste primeiro laboratório, você aprenderá o clássico programa "Hello, World!" em CSS.

Clique no botão Continuar abaixo para iniciar o laboratório.

Olá CSS

Já criamos o arquivo index.html no WebIDE. Vamos abri-lo e adicionar algum código HTML.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
  </body>
</html>

Em seguida, clique no botão Go Live no canto inferior direito, isso executará um servidor web local na porta 8080.

Agora, você pode mudar para a aba Web 8080 e clicar no botão de atualização para ver as alterações.

Adicionar CSS

Vamos adicionar algum código CSS ao arquivo index.html.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello HTML</h1>
  </body>
</html>

Mude para a aba Web 8080 e clique no botão de atualização para ver as alterações.

Usando CSS Externo

Já criamos o arquivo style.css no WebIDE. Vamos abri-lo e adicionar algum código CSS.

h1 {
  color: red;
}

p {
  color: blue;
}

Em seguida, altere o arquivo index.html para usar o arquivo CSS externo.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Mude para a aba Web 8080 e clique no botão de atualização para ver as alterações.

Resumo

Parabéns! Você concluiu seu primeiro laboratório LabEx.

Se você quiser saber mais sobre o LabEx e como usá-lo, pode visitar nosso Centro de Suporte. Ou você pode assistir ao vídeo para aprender mais sobre o LabEx.

Programar é uma longa jornada, mas o Próximo Laboratório está a apenas um clique de distância. Vamos nessa!