Estilizar com HTML CSS

Neste artigo, veremos mais de perto HTML CSS , o que eles fazem e como trabalham juntos para dar vida às suas páginas da web.

HTML e CSS são duas das principais tecnologias para a construção de páginas da web.

Juntos, eles formam a espinha dorsal da web moderna, fornecendo aos desenvolvedores as ferramentas para criar sites dinâmicos, interativos e visualmente atraentes.

CSS ou Cascading Style Sheets são usados ​​em HTML .

A linguagem CSS economiza muito tempo e esforço. Várias páginas da web podem ser apresentadas simultaneamente com ele.

CSS = Estilos e Cores

Usando Texto M A N U P L A T I O N

Cores,
Caixas

Índice-

CS: O que é?

Cascading Style Sheets (CSS) é uma linguagem usada para formatar o layout de uma página da web.

Usando CSS, você pode alterar muitos aspectos do design do seu site, incluindo cor, fonte, tamanho da fonte, espaçamento entre os elementos, como os elementos são posicionados e dispostos, quais imagens de fundo ou cores de fundo devem ser usadas, como os elementos serão exibir em diferentes dispositivos e tamanhos de tela, e isso é apenas o começo.

O estilo de um elemento será propagado para todos os seus filhos quando for aplicado ao seu elemento pai. Por exemplo, se você definir a cor do corpo do texto como “azul”, todos os títulos, parágrafos e outros elementos de texto no corpo também terão a mesma cor (a menos que você especifique o contrário).

Aqui está uma folha de estilo simples

Para ilustrar HTML CSS , aplicamos uma folha de estilo muito simples a um documento da seguinte maneira:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test page</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph with blue color</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Vários estilos

Observe como, neste exemplo de HTML CSS , as declarações conflitantes no elemento <style> a seguir substituem as do elemento anterior, se tiverem a mesma precisão.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test page</title>
<style>
p {
color: blue;
background-color: red;
padding: 8px;
border: 2px solid;
}
</style>
<style>
p {
color: purple;
background-color: white;
}
</style>
</head>
<body>
<p>This is a paragraph with multiply styles applied on it.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Fazendo uso de CSS

Existem três maneiras de adicionar CSS a documentos HTML:

  • Interno – Inserindo um elemento <style> na seção <head>

  • Externo – Insira um elemento para vincular a um arquivo CSS externo<link>

  • Inline – usando um atributo de estilo dentro de um elemento HTML

É mais comum manter estilos CSS em arquivos externos. No entanto, é nossa intenção usar estilos internos e embutidos neste tutorial. Isso nos permitirá demonstrar como usá-los com mais facilidade e fazer com que você possa experimentá-los com mais facilidade.

CSS embutido

Quando uma folha de estilo CSS inline é usada, ela é usada para aplicar uma folha de estilo exclusiva a apenas um elemento de um documento HTML.

CSS embutido é usado em elementos HTML usando o atributo style.

Este exemplo define a cor de texto verde do elemento < h1 > para laranja e a cor de texto vermelha do elemento <p> :

Example

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;">This is green color H1 Heading</h1>
<p style="color:orange;">This is orange color paragraph.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS interno

Um arquivo CSS interno é usado para uma única página HTML.

O CSS interno é definido na seção “ head ” de uma página HTML, dentro de um elemento “style”.

Como você pode ver no exemplo a seguir, a cor do texto de TODOS os elementos h1 (naquela página) é verde e a cor do texto de TODOS os elementos <p> é vermelha .

Um fundo verde claro também será exibido na página.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powdergreen;}
h1 {color: green;}
p {color: red;}
</style>
</head>
<body><h1>This is a just H1 tag heading</h1>
<p>This is just a paragraph.</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS externo

O estilo de muitas páginas HTML é definido por uma folha de estilo externa.

A seção de cabeçalho de cada página HTML deve conter um link para a folha de estilo externa:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body><h1>This is a H1 heading</h1>
<p>This is just a paragraph.</p></body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Qualquer editor de texto pode ser usado para escrever a folha de estilo externa. Você deve salvar o arquivo como um arquivo .css sem nenhum código HTML.

Um exemplo de “styles.css” pode ser encontrado aqui:

“estilos.css”:
corpo {
cor de fundo : verde claro ;
}
h1 {
cor : preto ;
}
p {
cor : rosa ;
}
Dica: Altere um arquivo para alterar toda a aparência de um site inteiro!

Esquema de cores CSS, fontes e tamanhos

Nosso objetivo aqui é demonstrar algumas propriedades CSS que são comumente usadas. Vamos discuti-los com mais detalhes posteriormente.

O CSScolor property specifies the color of the text.

O CSSfont-family property specifies which font to use.

O CSSfont-size property determines what font size to use.

Exemplo: Como usar as propriedades color, font-family e font-size em CSS.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: green; font-family: verdana; font-size: 420%; } p { color: blue; font-family: courier; font-size: 180%; }
</style>
</head>
<body>
<h1>This is a H1 heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Borda CSS

Os elementos HTML são cercados por bordas definidas pela borda CSS.

Para quase todos os elementos HTML , você pode definir uma borda.

A propriedade border do CSS pode ser usada das seguintes maneiras:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
p { border: 3px solid green; }
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Preenchimento CSS

O preenchimento de texto e borda é definido pela propriedade CSS padding.

Aqui está um exemplo de como as propriedades CSS border e padding podem ser usadas:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
p { border: 4px solid powderorange; padding: 35px; }
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Margem CSS

As margens CSS definem quanto espaço deve ser deixado fora das bordas.

O exemplo a seguir ilustra o uso das propriedades de borda e margem do CSS:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
p { border: 3px solid powdergreen; margin: 40px; }
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Decoração de Texto CSS

A decoração de texto CSS define a decoração do texto de como ele deve ser exibido.

O exemplo a seguir ilustra o uso de propriedades de decoração de texto CSS:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: underline;
}
p{
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>This is a just H1 tag heading</h1>
<p>This is just a paragraph.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Você pode fazer referência a uma folha de estilo externa com seu URL completo ou um caminho relativo à página da Web atual.

Um exemplo de link para uma folha de estilo com um URL completo é o seguinte:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html><body><br>
<br><br>
<link rel="stylesheet" href="/html/styles.css"><br>
<br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo a seguir mostra como conectar um arquivo externo Css a um documento HTML:

Example: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html><body><br>
<br>
<br>
<link rel="stylesheet" href="styles.css"><br>
<br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Resumo do capítulo

  • Utilize o atributo HTML stylepara estilo embutido.
  • Utilize o elemento HTML para especificar o CSS interno.<style>
  • Utilize o elemento HTML para guiar para um arquivo CSS externo.<link>
  • Utilize o elemento HTML para armazenar os elementos <style> e <link>.<head>
  • U tilize a propriedade CSS colorpara cores de texto.
  • U tilize a propriedade CSS font-familypara fontes de texto.
  • U tilize a propriedade CSS font-sizepara tamanhos de texto.
  • U tilize a propriedade CSS borderpara bordas.
  • U tilize a propriedade CSS paddingpara o espaço dentro da borda.
  • U tilize a propriedade CSS marginpara o espaço fora da borda.
  • U tilize a propriedade CSS text-decorationpara decorar o texto.

Dica: O Tutorial CSS contém muito mais informações sobre CSS.

Etiquetas de Estilo HTML

Marcação Visão geral
<estilo> Especifica a declaração de estilo para um documento HTML
<link> Descreve um link entre um documento e um recurso externo

Visite nossa referência de tags HTML para ver uma lista de todas as tags HTML disponíveis.

Vantagens de usar Style com HTML CSS

O CSS oferece vários benefícios quando se trata de estilizar páginas da Web em HTML:

  • Separação de interesses: o CSS permite separar o conteúdo e a estrutura da sua página da Web (definida em HTML) de sua apresentação visual (definida em CSS). Desta forma, você pode manter e atualizar seu código com mais facilidade, já que mudanças em um aspecto não afetam necessariamente os outros.
  • Consistência e reutilização: CSS define estilos que são aplicados consistentemente em várias páginas da web, tornando mais fácil para o seu site manter uma aparência consistente. Além disso, você pode reutilizar estilos para elementos semelhantes em páginas diferentes, resultando em menos código.
  • Flexibilidade e controle: o CSS oferece controle refinado sobre a apresentação visual do seu site. A criação de designs exclusivos e personalizados é facilitada pelo ajuste de tamanho, posição, cor e outras propriedades visuais de elementos individuais.
  • Acessibilidade: CSS simplifica o processo de criação de páginas da Web acessíveis, separando o conteúdo da apresentação. Usando CSS, você pode ajustar o tamanho e o espaçamento da fonte para melhorar a legibilidade ou definir esquemas de cores de alto contraste.
  • Tempos de carregamento mais rápidos: o CSS permite que você defina a apresentação visual de sua página da Web globalmente, reduzindo a quantidade de código necessária. Como resultado, os tempos de carregamento podem ser reduzidos e o desempenho pode ser melhorado, especialmente em dispositivos móveis com conexões de internet mais lentas.

Conclusão:

Como desenvolvedor da Web, você e outras pessoas podem se beneficiar dos benefícios do CSS ao estilizar páginas HTML. O uso de CSS permite separar o conteúdo da apresentação, permitindo que você crie suas páginas da Web com maior flexibilidade, controle e consistência.

Além disso, o CSS pode acelerar o tempo de carregamento, melhorar a acessibilidade e simplificar a manutenção e atualização. É possível criar páginas da Web visualmente impressionantes, responsivas e acessíveis, otimizadas para desempenho em vários dispositivos e plataformas quando você domina o HTML e o CSS.

Se este artigo atendeu às suas necessidades educacionais, compartilhe este conteúdo com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.