Na actualidade, a quantidade de páginas web que utilizam CSS é massiva, sendo que atualmente milhares e milhares de pessoas utilizam o CSS para estilizar suas páginas e blogs. Desde desenvolvedores a blogueiros, passando por meros curiosos, o CSS é hoje uma linguagem de programação amplamente conhecida e utilizada na internet. Nos dias de hoje já não há desculpa para não utilizar CSS nas suas produções básicas!

O CSS surgiu durante a década de 90, por parte de Hakon Wium Lie, que convidou Bert Bos para participar no desenvolvimento do CSS. Bert Bos estava na altura a desenvolver um navegador chamado Argo. Em 1995 Hakon e Bert apresentaram a sua proposta e o W3C que tinha sido criado recentemente interessou-se pelo projecto e criou uma equipa liderada por Hakon Lie e Bert Bos. O primeiro lançamento foi em 1996, o chamado CSS1, seguido pelo CSS2 em 1998, e neste momento estamos a par com o CSS3.

Posto isto, e depois de lançados os artigos sobre HTML, Javascript e jQuery, lançamos um artigo sobre CSS. Este conjunto de artigos certamente lhe serão muito úteis se estiver aprendendo alguma dessas linguagens, pois acabam por estar ligados uns aos outros.

1. ANTES DE COMEÇAR

Antes de começar deve ter conhecimentos sobre HTML

O que é CSS?

CSS significa Cascade Styling Sheet, Folha de Estilo em Cascata, e tem como objectivo definir como posicionar e mostrar elementos HTML, de uma forma visualmente trabalhada.

2. SINTAXE CSS

A sintaxe CSS é bastante simples, sendo composto por um selector e uma ou mais declarações

h1 {color:red;font-size:14px;}

O selector será o elemento HTML ao qual quer adicionar estilo. Cada declaração consiste em uma propriedade e um valor. A propriedade é um atributo de estilo que quer alterar, e o valor é o valor dessa propriedade.

Também é possível adicionar comentários ao código CSS através de /* e *\:

/* Isto é um comentário *\
h1 {color:red;font-size:14px;}
/* Isto é outro comentário *\

3. ONDE E COMO INSERIR

Existem 3 formas de inserir CSS:

  1. Através de uma folha de estilos externa.
  2. Através da folha de estilos interna.
  3. Através do estilo em linha.

Folha de Estilos Externa

Uma folha de estilos externa é o ideal quando o estilo é aplicado a múltiplas páginas. Com uma folha externa, pode alterar o estilo de um website inteiro apenas alterando um ficheiro. Uma folha de estilos pode ser escrita em qualquer editor de texto, ser guardada com a extensão .css e não pode conter nenhuma tag HTML.

No entanto isto não acontece por osmose, é necessário fazer a ligação à folha de estilos em cada página, da seguinte forma:

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

Folha de Estilos Interna

Uma folha de estilos interna pode ser usada quando um documento único tem um estilo único. A folha de estilos interna é feita na secção head da página HTML, como no exemplo que se segue:

<head>
<style type="text/css">
hr {color:black;}
p {margin-left:20px;}
p {margin-right: 20px;}
body {background-image:url("imagens/fundo.gif");}
</style>
</head>

Estilo em linha

O estilo em linha perde as vantagens das folhas de estilo, pois mistura o conteúdo com a estilização. Este método deve ser usado quando qualquer das alternativas apresentadas antes não for viável. Para utilizar este estilo, vejamos o exemplo:

<p style="color:red;margin-left:20px">Isto é um parágrafo.</p>

Várias folhas de estilo

Hierarquia de estilos (onde o 1 é o de maior prioridade):

  1. Estilo em linha
  2. Folha de estilo interna
  3. Folha de estilo externa

Sim, é possível fazer uma mistura de várias folhas de estilo, e estamos a falar de uma externa e uma interna ao mesmo tempo, já que o estilo em linha pode ser aplicado a qualquer altura pois é hierarquicamente superior a ambos. No caso de uma página HTML estar ligada a uma folha de estilo externa e tiver uma interna, nos valores que forem comuns, irão ser utilizados os da folha de estilo interna. Os valores que não forem comuns irão ser utilizados normalmente.

4. ID E CLASSE CSS

Além de estilizar elementos HTML, CSS permite-lhe definir os seus próprios selectores chamados de ID e CLASS.

O selector ID é usado para definir estilo para um elemento único. Usa o ID do atributo do elemento HTML e é definido com um “#”.

#titulo2
{
text-align:center;
color:red;
}

No caso, o estilo foi aplicado ao elemento com o ID=”titulo2″.

O selector CLASS é utilizado para estilizar um grupo de elementos. Ao invés do selector ID, o selector CLASS é frequentemente utilizado em vários elementos. Isto permite-lhe definir um estilo particular para qualquer elemento HTML que tenha a mesma classe. Como o selector ID, o CLASS usa o atributo de classe de HTML e é definido com um “.”.

.center {text-align:center;}

5. FUNDO CSS (BACKGROUND)

As propriedades utilizadas para definir efeitos no fundo são:

  • background-color
  • background-image
  • background-repeat
  • background-attachement
  • background-position

Uma cor de fundo pode ser definida por um nome de cor (red,green,black, etc), um valor RGB (por ex. 255,0,0) ou um valor hexadecimal (por ex. #006600)

Uma imagem de fundo pode ser definida por “body {background-image:url(‘paper.gif’);}” e por defeito é repetida, de forma a cobrir todo o elemento.

A repetição de uma imagem pode ser feita verticalmente ou horizontalmente, atravéz de repeat-x ou repeat-z:

{
/*Repetiçao horizontal *\
background-image:url('fundo.png');
background-repeat:repeat-x;
}
{
/*Repetiçao vertical*\
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Para definir a posição de uma imagem, vejamos o exemplo:

{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Para uma lista completa dos valores para as propriedades do background, aqui fica uma tabela:

6. TEXTO CSS

O texto pode ser estilizado em cor, tamanho, alinhamento e decoração.

A cor pode ser definida por nome (red,green,blue etc), valor RGB (por ex. 255,0,0) ou um valor hexadecimal (#006600)

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

O alinhamento pode ser definido com “center”,”left”,”right”,”justify”

h1 {text-align:center;}
p.date {text-align:right;}
p.hour {text-align:left;}
p.main {text-align:justify;}

A decoração pode ser definida por:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

e pode ser removida por:

a {text-decoration:none;}

Aqui fica uma tabela completa:

7. TIPO DE LETRA CSS

Em CSS há dois tipos de famílias de tipos de letras,a família genérica (um grupo de tipos de letra com look similar) e a família tipo de letra (uma família de tipos de letra específico).

O tamanho da letra pode ser definido em percentagem, pixeis ou em, sendo que 1em = 16 pixeis.

Familia

Uma família de tipos de letra é definida por uma propriedade, a qual é interpretada pelo navegador, e no caso de não suportar o primeiro tipo de letra da família, passa para o próximo.

p{font-family:"Times New Roman", Times, serif;}

Estilo

A propriedade de estilo de tipo de letra é muito usada para especificar texto em itálico. A propriedade pode ter 3 valores:

  • normal – texto normal
  • italic – texto em itálico
  • oblique – o texto está inclinado, muito similar ao itálico mas menos suportado
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Tamanho

A propriedade de tamanho é aquela que define qual o tamanho do texto. É aconselhável não utilizar ajustes de tamanho para fazer com que parágrafos se pareçam com títulos e vice-versa. Deve sempre usar as tags adequadas a cada situação, como <h1> a <h6> para títulos e <p> para parágrafos. Este pode der definido por absoluto ou relativo.

Absoluto:

  • Define o texto para o tamanho especificado.
  • Não permite que o utilizador altere o tamanho de texto no navegador.
  • É útil quando o tamanho físico do documento é desconhecido.

Relativo:

  • Define o tamanho relativamente aos elementos que o rodeiam.
  • Permite ao utilizador alterar o tamanho da letra no navegador.

Deixamos aqui uma tabela completa com as propriedades e valores:

8. LINKS CSS

Os links também podem ser estilizados com qualquer propriedade CSS, color, font-family, background, etc.

Existem também 4 estados de links como é sabido, e estes podem ser estilizados de forma independente.

  • a:link
  • a:visited
  • a:hover
  • a:active
a:link {color:#FF0000;}      /* link nao visitado */
a:visited {color:#00FF00;}  /* link visitado */
a:hover {color:#FF00FF;}  /* rato sobre o link */
a:active {color:#0000FF;}  /* link seleccionado */

Também é possível adicionar decoração:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Ou cor de fundo:

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

9. TABELAS CSS

Uma simples tabela pode ser muito melhorada e tornada mais atractiva através de CSS. É possível alterar os limites, tamanho, alinhamento do texto, espaçamento, cor e outros.

Limites

Estes limites são inseridos em toda a tabela, sendo que neste caso irá ter 1px de largura e a cor preta:

table, th, td
{
border: 1px solid black;
}

Tamanho

Este tamanho é relativo à tabela, em que estamos a definir a largura e altura da mesma:

table
{
width:100%;
}
th
{
height:50px;
}

Alinhamento

Este alinhamento é relativo ao texto, sendo que pode ser alinhado de forma geral com o text-align ou mais especificamente com o vertical-align e horizontal-align:

td
{
text-align:right;
}

/*
ou
*\

td
{
height:50px;
vertical-align:bottom;
horizontal-align:center;
}

Espaçamento

Este espaçamento é entre o limite da tabela e o conteúdo. Pode ser utilizado com td e th.

td
{
padding:15px;
}

Cor

A cor pode ser adicionada a qualquer elemento da tabela:

table, td, th
{
border:1px solid orange;
}
th
{
background-color:red;
color:white;
}

Não perca o artigo de CSS Avançado na próxima semana!

Até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Jonathan [JCM]
    15 de novembro de 2010

    Artigo interessante, pode ser bem útil para quem está iniciando nesta área.

    Uma coisa que poucos sabem é a possibilidade de estilizar um conteúdo de acordo com os valores dos seus atributos.
    Um exemplo simples, digamos que eu queiro que todos os links que apontem para o topo tenham a cor laranja usamos os seguinte código:

    a[href='#'] {
    color:orange;
    }

    Basta usar a imaginação e brincar com o código.



    • Diogo Espinha
      17 de novembro de 2010

      Obrigado pela sua contribuição Jonathan!



  2. Daniel
    17 de novembro de 2010

    Belo artigo, porém, CSS não uma Linguagem de Programação.

    Parabéns!



    • Diogo Espinha
      17 de novembro de 2010

      Olá Daniel, gostaria antes de mais saber o que o leva a afirmar que CSS não é uma linguagem de programação. Parece-me que é uma questão pertinente e levantada por muitos.

      Aproveito para deixar um artigo da Wikipedia sobre CSS.

      http://pt.wikipedia.org/wiki/Cascading_Style_Sheets



      • SneepS
        30 de março de 2012

        Então Diogo, css é linguagem de marcação, por sí só é incapaz de resolver um algoritmo, então foge a regra de “linguagem de programação”.

        Mas o artigo é bom, parabéns!



  3. Zeca
    15 de janeiro de 2011

    Artigo bastante interessante e util para iniciados como eu.
    Estive a usar alguns elementos aqui explanados.
    Mas agora tenho uma duvida, não estou a conseguir de modo nenhum colocar uma imagem centrada numa div? alguma dica.
    Obrigado



    • Diogo Espinha
      24 de janeiro de 2011

      Olá Zeca, peço desculpa pela resposta tardia.
      Para centrar o conteúdo de uma div pode seguir este exemplo:

      < .div id="nome_da_div">
      < .center>< .img src="http://www.linkdaimagem.com/">< ./center>
      < ./div>

      Retire os pontos que estão a mais no início de cada tag :) Espero que tenha ajudado,
      Abraço!



      • Jonathan [JCM]
        24 de janeiro de 2011

        Só para complementar.
        A tag DIV será removida do HTML, portanto é melhor fazer a centralização via CSS.
        [code]#nome_da_div {width: 100%;} #nome_da_div > img {margin: 0 auto; display:block;}[/code]

        Mas pode utilizar a tag center também. xD



        • Jonathan [JCM]
          24 de janeiro de 2011

          Ops, eu quis dizer tag CENTER. :P



  4. mauricio
    29 de setembro de 2011

    Olá Diego, parabens pela disseminação de conhecimento. Adoro seus artigos. Quero fazer o meu TCC utilizando PHP, HTML5, CSS3 E MySql o que você acha sobre a integração dessas tecnologias? Um abraço!



    • Diogo Espinha
      5 de outubro de 2011

      A minha opinião é que a utilização de PHP HTML5 e CSS3 é sempre de valor quando conjugados eficientemente. Força nisso!

      Abraço



  5. Ronaldo Bastos
    14 de maio de 2012

    OLá, achei muito bom, mais a onde coloca os código no blog,eu não intendo nada de css!Tenho uma duvida esto, construindo um blog WordPress esto com grande dificuldade na pagina, home e na imagem dentro do postagem do blog. Pode me ajuda ?

    OBREGADO



    • Diogo Espinha
      18 de maio de 2012

      Olá Ronaldo Bastos, o local mais adequado para você tirar suas dúvidas relativamente a WordPress será com os artigos da Escola WordPress em http://www.escolawp.com

      Abraço!



  6. Raphael Lima
    25 de maio de 2012

    Belo artigo, estava com dúvidas básicas que foram sanadas.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz