[Projeto] Lista de exercícios | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Criando e linkando o arquivo CSS Você vai criar um arquivo CSS chamado style.css para estilizar uma página web. Após criar o arquivo, seu objetivo é linkar esse arquivo CSS ao HTML. Para isso, você usará a tag dentro do

do documento HTML, especificando o caminho do arquivo CSS. Este processo é crucial para que os estilos definidos no CSS sejam aplicados à página HTML.

Definindo estilos básicos No arquivo CSS, defina a cor de fundo do corpo da página (

) para indigo (indigo) e a cor do texto para branco (white). Salve as alterações e verifique no navegador se o fundo da página está na cor indigo (entre o violeta e o azul) e o texto branco.

body { background-color: indigo; color: white;

}

Estilizando com cores e formatos Você recebeu o desafio de dar vida a uma página web que atualmente tem apenas HTML. Sua tarefa é utilizar CSS para adicionar cores e formatos aos elementos da página, inspirando-se em um design específico fornecido no Figma. Foque em selecionar cores adequadas para os fundos, textos e bordas, além de aplicar estilos aos botões e cabeçalhos para torná-los visualmente atraentes. Você pode usar como referência essa tabela de nomes de cores.

body { background-color: #f0f0f0; }

h1 { color: #333333; }

button { background-color: green; color: white; }

Personalizando a página com CSS Imagine que você está trabalhando em um projeto web e chegou o momento de dar vida à sua página com cores, formas e estilos. Sua tarefa é criar um arquivo CSS para estilizar uma página HTML simples, a qual contém um cabeçalho, um parágrafo e um rodapé. Use seu conhecimento para definir as cores do texto e do fundo.

header { background-color: darkblue; color: white; }

p {
```
color: gray;
```
}

footer { background-color: red; color: white; }
Aplicando estilos com CSS Agora, vamos um pouco além. Você precisa criar três arquivos CSS diferentes, cada um com um estilo único, para o mesmo arquivo HTML. Isso demonstrará como o CSS pode drasticamente mudar a aparência de uma página sem alterar o HTML. Crie estilos variados para os elementos da página - um arquivo com um estilo formal e elegante, outro com um estilo colorido e divertido, e um terceiro com um visual minimalista e limpo. Formal e elegante: body { background-color: white; color: black; }

Colorido e divertido: body { background-color: purple; color: pink; }

Minimalista e limpo: body { background-color: darkgray; color: white; }

Personalizando Links A última tarefa é estilizar os links na página. Você deverá modificar a aparência dos links para que se destaquem do fundo e do texto. Utilize as propriedades CSS, como color para personalizá-los, seguindo as diretrizes do design fornecido no Figma.

a { color: DodgerPink;

}

Para conectar um arquivo CSS a uma página HTML e aplicar os estilos desejados, você precisa seguir alguns passos. Aqui está um guia passo a passo para ajudar você:

1. Criando e Linkando o Arquivo CSS

Primeiro, crie um arquivo chamado style.css. Este arquivo conterá todos os estilos CSS que você deseja aplicar à sua página HTML.

Linkar o arquivo CSS ao HTML: Inclua a seguinte tag dentro do <head> do seu documento HTML:

<link rel="stylesheet" type="text/css" href="style.css">

Essa tag irá vincular o arquivo CSS ao documento HTML, permitindo que os estilos sejam aplicados.

2. Definindo Estilos Básicos

No arquivo style.css, você pode começar definindo estilos básicos para o corpo da página:

body {
        background-color: indigo;
        color: white;
}

Salve o arquivo e abra sua página HTML no navegador para verificar se o fundo está na cor indigo e o texto em branco.

3. Estilizando com Cores e Formatos

Agora, para um design mais detalhado, você pode definir cores e formatos adicionais. Por exemplo:

body {
        background-color: #f0f0f0;
}

h1 {
        color: #333333;
}

button {
        background-color: green;
        color: white;
}

4. Personalizando a Página com CSS

Se sua página HTML contém um cabeçalho, um parágrafo e um rodapé, você pode aplicar estilos específicos para cada um:

header {
        background-color: darkblue;
        color: white;
}

p {
        color: gray;
}

footer {
        background-color: red;
        color: white;
}

5. Aplicando Estilos com CSS

Para criar múltiplos temas com arquivos CSS diferentes para o mesmo HTML:

Formal e elegante:
```
body {
```
```
      background-color: white;
```
```
            color: black;
```
```
              }
```
```
                ```
```
Colorido e divertido:
```
body {
```
```
      background-color: purple;
```
```
            color: pink;
```
```
              }
```
```
                ```
```
Minimalista e limpo:
```
body {
```
```
      background-color: darkgray;
```
```
            color: white;
```
```
              }
```
```
                ```
```

6. Personalizando Links

Para estilizar os links de maneira que se destaquem, você pode usar:

a {
        color: DodgerPink;
}

Certifique-se de revisar todos os estilos no navegador para garantir que tudo está sendo aplicado como esperado. Ajustes podem ser necessários dependendo do resultado visual e da compatibilidade entre navegadores.