Introdução ao CSS

Introdução ao CSS

O CSS (Cascading Style Sheets) é uma linguagem de estilo usada em conjunto com uma linguagem de marcação (como o HTML ou XML) para a formatação do conteúdo de uma página, podendo definir cores, formatos de fonte, layouts, entre outros. Com ela você pode separar a formatação e o conteúdo, o que é um benefício caso você queira usar os mesmos estilos em várias páginas.

O CSS tem uma sintaxe fácil de ser entendida, contendo séries de palavras em inglês para especificar os diferentes estilos disponíveis.

ID e Classe

Para começar, você deve aprender um dos conceitos básicos do CSS: os seletores ID (representada pelo símbolo “#”) e Classe (representada pelo símbolo “.”). A ID é usada para especificar o estilo de um único elemento, enquanto a Classe é usada para especificar o estilo de um grupo de elementos, ou seja, você pode repetir o uso da mesma classe nos elementos.

Exemplo do uso da ID:

Exemplo de uso da Classe:

Corpo da Página (Body)

Você pode definir o estilo da página usando o seletor body. Essas definições se aplicarão em toda a página, exceto nos elementos em que você definir estilos próprios. Veja um exemplo abaixo de uma página com a cor de fundo (background-color), cor da fonte (color), tamanho da fonte (font-size) e as margens (margin-top, margin-bottom, margin-left, margin-right) definidas:

A aparência da página seria como na imagem:

Exemplo de código

Inserção de imagem como plano de fundo

As propriedades background para a inserção de imagens como plano de fundo são:

  • background-image: coloque a URL da imagem que será exibida (para facilitar, deixe a imagem na mesma pasta da página).
  • background-attachment: se ela for fixa na tela, escolha fixed, se ela for rolar junto com a página, escolha scroll.
  • background-repeat: se a imagem vai repetir ou não, opções: repeat, no-repeat, repeat-y (repetir verticalmente) e repeat-x (repetir horizontalmente).
  • background-position: posição da imagem na tela. Você tem várias opções para essa propriedade.

Exemplo de código para inserir imagem como plano de fundo:

A página ficaria assim:

Exemplo de código

Formatação de Texto

Você pode formatar um texto aplicando a ele uma ID ou Classe com as definições que você deseja. Veja algumas propriedades utilizadas para a formatação de texto abaixo:

  • font-family: Escolha qual será a fonte do texto.
  • font-size: Tamanho da fonte.
  • color: Cor da fonte.
  • font-style: Estilo da fonte (normal, italic, oblique).
  • font-weight: Espessura da fonte (normal, bold, bolder, e outros).
  • text-align: Alinhamento do texto.

Exemplo de código HTML/CSS para formatar o texto:

Exemplo de código

Formatação de Links

Para você formatar um link, escolha uma ID ou Classe com o estilo que você quer para ele, e adicione o atributo a. Veja essa repetição do exemplo anterior com atributo a definido:

Como ficaria o link depois dessas formatações:

Exemplo de código

Efeito “Hover”

O efeito “hover” acontece quando você passa a seta do mouse sobre um link, e ele muda de aparência. Para adicioná-lo, você deve aplicar o atributo a:hover na ID ou Classe do link que você deseja.

Continuando com o exemplo anterior, veja o código para aplicar o efeito ao link:

Feito isso, o link originalmente seria:

Exemplo de código

Depois de passar a seta do mouse sobre ele:

Exemplo de código

Definir estilo de Divs HTML

No CSS você pode dar um estilo às Divs HTML aplicando a elas uma ID ou Classe com as propriedades que você desejar. Duas propriedades importantes de ser aprendidas são o width (para definir a largura da div) e height (para definir a altura da div). Veja um exemplo de código de div com a sua altura e largura definidas:

Essa div teria 800px de largura e 200px de altura:

Exemplo de código

Veja um exemplo de código de um layout de página com três divs, sendo o topo, o conteúdo e o rodapé, e diferentes estilos para cada uma delas:

O layout ficaria assim:

Exemplo de código

Conclusão

Existe uma diversidade de estilos que você pode aplicar aos elementos da sua página com CSS, você pode pesquisar sobre eles em livros, revistas ou websites, esse tutorial é apenas uma introdução na linguagem. Espero que seja útil a vocês.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *