Advertisement

Aula 03 - Adicionando estilos com CSS


1- Introdução


O mundo HTML é interessante, no entanto, ele é inteiramente estrutural. Ou seja, ao utilizar o HTML temos pouquissimas 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.


2- 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>


3- 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;
}


4- 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-sizeDefine 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;
 heightDefine a altura de um elemento. Exemplo:

height: 50px;
 border: Define bordas para um elemento. Exemplo:

border:1px solid #CCC;
border-bottom:5px solid #97B2B9;
 backgroundDefine 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:

Nenhum comentário

Conta pra mim sua opinião!

Fale comigo