Introdução
A tag HTML <style> é usada para adicionar estilos às suas páginas web. Estes estilos podem alterar a aparência e o comportamento do seu website de várias maneiras. Neste laboratório, você aprenderá como usar a tag <style> para criar uma folha de estilo personalizada que pode ser usada em toda a sua página web.
Nota: Você pode praticar a codificação em
index.htmle aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
Configurando a Estrutura HTML
Primeiramente, vamos configurar a estrutura HTML básica. No seu arquivo index.html, crie o seguinte código HTML:
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my Webpage</h1>
<p>This is my first paragraph.</p>
</body>
</html>
Este código configura uma estrutura básica de página web com um cabeçalho e um parágrafo.
Adicionando Estilos Inline
A primeira maneira de adicionar estilos à sua página web é adicioná-los diretamente ao atributo style do elemento HTML. Nesta etapa, adicionaremos um estilo inline ao cabeçalho h1. Adicione os seguintes atributos ao elemento h1:
<h1 style="color: blue; font-size: 36px;">Welcome to my Webpage</h1>
Este estilo aumentará o tamanho da fonte e mudará a cor do cabeçalho para azul.
Adicionando Estilos Embutidos
A tag <style> é usada para adicionar estilos embutidos à sua página web. Você pode adicionar múltiplos estilos dentro desta tag. Nesta etapa, usaremos um estilo embutido para adicionar estilos ao elemento p. Dentro da tag <head>, adicione o seguinte código:
<style>
p {
color: green;
font-size: 18px;
}
</style>
Este estilo adiciona uma cor verde ao parágrafo, e o tamanho da fonte é reduzido para 18px.
Usando Classes CSS
Classes CSS são usadas para aplicar estilos a múltiplos elementos de uma só vez. Nesta etapa, criaremos uma classe para uma mensagem de aviso genérica que pode ser reutilizada em toda a nossa página web. Adicione este código à tag <style>:
<style>
.warning {
color: red;
background-color: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
Este código cria um estilo para uma mensagem de aviso que inclui uma cor de fundo amarela, borda preta e cor de texto vermelha.
Em seguida, aplicaremos esta classe ao cabeçalho h1. Modifique seu elemento h1 para incluir a classe:
<h1 class="warning">Welcome to my Webpage</h1>
Esta etapa adiciona um estilo de aviso ao cabeçalho.
Adicionando Folhas de Estilo Externas
Folhas de estilo externas são usadas para separar a folha de estilo do conteúdo HTML. Nesta etapa, você criará uma folha de estilo externa que pode ser reutilizada em várias páginas web.
Crie um novo arquivo chamado style.css. Em style.css, adicione o seguinte código:
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.warning {
background-color: green;
}
Este código define estilos para os elementos h1 e p, e altera a classe warning para ter uma cor de fundo verde.
Para vincular esta folha de estilo externa à sua página index.html, adicione o seguinte código à tag <head>:
<link rel="stylesheet" type="text/css" href="style.css" />
Esta linha vincula o arquivo style.css à página index.html.
Adicionando Media Queries
Media queries são usadas para aplicar diferentes estilos a diferentes tamanhos de dispositivos. Nesta etapa, usaremos media queries para ajustar o tamanho da fonte de nossos elementos. Adicione este código ao arquivo style.css:
@media (max-width: 600px) {
h1 {
font-size: 36px;
}
p {
font-size: 18px;
}
}
Este código ajusta o tamanho da fonte h1 para 36px e o tamanho da fonte p para 18px para tamanhos de tela menores ou iguais a 600px de largura.
Adicionando Seletores e Nesting
Nesta etapa, introduziremos seletores e aninhamento (nesting), dois conceitos avançados de CSS.
Crie um novo arquivo chamado advanced.css. Em advanced.css, adicione o seguinte código:
header h1 {
color: blue;
font-style: italic;
}
main p {
color: red;
}
Este código seleciona o elemento h1 dentro do elemento header e aplica uma cor azul e um estilo de fonte itálico. Ele também seleciona o elemento p dentro do elemento main e aplica uma cor vermelha.
Para vincular esta folha de estilo externa à sua página index.html, adicione o seguinte código à tag <head>:
<link rel="stylesheet" type="text/css" href="advanced.css" />
Esta linha vincula o arquivo advanced.css à página index.html.
Resumo
Neste laboratório, você aprendeu como usar vários métodos para adicionar estilos à sua página web. Você começou usando estilos inline e estilos embutidos, depois passou para classes CSS e folhas de estilo externas. Você também aprendeu sobre media queries, seletores e aninhamento (nesting). Usando esses métodos, você pode criar uma folha de estilo personalizada que pode ser usada em toda a sua página web e criar um website moderno e responsivo.
