Ao desenvolver um site em CSS é necessário verificar o projecto em alguns navegadores como o IE (6,7,8) e Firefox. Uma vez que o IE é o navegador mais utilizado (com mais de 80% de utilizadores) em todo o mundo deve haver uma preocupação em tornar o meu site perfeito em todas as versões do IE.
 
Existe uma ferramenta para verificar o site no IE5.5, IE6, IE7 e IE8. Usa esta ferramenta que pode mostrar-te como uma página web é visualizado em todos os browsers acima mencionados. É para Vista e XP. 
O programa IE Tester é muito útil para web designers. Faz download do software ...


Depois de New York, Barcelona e Lisboa, Paris foi o local eleito para acolher no próximo ano a edição do Festival OFFF, único festival de cultura pós-digital do mundo.

Paris 2010 - 24, 25 e 26 Junho

Site OFFF

As CSS (Cascade Style Sheets) têm a seguinte nomenclatura:

"selector", a propriedade ("property") e o valor ("value").

selector {property: value}

cada "selector" pode ter várias propriedades "property", sendo obrigatório a separação das mesmas com o ";".


Exemplo:

body {background: #CCFFFF; margin: 0px;}

ou

body {
background:#CCFFFF;
margin: 0px;
}


CLASS
Class: cria uma "biblioteca" de estilos que pode ser aplicado em qualquer tag. Este tipo de CSS tem sempre um "." (ponto) antes do nome e não deve ter inicialmente um número.


Exemplo:

CSS

.texto {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
margin: 4px;
padding: 2px;
}


HTML

<p class="texto">o meu texto</p>



TAG

Tag: aplica um estilo para uma tag específica, como o . Este tipo de CSS é descrito com o nome da tag, sem qualquer ponto "." no início ou aspas.

Exemplo:

CSS

body {
background: #000000;
margin: 0px;


Significa que a página vai ter um pano de fundo ("background") preto e sem margens.



Avançado:
Podemos aplicar estilos para pseudo-tag (como efeitos de texto para links) e IDs (por exemplo: aplicações de estilos nas DIV e Layers)

A nomenclatura é a seguinte:

selector:pseudo-class {property: value}

"Pseudo-tag":

a:link {color: #FFFFFF;text-decoration: underline;}

(a tag significa "anchor" (ancora), que permite fazer uma Hiperligação ("Hyperlink") para uma outra página ou para um outro lugar da mesma página)


Exemplo:

CSS

a.texto:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}

a.texto:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FF0000;
text-decoration: underline;
}

a.texto:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
background:#0000FF;
text-decoration: underline;
}


HTML

<p class="texto">Texto <a
href="http://www.w3schools.com" class="texto"
>Link</a></p>




O "ID selector"

É possível definir estilos para elementos do HTML com o "ID Selector". Este tipo de CSS é descrito um asterisco "#" antes da designação e, também, não deve conter um número no início. 


Exemplo:

CSS

#div_amarelo {
background-color:#FFFF00;
width:150px;
height:150px;
margin:30px;
padding:10px;
}

HTML:


<div id="div_amarelo">

<p class="arial">Esta Div tem:<br>

altura: 150 px <br>

largura: 150 px <br>

fundo: amarelo <br>

margem de 30 px<br>

padding: 10 px </p>

</div>




"Comentários" nas CSS

No código HTML existe basicamente este comentário:

<!-- o meu comentário -->


No código CSS existe somente este comentário:

/* o meu comentário */



Para acompanhar a indústria de web design podes procurar fontes de auto-estudo sempre que possível, tais como livros, ou então ficarás para trás. Consulta aqui!


Excelente lista de links para tutoriais, dicas e recursos sobre a utilização de CSS. Consulta o site de Grace Smith.