O que é CSS?

CSS, é uma tecnologia que nos permite criar páginas web de uma maneira mais exata. Graças às CSS somos muito mais donos dos resultados finais da página, podendo fazer muitas coisas que não se podia fazer utilizando somente HTML, como incluir margens, tipos de letra, fundos, cores…

CSS são as siglas de Cascading Style Sheets, em português Folhas de Estilo em Cascata. Neste artigo vamos ver alguns dos efeitos que se podem criar com as CSS sem necessidade de conhecer a tecnologia inteira.

Para começar

As Folhas de Estilo em Cascata se escrevem dentro do código HTML da página web, somente em casos avançados se podem escrever em um arquivo à parte e linkar a página com esse arquivo. À princípio, vamos utilizar a maneira mais direta de aplicar estilos aos elementos da página, mais adiante veremos a declaração em arquivos externos. Para isso, e isto é a primeira lição deste artigo, vamos conhecer um novo atributo que se pode utilizar em quase todas as etiquetas HTML: style.

Exemplo: 

<p style=”color:green;font-weight:bold”>O parágrafo sairá com a cor verde e em negrito</p>

Dentro do atributo style se devem indicar os atributos de estilos CSS separados por ponto e vírgula (;). Durante este artigo vamos conhecer muitos atributos de CSS, os dois primeiros que vimos aqui são:

Color: indica a cor do conteúdo, na etiqueta onde estivermos utilizando, geralmente indica a cor do texto.

Font-weight: indica a grossura do texto. Bold serve para colocar em negrito.

Cor nos links

Com HTML definimos a cor dos links no <body>, com os atributos link, vlink e alink. Isto nos permite mudar a cor dos links para todo o documento, mas e se quisermos mudar a cor de um link em concreto, para que tenha outra cor que a definida na etiqueta <body>?

Para fazer isto utilizaremos o atributo style dentro do link:

<a href=”meulink.html” style=”color:red”>

Assim sairá o link na cor vermelha, independentemente da cor definida para todo o documento.

Espaçamento entre linhas

Com CSS podemos definir o espaço entre cada linha do documento, utilizando o atributo line-height. Por exemplo, podemos definir que para todo um parágrafo o espaço entre cada uma de suas linhas seja 25 pixels:

<p style=”line-height: 25px;”>
Um parágrafo normal no qual cada uma das linhas está separada 25 pixels da outra. Há de colocar suficiente texto como para que se vejam 2 linhas, assim sairão separadas
</p>

Espaçamento entre caracteres

Pode-se definir também o espaço entre cada caractere. Isto se faz com o atributo de CSS letter-spacing. Vejamos um exemplo:

<p style=”letter-spacing:12cm”>
Este parágrafo tem as letras espaçadas por 1 centímetro.
</p>

Este atributo, assim como ocorre com muitos outros de CSS, não está suportado para todos os navegadores. Netscape por exemplo, em sua versão 4 ainda não o inclui.

Links sem sublinhado

Um dos efeitos mais significativos e fáceis de realizar com CSS é eliminar o sublinhado dos links de uma página web. Existe um atributo que serve para definir a decoração de um texto, se está sublinhado, riscado, ou se não tem nenhuma destas “decorações”. É o atributo text-decoration, neste caso indicaremos em um link que não queremos decoração:

<a href=”minhapagina.html” style=”text-decoration:none”>

Incluir estilos para todo um site web

Uma das características mais potentes da programação com folhas de estilo consiste em definir os estilos de todo um website. Isto se consegue criando um arquivo onde simplesmente colocamos as declarações de estilos da página e linkamos todas as páginas do site com esse arquivo. Deste modo, todas as páginas compartilham uma mesma declaração de estilos e, portanto, se a mudamos, todas as páginas serão mudadas.

Vejamos agora todo o processo para incluir estilos com um arquivo externo.

1- Criamos o arquivo com a declaração de estilos 

É um arquivo de texto normal, que pode ter qualquer extensão, apesar de que lhe podemos atribuir a extensão .css para lembrarmos de que tipo de arquivo é. O texto que devemos incluir deve ser escrito exclusivamente em sintaxe CSS, é um pouco diferente da sintaxe que utilizamos dentro do atributo style. Estaria errado incluir código HTML neste arquivo: etiquetas e outras. Podemos ver um exemplo a seguir:

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Linkamos a página web com a folha de estilos 

Para isso vamos colocar a etiqueta <LINK> com os atributos

  • rel=”STYLESHEET” indicando que o link é uma folha de estilo.
  • type=”text/css” porque o arquivo é de texto, em sintaxe CSS.
  • href=”estilos.css” indica o nome do arquivo fonte dos estilos.

Vejamos uma página web inteira que linka com a declaração de estilos anterior:

<html>
<head>
<link rel=”STYLESHEET” type=”text/css” href=”estilos.css”>
<title>Página que lê estilos</title>
</head>
<body>
<h1>Página que lê estilos</h1>
<p>
Esta página tem no cabeçalho a etiqueta necessária para linkar com a folha de estilos. É muito fácil.
</p>
</body>
</html>

As CSS têm muito mais possibilidades

As Folhas de Estilo em Cascata são um padrão muito amplo, com umas especificações e possibilidades muito grandes. Neste artigo vimos alguns efeitos interessantes para realizar mesmo que não tenhamos nenhum conhecimento prévio. Entretanto, o melhor para trabalhar com esta tecnologia é conhece-la bem, graças a isso, os resultados serão muito mais surpreendentes.

Fonte: http://www.criarweb.com/artigos/173.php

Deixe um comentário