Arquivo da tag: Cascading Style Sheet

mar 8 2012

Css (Cascading Style Sheets) para iniciantes

O que significa a sigla CSS ?

CSS é a sigla para Cascading Style Sheet, que, em português, foi traduzido para folhas de estilo em cascata, e nada mais é do que um documento no qual são definidas regras de formatação de estilos a serem aplicadas aos elementos estruturais de marcação.

Qual é a finalidade das CSS ?

A finalidade das CSS é retirar do (X)HTML toda e qualquer declaração que vise a formatação ou á apresentação do documento. Isto significa dizer que as tags do tipo <font>, <bold>, <em>, <i> etc., bem como uso das colunas e linhas de tabelas para a obtenção de espaçamentos, não são admitidas ou admitidas com restrições em um projeto CSS. Simplificando, vale dizer: (X)HTML para estruturas e CSS para apresentar.

Por que devo usar CSS ?

CSS permite que você retire da marcação (X)HTML toda formatação ou apresentação do documento web. Quem vai determinar cores, formas, tipos e tamanhos, posicionamentos, e todo o visual da pagina são as CSS. As vantagens estão relatadas nas respostas a seguir.

Quais são as vantagens de usar CSS ?

Inúmeras são as vantagens de uso das CSS nos documentos web. Eis as principais:

  • Controle total sobre a apresentação do site e a partir de um arquivo central;
  • Agilização da manutenção de redesign do site;
  • Saída para diferentes tipos de mídia a partir de uma versão única de (X)HTML;
  • Redução do tempo de carga dos documentos web;
  • Adequação simplificada aos critérios de acessibilidade e usabilidade;
  • Elaboração de documento consistentes com as aplicações de usuários futuras;
  • Aumento considerável na portabilidade dos documentos web;

As CSS estão de acordo com as Web Standards (Padrões da Web) ?

Sim estão. As CSS estão entre as praticas vivamente recomendadas pelo W3c, para projetos web. Os esforços dos órgãos normalizadores apontam no momento atual para elaboração de documentos web acessíveis, usáveis e portáveis com grande ênfase. Além do mais, as CSS facilitam e simplificam a obtenção destas três características.

O que é Seletor ?

Seletor é uma entidade que identifica um elemento (X)HTML ou entidade do DOM, na qual a regra de estilo ser a aplicada.
Por exemplo:

p {font-size:12px;}

Seletor ‘p’ (elemento (X)HTML paragrafo) e a regra CSS determinam que os paragrafor teram uma mesma fonte de tamanho 12px.

p, ul {font-size:10px;}

Os seletores são ‘p’ e ‘ul’.

O que é seletor do tipo classe ?

São tipos de seletores que podem ser escritos em tags de documentos (X)HTML eles podem estar em uma ou mais tags (X)HTML não importando sua repetição. Exemplo:

.minhaClasse
{
color: red;
}
<p class='minhaClasse'>

ou

<a class='minhaClasse'>

ou tambem

<span class='minhaClasse'>

O que são seletores do tipo ID ?

Seletores do tipo ID são iguais seletores de classe so que não pode se repetir, pois no documento (X)HTML cada tag deve ter um ID (nome) diferente e nenhum deve ser igual, através disso podemos estilizar uma tag (X)HTML pelo seu ID também mas somente aquela tag. Por Exemplo:

#minhaClasse
{
color: red;
font-size:12px;
font-family:"Arial", Helvetica, Tahoma;
}
<span id="minhaClasse">

Neste caso acima só pode ter uma tag com esse mesmo ID no documento inteiro mesmo que seja outro tipo de tag exemplo <a>, <ul>, <img>, so podemos ter uma no documento com esse mesmo ID ou mesmo nome, sendo assim estilizamos essa tag pela classe #minhaClasse, o símbolo # antes do nome da classe indica que este deve ser o nome do ID de uma tag dentro do documento web.