Ir para conteúdo / Skip to content

GUIA CSS - 1ª PARTE: INTRODUÇÃO AS CSS

Postado em: 26 de junho de 2006 por Pedro Rogério

Com esse artigo vou iniciar um série deles explicando as propriedades CSS. Um ótimo guia básico para aqueles que estão iniciando em CSS, e o primeiro deles é uma breve introdução:

As CSS (folhas de estilo em cascata), permitem que você separe toda a formatação do seu site do código (x)HTML. Enquanto você trabalha encima do HTML, o CSS fica por conta da formatação das fontes, cores, background, bordas, efeitos em links, etc., tudo isso concentrado em um arquivo. Existem várias maneiras de se usar o CSS, seja ela internamente ou externamente.

Utilizando estilos internamente

Quando estamos usando estilos internos, nós simplesmente colocamos o nosso CSS dentro das tags <head></head> do nosso código (x)HTML. Você pode ver um exemplo logo abaixo:


<html>
<head>
<title></title>
<style type="text/css">
Aqui você coloca o código CSS
</style>
</head>
<body>
</body>
</html>

Nesse método toda cada página (x)HTML terá seu respectivo código CSS para a formatação da página. Esse método é ideal para aqueles sites de uma página ou para quem está iniciando no assunto.

Utilizando estilos externamente

Utilizar CSS externamente é tão fácil quanto internamente, o que muda aqui é que você ira criar um arquivo com a extensão .css e colocar em seu (x)HTML uma chamada para esse arquivo. Assim ficaria da seguinte forma:


<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />

Ou também utilizando o método @import:


<style type="text/css">@import url(nome_do_arquivo.css)</style>

O nosso código (x)HTML ficaria da seguinte forma:


<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="nome_do_arquivo.css" />
</head>
<body>
</body>
</html>

Agora com @import:


<html>
<head>
<title></title>
<style type="text/css">@import url(nome_do_arquivo.css)</style>
</head>
<body>
</body>
</html>

A vantagem de se usar CSS externamente é que quando você precisar fazer algumas mudanças em seu site, basta fazer as alterações no arquivo CSS que é ocorrida uma alteração global em todo o su site. Por exemplo, se você tem 1000 páginas com um título <h2> em vermelho, caso queira alterar a cor para preto, é só alterar uma linha em seu arquivo CSS que todas as 1000 páginas terão os títulos alterados.

Estilos Inline

Os estilos inline são definidos ao longo do elemento (x)HTML que você denominou:


<p style="color: #ff0000;">Esse parágrafo terá a cor vermelho</p>

As desvantagens de se usar estilos inline é que você só irá poder fazer alterações nos elementos em que você formatou. Com tudo isso que foi mostrado chegamos a seguinte conclusão:

  • A estilização de suas páginas se torna flexível
  • O tamanho de seus arquivos fica reduzido
  • Facilidade na manutenção

Tradução do artigo original de: CSS Basics.

Isso pode lhe interessar:

Deixe seu comentário

2 comentários para esse post

  1. onildo freitas disse: 31.12.06 ás 09:29
    #1

    tenho uma pagina index com : topo, cabeçalho,lat dir, lat esq e centro. Na lat dir tenho uma lista de links. Como faço para que o objeto linkado abra sempre na div cento, sem que o restante da página seja alterado.

  2. onildo freitas disse: 31.12.06 ás 09:29
    #2

    excelente a forma didática utilizada.

Deixe seu comentário