Ciencias
1078 palavras
5 páginas
HTML com CSSEstilizando com CSS
Quando escrevemos o HTML, marcamos o conteúdo da página com tags que melhor representam o significado daquele conteúdo.
Aí quando abrimos a página no navegador é possível perceber que o navegador mostra as informações com estilos diferentes.
Mas, claro, pra fazer sites bonitões vamos querer customizar o design dos elementos da página.
Antigamente, isso era feito no próprio HTML. Se quisesse um título em vermelho, era só fazer:
Mirror Fashion anos 90
Estilizando com CSS
Tags HTML para estilo são má prática hoje em dia e jamais devem ser usadas.
Em seu lugar, surgiu o CSS, que é uma outra linguagem, separada do HTML, com objetivo único de cuidar da estilização da página.
Escrever formatação visual misturado com conteúdo de texto no HTML se mostrou algo bem impraticável.
O CSS resolve isso separando as coisas; regras de estilo não aparecem mais no
HTML, apenas no CSS.
Sintaxe e inclusão de CSS
A sintaxe do CSS tem estrutura simples:
é uma declaração de propriedades e valores separados por um sinal de dois pontos
“:”
e cada propriedade é separada por um sinal de ponto e vírgula “;” da seguinte maneira: background-color: yellow; color: blue;
Essas propriedades podem ser declaradas de três maneiras diferentes.
Atributo style
O conteúdo desta tag será exibido em azul com fundo amarelo no navegador!
Como estamos declarando as propriedades visuais de um elemento em outro lugar do nosso documento, precisamos indicar de alguma maneira a qual elemento nos referimos.
Fazemos isso utilizando um seletor CSS
É basicamente uma forma de buscar certos elementos dentro da página que receberão as regras visuais que queremos.
No exemplo a seguir, usaremos o seletor que pega todas as tags p e altera sua cor e background:
Sobre a Mirror Fashion p { background-color: yellow; color: blue; }