O mundo HTML é interessante, no entanto, ele é inteiramente estrutural, ou seja, ao utilizar o HTML temos pouquíssimas opções de como estilizar a página adicionando cores, bordas, espaçamentos, etc. Para suprir esta necessidade de controlar os estilos de uma página web foi criado o CSS (Cascading Style Sheets). Combinando o HTML com o CSS os designers descobriram uma forma muito eficiente de dar as páginas a beleza que elas mereciam. Nessa aula iremos entender um pouco como utilizar o CSS.
Aqui no CSM nós adoramos postar conteúdo sobre desenvolvimento web. Quer saber mais? acesse aqui.
Primeiros passos com CSS
A primeira coisa que devemos entender é que o CSS é um tipo de “configuração” que o navegador aplica a página web. Sendo assim, ao utiliza-lo precisamos especificar ao navegador qual página e quais elementos vamos querer estilizar. Portanto, existem 3 formas de adicionar CSS a uma página html:
a) INLINE – O estilo adicionado inline é colocado diretamente dentro do elemento html através do atributo style. Essa forma de adicionar estilo ao elemento é a que possui maior prioridade dentre todas as outras. Veja o exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Primeira página</title>
</head>
<body>
<div style="font-size:50px"> eu sou uma div estilizada</div>
</body>
</html>b) Via tag style – É possível ainda estilizar um elemento criando uma tag dentro do html chamada <style></style>. Dentro desta tag você poderá inserir código CSS e eles irão ser aplicados a página. Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Primeira página</title>
</head>
<body>
<div id="elemento"> eu sou uma div estilizada</div>
<style type="text/css">
#elemento{
font-size:50px;
}
</style>
</body>
</html>c) Via arquivo externo – Por fim, a ultima forma de inserir CSS em uma página HTML é utilizar um arquivo com a extensão .css. É importante lembrar que para inserir os estilos na pagina html é necessário adicionar o arquivo no <head></head> da página. Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Primeira página</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="elemento"> eu sou uma div estilizada</div>
</body>
</html>Seletores CSS
Para utilizar o CSS de forma eficiente devemos saber como reaproveitar código e escrever o mínimo possível de configurações repetidas. Para indicar ao navegador qual elemento deve ser estilizado são utilizados os seletores.
Selecionando usando o elemento html
Podemos indicar para o navegador para aplicar o estilo em todos elementos do html. por exemplo:
a {
color:red;
}Esta sintaxe é válida pra qualquer elemento do HTML. Mas CUIDADO, aplicar uma configuração a um elemento nem sempre é uma boa ideia.
Selecionando via ID
A segunda forma de indicarmos ao navegador qual elemento selecionar é utilizar um id. veja um exemplo.
<body id="corpo">
<div id="elemento"> eu sou uma div estilizada</div>
</body>neste caso dois elementos possuem ids, podemos seleciona-los no CSS da seguinte maneira:
#corpo{
paddind:20px;
}
#elemento{
font-size:50px;
}O problema do uso do ID é que ele deve ser único em uma página. Você nunca poderá colocar dois IDs iguais.
Selecionando utilizando classes
As classes são a forma mais comum de aplicar CSS a uma página. Uma classe é definida pelo usuário e você pode aplica-la quantas vezes for necessário. Veja um exemplo:
<body>
<div class="minhaclasse"> eu sou uma div estilizada</div>
</body>No arquivo CSS escreveriamos da seguinte forma para estilizar:
.minhaclasse{
font-size:50px;
}Principais propriedades CSS
font-family: Define a família da fonte utilizada. Exemplos:
font-family: Arial, Verdana, Geneva, sans-serif;
font-family: Georgia, "Times New Roman", Times, serif;font-style: Define a propriedades de estilos que podem ser: normal, italic ou oblique. Exemplos:
font-style: italic;
font-style: normal;font-weight : Define a propriedade de intensidade de uma fonte na sequência de valores de ‘100’ a ‘900’, cada número indica uma fonte mais intensa (escura) que o valor anterior. Exemplos: font-weight: normal; (ou valores de 100 a 500)
font-weight: bold; (ou valores de 600 a 900)font-size: Define o tamanho da fonte.
Exemplo:
font-size: 12pt;letter-spacing: Controla o espaçamento entre as letras de um texto. Exemplo:
letter-spacing: 5px;word-spacing: Controla o espaçamento entre as palavras de um texto. Exemplo:
word-spacing: 10px;
line-height: Controla a altura entre as linhas do texto de um paragrafo. Exemplo:
line-height: 25px;text-align: Controla o posicionamento horizontal do conteúdo de um elemento. Os valores possíveis são: left, right, center e justify. Exemplo:
text-align: center;text-decoration: Define um efeito decorativo no texto. Podendo entre eles ser: none (sem decoração); underline (sublinhado); line-through(linha cortando o texto); e blink (efeito piscante). Exemplo:
text-decoration: underline;text-transform: Controla os efeitos de capitalização do texto. Com ela, podemos definir a caixa das letras (minúsculas e maiusculas). Os valores possíveis são:
- capitalize – transforma o primeiro caracter de cada palavra em maiúscula
- uppercase – transforma todas as letras de todas as palavras em maiúsculas
- lowercase – transforma todas as letras de todas as palavras em minúsculas
- none – cancela algum valor que tenha sido herdado
text-transform: uppercase; text-indent: Define o tamanho da endentação para a primeira linha do texto contida em um bloco, ou seja, o deslocamento para a direita de um paragrafo. Exemplo:
text-indent: 20px;color: Define a cor do texto de um texto.
Exemplos:
color: red;
color: rgb(255,0,0);
color: #FF0000;font: Propriedade para definir em um único local vários estilos para a fonte. A sintaxe geral para font: [style] [variant] [weight] [size] [/line-height] [family].
Exemplo:
font: normal small-caps bold 14px "Comic Sans MS", sans-serif;Nota: Os valores size e family são obrigatórios. Os demais são facultativos (se você os omitir será adotado o valor default ou herdado do elemento pai).
width: Define o comprimento (largura) de um elemento.
Exemplo:
width: 100px;height: Define a altura de um elemento.
Exemplo:
height: 50px;border: Define bordas para um elemento.
Exemplo:
border:1px solid #CCC;
border-bottom:5px solid #97B2B9;background: Define as propriedades relacionadas ao fundo de exibição.
Exemplo:
background:url("images/fundo-topo.png") no-repeat;margin: Controla as margens de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens. margin: 15px;
margin: 10px 1px 5px 20px; A última atribuição do exemplo acima é equivalente a:
margin-top: 10px;
margin-right: 1px;
margin-bottom: 5px;
margin-left: 20px;padding: Controla os espaçamentos de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, aos espaçamentos superior, direito, inferior e esquerdo. Se for fornecido apenas um valor, ele é aplicado aos quatro espaçamentos. padding: 5px;
padding: 10px 5px 5px 10px;float: Esta regra faz com que o box seja retirado de sua posição no fluxo do documento e flutuado para a direita ou esquerda. O espaço original ocupado pelo box não será deixado livre, mas preenchido pelo elemento que segue no fluxo do documento.
Exemplo:
float: left;float: right;
Se você quer saber mais sobre esse assunto.
Acesse este link e confira um tutorial mais detalhado: https://www.chiefofdesign.com.br/css/
