O HTML precisa do queridinho CSS para dar vida no seu glamour.
CSS vem de Cascating Style Sheets, traduzindo, Folhas de estilos em Cascata. Digamos que o HTML é o responsável somente pela estrutura da página e o CSS para dar o seu brilho em design nas páginas HTML.
Local e onde escrever o código
Existe três locais onde podemos incluir o código CSS. São eles: Externo, Incorporado e Inline.
CSS Externo
Esse é é um arquivo separado salvo com um nome e extensão .css. É usado com mais propriedade para um site onde todas as páginas html puxam esse arquivo. Em todas as páginas é incluído o link com o caminho do CSS dentro da tag head. Exemplo:
<head>
<link rel="stylesheet" href="style.css">
</head>CSS Incorporado
Este tipo de CSS é usado dentro da mesma página onde o HTML é codificado dentro da tag <style>. Exemplo:
<style>
seletor {
propriedade:valor;
propriedade:valor;
propriedade:valor;
}
</style>A tag style incluimos dentro da tag head no HTML. Este tipo de estilo formata somente a página atual.
CSS Inline
O inline é usado na mesma linha da tag com o atributo style, formatando apenas a tag que está recebendo o estilo. Exemplo:
<h1 style="font-size:18px;color:blue">Título da página</h1>Repare que a tag h1 possui um atributo com o nome style e no seu valor as propriedades CSS separado por ponto e vírgula (;).
Este é um tipo de CSS menos usado hoje em dia, mas podemos usá-lo para fazer testes rápidos.
Como começar
Para começar, o CSS na escrita é diferente do HTML, vejamos:
selector{ propriedade: valor; propriedade: valor}ou
seletor{
propriedade: valor;
propriedade: valor
}O seletor é o elemento que vai receber as informações de estilos para a formatação. Esse seletor pode ser uma tag, uma class ou um id.
As propriedades são as formatações com os seus valores. Vejamos um exemplo:
h1 {
font-size: 28px;
color: red;
}Acima estou informando que todas tags h1 recebará a seguinte formatação:
- tamanho de fonte: 28px
- cor: vermelha
Gostou do Post ou ficou com alguma dúvida? Deixe o seu comentário abaixo. Obrigado!
+ Seja o primeiro a comentar
Add yours