Quando você cria conteúdo para a web, como o navegador sabe colocar um intervalo entre os parágrafos? Por falar nisso, como ele faz com que o fundo de uma página seja de uma cor e a barra de navegação de outra? HTML e CSS são a resposta.

 

Os navegadores lêem HTML, uma linguagem de marcação, para determinar o que aparece na página e onde. Já o CSS ou “folhas de estilo em cascata”, determina como o conteúdo aparece em todo o site. Ou seja, o HTML dirá ao navegador “este é um cabeçalho” e o CSS dirá “todos os cabeçalhos devem ser verdes”.

 

Como as páginas são construídas usando HTML?

 

HTML significa HyperText Markup Language. Diferente de uma linguagem de programação, que fornece um comando (por exemplo: quando os usuários clicarem no botão “Gostei”, uma imagem positiva aparece), as linguagens de marcação fornecem aos navegadores descrições de onde colocar os elementos e como eles devem ser. Por exemplo, se um navegador visualizar esse código HTML:

 

 <b> Faça esse texto negrito. </ b>

 

O <b> e </ b> informarão ao navegador que você está solicitando que as palavras apareçam em negrito, assim: Faça esse texto negrito.

 

Tags, elementos e atributos:

 

HTML é construído por tags, elementos e atributos. O <b> e </ b> acima são exemplos de tags. Cada tag é escrita dentro de colchetes angulares. Os navegadores sabem procurar dentro dos parênteses por instruções, sem exibir os parênteses e o texto entre parênteses.

 

Em geral, as tags vêm em pares: uma tag de abertura ou início permite que o navegador saiba “ei, faça essa ação para o texto a seguir” e a tag de fechamento ou final explica ao navegador: “Ok! Pare de fazer essa ação.” A barra (/) é usada apenas na tag de fechamento. Em conjunto, uma tag de abertura (por exemplo, <b>) e uma tag de fechamento (por exemplo, </ b>) formam um elemento.

 

Observe que não é tão surpreendente que as tags <b> e </ b> controlem o texto em negrito. Um dos aspectos interessantes do HTML é que é bastante fácil decifrar que <p> </ p> seria a tag que governa os parágrafos, e que <em> </ em> seria a tag dizendo ao navegador para colocar o texto em itálico, ou enfatizado.

 

Nem todas as tags vêm em pares: a tag <br>, que indica uma quebra de linha, e a tag <img>, que descreve as imagens, são dois exemplos de elementos que não possuem tags de fechamento. Elementos sem tag de fechamento são chamados de elementos HTML vazios. Se as tags juntas formarem um elemento, o próximo passo é um atributo, que fornece informações extras sobre um elemento. Os atributos aparecem somente na tag de abertura e são colocados entre aspas. Veja um exemplo de tudo isso trabalhando em conjunto:

 

<p align = “left”> Navegador, por favor, alinhe à esquerda este parágrafo. Obrigado! </ p>

 

Em conjunto, as duas tags <p> e </ p> são um elemento. Align = “left” é um atributo que diz ao navegador que queremos alinhar à esquerda.

 

Arquivos:

 

Cada página em um site é um arquivo HTML distinto e é salva como .html (em vez de, digamos, .txt ou .doc). Um site inteiro pode ter muitos, muitos arquivos HTML, com nomes como homepage.html, feedback.html, contact.html e assim por diante.

 

Por que o CSS é necessário?

 

Dado que o HTML existe e pode descrever todos os tipos de coisas, incluindo cor, tamanho, fonte, etc, por que precisamos de CSS? Ter uma folha de estilo é uma maneira de ter mais consistência de forma mais simples no site. Em vez de incluir manualmente o código para cada cabeçalho dizendo para exibi-lo em uma fonte serifada, em 24, em azul claro e em negrito, o CSS simplifica a questão.

 

Com o CSS é possível informar ao navegador que, sempre que vir o <h1> ou cabeçalho, por favor, faça com que o texto apareça com uma serif 24 com texto em negrito e azul.

 

Como usar o CSS?

 

CSS pode ser colocado em dois pontos diferentes dentro de um arquivo HTML. Quando colocado no cabeçalho, o CSS se aplica a toda a página, e quando colocado dentro de uma tag, o CSS dita o estilo para apenas aquela tag. Mas ainda mais comum do que esses dois métodos é um arquivo CSS externo, que controla a aparência de todo o site.

 

Essas folhas de estilo externas são salvas como arquivos .css (semelhante a como um arquivo HTML é salvo como .html). É aqui que o “C” em CSS se torna importante. Significa em cascata, o que significa que, teoricamente, um website pode ter todos os três canais em exibição, bem como a configuração padrão do navegador. Por exemplo, você pode ter definido em sua folha de estilo externa (que determina o estilo para todo o site) que todos os cabeçalhos são verdes. Mas quando você está codificando uma página diferente no site, coloque CSS no cabeçalho que diz que nesta página você quer que todos os cabeçalhos sejam azuis, para distingui-lo do resto do site.

 

Se houver uma seção muito importante da página e, para dar ênfase, você quer que o cabeçalho seja vermelho, é só inserir mais um CSS ali. O navegador entenderá a escolha da ordem de prioridade aqui, com a solicitação de estilo CSS mais específica e próxima ao código.

 

Seletores e declarações:

 

Os seletores em CSS são como você comunica ao navegador o elemento HTML que está sendo estilizado. Por exemplo, você pode ter um estilo para os cabeçalhos (<h1>), o corpo (<body>), parágrafos (<p>) e assim por diante. Declarações são onde você diz: aqui está o estilo que eu quero para o elemento HTML selecionado.

 

Cada declaração consiste em uma propriedade (pense: cor, tamanho, alinhamento de texto e qualquer outra opção de tipo de formatação) e um valor. O valor é como você deseja que a propriedade apareça na página. Se a propriedade fosse colorida, o valor poderia ser azul. Vamos ver como ficaria isso:

 

H1 {cor: azul; tamanho da fonte: 20; estilo de fonte: itálico; }

 

Tudo dentro das chaves é conhecido como um bloco de declaração. Cada declaração individual (tamanho da fonte: 20) termina em ponto e vírgula. O CSS pode parecer menos encantador que o HTML à primeira vista. Mas basta considerar ter que escrever todo o texto para cada cabeçalho em um site vasto.

 

Seria uma atividade exaustiva, especialmente se você considerar que algum dia você poderá redesenhar seu site, mudando todos os cabeçalhos de azul para verde. Atualmente, o CSS é amplamente usado e é raro um site que não possui uma folha de estilos externa. Quer colocar as mãos na codificação e aprender CSS e HTML? Nós temos uma aula para isso! No Programação para não programadores você aprende tudo do zero, com um monte de gente disposta a te ajudar. Vem conhecer 🙂

 

HTML e CSS: conceitos básicos para introdução em desenvolvimento front-end
Avalie esse post
Você pode também gostar