Exemplos CSS

Aprendendo CSS com Exemplos

CSS é um assunto que faz muitos programadores perder alguns cabelos. Muitas vezes por conta da diferença entre navegadores (principalmente o Internet Explorer 6), mas algumas vezes por não conhecer todos os comandos da linguagem.

Encontrei essa lista com alguns dos conceitos mais utilizados em CSS e achei interessante compartilhar. Peguei essa dica no site do Maurício Samy Silva e pretendo ir atualizando ela na medida que eu for encontrando novas dicas.

Não deixem de visitar o site no qual essas dicas foram extraídas: CSS FAQ – Dúvidas frequentes de CSS.

Pular indice

Índice

1. O que significa a sigla CSS?
2. Qual é a finalidade das CSS?
3. Por que devo usar CSS?
4. Quais as vantagens de usar CSS?
5. As CSS estão de acordo com os Padrões Web?
6. O que é regra CSS ?
7. Como escrevo uma regra CSS ?
8. Quais caracteres são permitidos em CSS?
9. As sintaxe CSS é
   sensível a maiúsculas/minúsculas?
10. Posso incluir comentários nas regras CSS?
11. O que é efeito cascata das CSS?
12. Como é determinada a ordem para o efeito cascata?
13. O que é declaração CSS?
14. Posso atribuir mais de uma declaração
    a um a um seletor?
15. O que é declaração com uso de !important?
16. O que e seletor ?
17. O que é agrupamento de seletores?
18. O que é seletor tipo classe?
19. Como defino e escrevo uma classe?
20. O que são seletores tipo pseudo-elementos?
21. O que são seletores tipo pseudo-classes?
22. O que é seletor tipo ID?
23. O que é seletor de atributo?
24. O que é seletor-filho?
25. O que é seletor descendente?
26. O que é propriedade CSS?
27. O que é propriedade CSS em declaração
    única?
28. O que é valor CSS?
29. O que é valor default de uma propriedade CSS?
30. O que é herança?
31. Onde devo salvar minhas CSS ?
32. O que é estilo inline?
33. O que é folha de estilo incorporada?
34. O que é folha de estilo externa?
35. Posso usar estilos inline, incorporados e externos em mesmo documento?
36. O que é folha de estilo importada?
37. Como fazer layouts alternativos no site ?
38. O que é folha de estilo alternativa?
39. O que é folha de estilo persistente?
40. O que é folha de estilo preferida?
41. Como combinar múltiplas folhas de estilo
    em uma só?
42. O que são elementos inline?
43. O que são elementos nível de bloco?
44. O que são elementos pai e filho?
45. Posso usar folhas de estilo e declarações
    de estilo no HTML em um mesmo documento?
46. Quem tem precedência: atributos HTML ou
    propriedades CSS?
47. Pode CSS ser aplicada a um documento não HTML?
48. Como posso centrar um elemento nível de bloco?
49. Devo usar " " (aspas) ao declarar URL?
50. Como retirar o sublinhado dos links?
51. Como estilizar links de maneira diferente na mesma
    página?
52. Como declarar fontes cujo nome
    é composto por mais de uma palavra?

Perguntas e respostas

1. O que significa a sigla CSS?

   CSS é a sigla para Cascading Style Sheets que em português
   foi traduzido para folhas de estilo em cascata
   e nada mais é, que um documento onde são definidas regras de fomatação ou de estilos, a serem aplicadas aos elementos da marcação de um documento HTML.

   índice

2. Qual é finalidade das CSS?

   A finalidade das CSS é a de retirar da marcação toda e qualquer declaração que vise a apresentação do documento. Isto significa dizer que tags do tipo <font>, <b>, <i> bem como uso de colunas e linhas de tabelas para obtenção de espaçamentos não são admitidos ou admitidos com restrições em um projeto Web com CSS. Vale dizer simplificando: HTML para estruturação e CSS para apresentação.

   As tags <b> e <i> cumprem finalidade unicamente de apresentação. Elas não têm qualquer efeito sobre tecnologias assistivas. Foram criadas à época antiga de marcar documentos web e basicamente calcados em estruturação para mídia tipográfica, não imputando qualquer relevância ao texto com elas marcado e nada significam para leitores de tela ou mecanismos de busca por exemplo. Não estão em desuso, são previstas na HTML5, podem e devem ser usadas se a sua intenção é a de contemplar somente mídia visual.
   As tags <strong> e <em>, estas sim, são interpretadas por todas as tecnologias assistivas e devem ser usadas em substituição a <b> e <i> se a sua intenção é a de contemplar estas tecnologias.

   índice

3. Porque devo usar CSS?

   CSS permite que você retire da marcação HTML toda a formatação (apresentação) do documento WEB. Quem vai determinar cores, formas, tipos e tamanhos, posicionamento e em fim todo o "visual" da página são as CSS. As vantagens estão relatadas nas respostas a seguir.

   índice

4. Quais as vantagens de se usar CSS ?

   Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais:

   • controle total sôbre a apresentação do site a partir de um arquivo central;
   • agilização da manutenção e redesign do site;
   • saida para diferentes tipos de mídia a partir de uma versão única de HTML;
   • redução do tempo de carga dos documentos Web;
   • adequação simplificada aos critérios de acessibilidade e usabilidade;
   • elaboração de documentos consistentes com as aplicações de usuários futuras;
   • aumento considerável na portabilidade dos documentos Web.

   índice

5. As CSS estão de acordo com Padrões Web?

   Sim estão. As CSS estão entre as práticas vivamente recomendadas pelo W3C para projetos Web. Os esforços dos órgãos normatizadores apontam no momento atual para elaboração de documentos Web acessíveis, usáveis e portáteis com grande ênfase. E, CSS facilita e simplifica a obtenção destas três variáveis.

   índice

6. O que é regra CSS?

   Regra CSS e uma unidade mínima de programação de estilos, que segue uma sintaxe própria e destina-se a estilizar uma ou mais propriedades CSS. (ver resposta seguinte)

   índice

7. Como escrevo uma regra CSS?

   A sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abaixo:

   seletor {propriedade: valor;}

   Nota: ao conjunto propriedade:valor denominamos declaração CSS

   Por exemplo:

          
   	p {text-indent:12px;} /* é uma regra CSS */
   

   p é o seletor CSS.
   {text-indent: 12pxt} é a declaração CSS.
   text-indent – é a propriedade CSS.
   12px – é o valor CSS.

   índice

8. Quais são os caracteres permitidos em regras CSS?

   São as letras de a-z, A-Z, os números de 0-9, underscore,
   hífen e caracteres de escape. Caracteres Unicode 161-255, bem
   como caracteres Unicode como códigos numéricos. Não
   é permitido iniciar-se um nome com um traço ou número.

   índice

9. As sintaxe CSS é
   sensível a maiúsculas/minúsculas?

   Não. Regras CSS não são case sensitivas,
   isto é, pode-se usar maiúsculas ou minúsculas nas
   folhas de estilo indeferentemente. Isto é válido sómente
   para as declarações específicas de CSS. Por exemplo:
   mesmo numa declaração CSS, figura.gif é diferente
   de FIGURA.gif

   índice

10. Posso incluir comentários
    nas regras CSS?

    Sim. Comentários podem e devem ser usados nas folhas de estilo.
    É recomendável que se faça amplo uso de comentários
    para fornecer informações sobre os seletores, propriedades
    e valores declarados, com o intuito de facilitar futuras modificações
    ou mesmo entendimento do código gerado. Os comentários
    devem estar entre as marcas /* e */ e podem
    ser inseridos em qualquer espaço em branco dentro da folha de
    estilos. Não são permitidos comentários aninhados.

           
    		/* Isto é um comentário CSS */

    índice

11. O que é efeito
    cascata das CSS?

    Efeito cascata é o método pelo qual é aplicada
    uma regra CSS em função do pêso ( importância,
    prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de
    uma regra CSS, diz-se que há um conflito de regras e será
    aplicada aquela que tiver maior pêso (importância, prioridade)
    determinada pela ordem do efeito cascata.

    índice

12. Como é determinada a ordem para o efeito
    cascata?

    A ordem para o efeito cascata é a ordenação das regras CSS de acordo
    com critérios pré-estabelecidos, com a finalidade de resolver
    eventuais conflitos entre regras. E estes critérios são
    os abaixo enumerados:

    1. Localizadas todas as regras CSS aplicáveis ao seletor/propriedade,
       determina-se a especificidade de cada uma delas. A regra mais especifica
       entre as conflitantes será aplicada.
       Se não for encontra uma (ou mais) regra aplicável ao
       elemento HTML, este herdará as propriedades de estilo de seu
       elemento pai. Não havendo elemento pai será aplicado
       o valor inicial default de estilo para aquele elemento
    2. Regras com declaração importante (! important) tem
       prioridade sobre aquelas sem a declaração. Se o autor
       e o usuário declaram regras conflitantes com !important, as
       do usuário têm prioridade sobre as do autor.
    3. Regras com mesmo peso (sem !important) e conflitantes, declaradas
       pelo autor têm prioridade sobre aquelas declaradas pelo usuário.
       Regras do usuário com maior especificidade que aquelas do autor
       têm a prioridade. Regras com igual especificidade declaradas
       pelo autor têm prioridade sobre as do usuário. Regras
       do autor e do usuário têm prioridade sobre as regras
       default das aplicações do usuário (p.ex.: o browser)
    4. Regras mais específicas têm a prioridade sobre as menos
       específicas.
    5. Entre regras de mesmo pêso, têm prioridade aquelas declaradas
       por último na sequência das regras na folha de estilos.
       Folhas de estilo inline, incorporadas, lincadas e importadas (@import)
       nesta ordem, têm do maior para o menor pêso (estilos inline
       têm o maior pêso). Entre várias folhas de estilo
       lincadas têm maior prioridade aquela importada por último
       (mais próxima da tag </head>. O mesmo ocorre entre as
       folhas importadas (@import)

    índice

13. O que é declaração
    CSS?

    Declaração CSS e o fragmento de uma regra CSS dentro
    dos colchetes { }. A declaração CSS compõe-se de
    duas partes: a propriedade e o valor e uma regra CSS pode conter várias
    declarações separadas por um ponto-e-vírgula.

    Por exemplo:

    h1 {
    color: #000; /* essa linha contém a declaração CSS */
    }
    

    índice

14. Posso atribuir mais
    de uma declaração a um seletor?

    Sim, as declarações devem ser separadas por ponto-e-vírgula.

    Por exemplo:

           
    p {
    	background: #FFFFFF; 
    	color: #000;
    } 
    

    índice

15. O que é declaração com uso de ‘!important’ ?

    Usa-se !important em uma declaração CSS para incrementar
    o pêso (ou prioridade) da declaração no efeito cascata
    das regras de estilo. Convém ressaltar que CSS2 mudou o conceito
    para declarações com !important do autor e do usuário.
    A recomendação atual determina que !important do usuário
    prevaleça sobre o autor.

           
    h3 {
    	font-size:120% !important; 
    	color: #000;
    	}
    

    Esta regra aumenta o peso para o tamanho de letra do elemento h3

    índice

16. O que é seletor?

    Seletor é uma entidade que identifica um elemento HTML ou define uma
    classe ou pseudo classe na qual a regra de estilo será aplicada.

    Por exemplo:

           
    p {font-size: 12px;} 
    

    O seletor é p (elemento HTML parágrafo) e a regra CSS escrita determina que os parágrafos terão uma fonte de tamanho 12px.

           
    p, ul {text-indent: 12px;}

    Agora os seletores são p e ul.

    (ver agrupamento de seletores na resposta a seguir.)

    índice

17. O que é agrupamento de
    seletores?

    Agrupamento de seletores é uma forma compacta de reunir seletores
    que compartilham as mesmas regras de estilo.

    Por exemplo:

           
    p { color: #000;}
    .classeb {color: #000;} 
    span {color: #000;} 
    

    Os seletores p, .classeb e span podem ser agrupados como mostrado a seguir.

           
    p, .classeb, span { color:#000;}
    

    Notar que a sintaxe para agrupar seletores consiste em separá-los com uma vírgula

    índice

18. O que é seletor
    tipo classe?

    Seletor tipo classe tem uma abrangência mais ampla. É um
    seletor cujo nome você "inventa" e pode ser aplicado
    a qualquer elemento HTML. A sintaxe para este tipo de seletor é
    um nome (nome da classe) precedido de um . (ponto)
    O nome pode conter letras de a-z, A-Z, números de 0-9,
    hífen, ou caracter de escape. Caracteres Unicode 161-255, bem
    como qualquer caracter Unicode de código númerico, contudo
    não podem começar com um (traço) ou um número.

    índice

19. Como defino e escrevo uma classe ?

    Classe é um seletor CSS aplicável a um ou mais elementos
    HTML ou a instâncias de um ou mais elementos HTML os quais serão
    estilizados segundo as regras CSS declaradas na classe.

    Por exemplo:

           
    .minhaclasse {color: #f00;}
    

    O nome da classe você atribui ("inventa") seguindo umas regrinhas que veremos adiante.

    A classe denominada minhaclasse define a
    cor vermelha (#f00) para as letras do elemento onde ela for aplicada.
    Notar que um seletor do tipo classe tem em sua sintaxe um
    . (ponto) antes do nome da classe.

           
    <p class="minhaclasse">
    	Aqui o texto do parágrafo..bla...bla...
    </p>
    
    <h3 class="minhaclasse">
    	Aqui o texto do cabeçalho...
    </h3>
    

    A regra mostrada define a cor vermelha para o parágrafo e para o cabeçalho.

    E aqui umas regrinhas para escolha do nome da classe e sua sintaxe:

    Repito e enfatizo que você deve colocar um
    . (ponto) imediatamente antes do nome da classe. O nome da classe
    poderá ser composto por letras de a-z, ou A-Z, números
    de 0-9, underscore, hífen, caracter de escape, caracter Unicode
    (161-255), bem como qualquer caracter Unicode numérico.

    Nomes de classe no podem começar com traço ou número.

    É de boa norma (não obrigatório) escolher-se o
    nome da classe pela sua função e não pela sua aparência.
    Por exemplo: .cor_rodape é preferivel
    a .rodape_verde Se no futuro você resolve
    mudar a cor no rodapé de verde para vermelho vai ficar esquisito
    não é?

    Segundo CSS1 apenas uma classe pode ser atribuída a um seletor.
    CSS2 permite que você atribua mais de uma classe a um seletor.

    índice

20. O que são seletores tipo pseudo-elementos?

    Pseudo-elementos são usados em CSS para adicionar efeitos especiais
    a um seletor ou a parte de um seletor. Eles não são elementos
    HTML.

           
    p:fist-line { font-size:160%;}
    h3:first-letter { color:#000;}
    

    Pseudo-elementos são separados dos seletores por : dois-pontos como mostrado acima.

    Os pseudo-elementos em CSS1 são os dois mostrados no exemplo
    acima:

    :first-line que estiliza a primeira linha
    de uma frase.

    :first-letter que estiliza a primeira letra
    de uma palavra.

    Em CSS2 temos ainda os pseudo-elementos :before
    e : after

    Pseudos elementos podem ser combinados com classes. Observe abaixo:

           
    p.generica:first-letter { 
    	font-style: italic;
    	}
    

    Nessa regra CSS a primeira letra dos parágrafos que pertencem a classe generica,
    será em itálico.

    índice

21. O que são
    seletores tipo pseudo-classes?

    Pseudo classes são usadas em CSS para adicionar efeitos especiais
    a um seletor. Elas não são elementos HTML. As pseudo-classes
    em CSS1 são definidas apenas para o elemento HTML
    a (<a> </a>) conforme abaixo:

    :link que estiliza links não visitados.

    :visited que estiliza links visitados.

    :hover que estiliza links com o ponteiro
    do mouse em cima.

    :active que estiliza links ativos (clicados).

    Nota: Em CSS2 temos ainda as pseudo-classes :first-child
    e :lang

           
    a:link {
    	background: #000; 
    	color: #fff;
    	} 
    a:visited {
    	background: #ff0; 
    	color: #000;
    	} 
    a:hover {
    	background: #ffc; 
    	color: #036;
    	} 
    a:active {
    	background: #000; 
    	color: #0f0;
    	}
    

    Pseudos-classes podem ser combinadas com classes. Observe abaixo:

           
    a.topo:link {
    	background: #000; 
    	color: #fff;
    	} 
    a.topo:hover {
    	background: #fff; 
    	color: #000;
    	} 
    

    índice

22. O que é seletor
    tipo ID?

    Seletor tipo ID é um identificador individual associado a UM E SOMENTE
    UM elemento HTML no documento. Não se pode ter mais de um elemento
    HTML com a mesma ID, ao contrário das classes, que podem ser
    aplicadas a vários elementos HTML em um mesmo documento.

    A sintaxe
    para o seletor ID é o caracter # ,
    seguido de um nome que você "inventa". Este nome pode
    conter letras de a-z, A-Z, dígitos 0-9, espaço, hífen,
    ou caracter de escape. Caracteres Unicode 161-255, bem como qualquer
    caracter Unicode de código númerico, contudo não
    podem começar com um (traço) ou um número.

    Por exemplo:

           
    
    #menu {
    color: #000;
    background:#fff;
    }
    <div id="menu">
    </div>
    

    A regra mostradsa estiliza o DIV #menu

    índice

23. O que é seletor
    de atributo?

    Seletor de atributo é aquele que se refere a um atributo do
    elemento HTML, podendo ser definido de quatro maneiras distintas:

    1-) referência ao atributo do elemento;

           
    img[width] {
    	border: 2px solid #FF0000;
    	}
    

    A regra CSS mostrada coloca bordas de 2px de cor vermelha nas imagens para as quais tenha sido definido o atributo width.

    2-) referência ao atributo e seu valor;

           
    img[width="200px"] {
    	border: 2px solid #FF0000;
    	}
    

    A regra CSS mostrada coloca bordas de 2px de cor vermelha nas imagens para as quais tenha sido definido o atributo width com um valor igual a 200px.

    3-) referência ao atributo e a um de seus valores.

           
    p[class~=cor] {
    	border: 2px solid #FF0000;
    	}
    

    Coloca bordas de 2px de cor vermelha nos parágrafos cujo atributo class contenha a palavra cor
    isoladamente ou como parte de uma lista de valores separados por espaço.

    Observe a marcação a seguir.

     
    <p class="fundo cor dest">Parágrafo 1</p>      
    <p class="fundo dest cor_um">Parágrafo 2</p>      
    <p class="cor">Parágrafo 3</p>      
    

    A regra CSS mostrada anteriormente se aplica aos parágrafos 1 e 3 e não se aplica ao parágrafo 2.

    4-) referência ao atributo e a um de seus valores (outra maneira).

           
    p[lang|=pt] {
    	border: 2px solid #FF0000;
    	}
    

    Coloca bordas de 2px de cor vermelha nos parágrafos cujo atributo lang contenha a sigla pt
    isoladamente ou como parte de uma lista de valores separados por um traço.

    Observe a marcação a seguir.

     
    <p lang="pt-br">Parágrafo 1</p>      
    <p lang="pt">Parágrafo 2</p>      
    <p lang="en-gb">Parágrafo 3</p>      
    

    A regra CSS mostrada anteriormente se aplica aos parágrafos 1 e 2 e não se aplica ao parágrafo 3.

    índice

24. O que é seletor-filho?

    Seletor-filho é aquele contido dentro de outro elemento
    HTML (chamado de seletor-pai).

           
    #auxiliar > p {
    	font-size:14px;
    	} 
    

    Esta regra CSS estabelece tamanho de fonte de 14px para textos nos parágrafos que estão dentro da #auxiliar. Parágrafos-filhos de #auxiliar

    índice

25. O que é seletor
    descendente?

    Seletor descendente (ou contextual) é aquele que se refere a uma ocorrência
    especifica de um elemento HTML. A sintaxe para definir um seletor
    descendente é uma string formada por seletores individuais separados
    por um espaço em branco. A regra é aplicável ao
    último elemento da string (que satisfaz a sequência da
    string ). Os exemplos abaixo esclarecem os seletores descendentes.

    Por exemplo:

           
    p span {color:#f00;} /* aplica-se a span dentro de um parágrafo. 
                             Não vale para span dentro de um h2 por exemplo. */
            
    ul li a {font-size:12px;} /* aplica-se a um link dentro de um 
                              item de lista de uma lista não ordenada.*/
    

    índice

26. O que é propriedade CSS?

    Propriedade CSS é a característica a ser estilizada pela
    regra CSS. Por exemplo: cor do fundo (background-color ), tamanho das
    letras (font-size ), etc…A cada propriedade deve corresponder um ou
    mais valores e ao conjunto propriedade mais valor(es) chamamos de declaração
    CSS

    índice

27. O que
    é propriedade CSS em declaração única?

    Algumas das propriedades CSS (por exemplo: background, font, padding, border, etc) permitem que se defina mais de um valor na mesma declaração
    CSS. Regras que se valem desta permissão são ditas em
    declaração única.

    Por exemplo:

           
    p {
    	font-weight: bold;  
    	font-style: italic;  
    	font-variant: small-caps;
    	font-size: 16px;
    	font-family: sans-serif;
    	} 
    

    A regra CSS mostrada que estiliza a propriedade font de um parágrafo
    pode ser escrita em declaração única conforme mostrado
    a seguir.

           
    p {font: bold italic small-caps 16px sans-serif;}

    Se estiver especificada a propriedade line-height, esta poderá
    também ser inserida na declaração única
    logo após o tamanho da fonte, como mostrado abaixo para uma line-height de 20px

           
    p {
    font:bold italic small-caps 16px/20px sans-serif;
    }

    Para definir em declaração a propriedade font é necessário que seja definido pelo menos os valores para o tamanho (font-size) e a família da fonte (font-family), nessa ordem. Os outros valores são facultativos sendo que os três primeiros (font-weight, font-style e font-variant) podem ser declarados em qualquer ordem e antes de font-size. O valor para line-height deve vir depois de font-size e dele ser separado por uma barra de data (/).

    índice

28. O que é valor CSS?

    Valor é o aspecto a ser assumido pela propriedade CSS declarada.
    A propriedade determina o que vai ser estilizado
    e o valor determina o quanto ou como
    vai ser estilizado.

    Por exemplo:

           
    h1 {background: #00f;}
    

    Na regra CSS mostrada é declarado o valor
    #00f (azul) para a cor de fundo do elemento h1.

    índice

29. O que é
    valor padrão (ou default) de uma propriedade CSS?

    Valor padrão de uma propriedade CSS é o valor atribuido
    por padrão a cada uma das propriedades CSS pela aplicação do usuário (p.ex: o
    navegador). Todas as propriedades CSS têm um valor
    inicial (default). Se nenhuma regra CSS estabelece o valor de uma propriedade
    este valor será tomado como o valor padrão da aplicação
    do usuário. Existe uma folha de estilos nativa no navegador para ser aplicada quando não for definida pelo desenvolvedor, para o documento renderizado, uma folha de estilo.

    índice

30. O que é herança?

    Documentos HTML são hierarquicamente estruturados. Há
    um ancestral, o elemento de nível mais alto do qual os
    demais elementos são descendentes. Os elementos descendentes
    herdam as características do elemento ancestral mais próximo.

    Assim numa folha de estilos as regras de estilo CSS para o elemento
    pai serão herdadas pelos elementos-filhos. Nem todas as propriedades
    são herdadas. A herança é passada do elemento-pai para os filhos e estes se tiverem filhos tambem herdarão
    e assim por diante, seguindo a herança até o elemento
    de menor nível.

    Os estilos herdados podem ser sobrescritos por declarações
    específicas para os elementos-filho.

    índice

31. Onde devo salvar minhas CSS ?

    As CSS podem ser salvas em três lugares diferentes no seu site.

    • dentro da própria tag HTML a estilizar – Diz-se que a aplicação do estilo é inline.
    • dentro da tag <style> colocada na seção head do documento HTML a estilizar – Diz-se que a aplicação da folha de estilo é incorporada.
    • em um arquivo independente salvo com a extensão .css – Diz-se que a aplicação do estilo é por folha de estilos externa.

    índice

32. O que é estilo inline?

    Diz-se que o estilo é inline quando as regras de estilo são
    declaradas dentro da própria tag HTML, com o uso do atributo
    style. As regras de estilo são aplicadas
    exclusivamente naquele elemento HTML. Este tipo de declaração
    retira toda a flexibilidade das CSS uma vez que você terá que agir diretamente na tag HTML se desejar fazer uma mudança de estilos, seu uso deve ser evitado ou no máximo restrito a um ou poucos documentos.

    Por exemplo:

           
    <p style="text-indent: 10px;">Parágrafo com recuo de 10px</p> 
    

    índice

33. O que é folha
    de estilo incorporada?

    Folha de estilo incorporada é uma folha de estilo anexada a
    um só documento HTML. As regras de estilo são válidas
    tão somente para aquele documento específico. A folha
    de estilo é especificada dentro da seção head do documento
    e declarada como conteúdo da tag <style>.

    Por exemplo:

           
     
    <head>
    <style type="text/css">
    p {text-indent: 10px;}
    </style>
    </head> 

    índice

34. O que é folha
    de estilo externa?

    Folha de estilo externa é um arquivo que pode ser gerado em
    qualquer editor de texto, e salvo com extensão .css,
    contendo regras de estilo e que pode ser lincado a um
    ou vários documentos HTML. Esta é sem dúvida a
    maneira mais eficaz para se formatar todo um site, bem como mudar
    sua aparência parcial ou globalmente, pois a simples edição
    de um só arquivo fará o efeito.

    O arquivo é linkado ao documento HTML com uso da tag <link> colocada dentro da seção head do documento. Os arquivos que contém
    as regras de estilo ou seja a folha de estilos devem ter a extensão
    .css . Por exemplo: meu_estilo.css

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

    índice

35. Posso usar estilos inline, incorporados e externos em um mesmo documento?

    Sim, a existência dos três tipos de folhas de estilos em um mesmo documento não sofre qualquer restrição, porém você deve estar ciente do "efeito cascata" das folhas de estilos, para que os efeitos que você pretende com suas CSS estejam declarados na folha certa.

    índice

36. O que é folha de estilo
    importada?

    É uma folha de estilos para ser importada por um ou mais documentos
    HTML com a vantagem de poder ser combinada com outras folhas de estilo.
    Isto permite que se crie uma folha de estilos contendo regras gerais
    para todos os documentos e outras tantas folhas mais específicas
    contendo regras válidas para alguns documentos apenas, ou mesmo
    para alguns elementos específicos os quais requerem declarações
    de estilo adicionais.

    A sintaxe para importar folhas de estilos é através da
    diretiva @import dentro do
    elemento <style>. A diretiva @import deve ser
    colocada antes de qualquer outra declaração
    de estilo contida na seção head do documento. Se mais de uma folha de estilo
    for importada elas respeitarão o "efeito cascata",
    isto é: a prioridade 1 é para a declaração
    escrita em último lugar na seção head do documento, a prioridade 2
    para a penúltima e assim sucessivamente.

    Por exemplo:

           
    <head>
    <style type="text=css">
    	@import url(../folhaparcial_1.css); 
    	@import url(../folhaparcial_2.css);
    </style> 
    <link rel="stylesheet" href="regras_gerais.css" 
    </head>
    

    índice

37. Como fazer layouts alternativos para meu site ?

    Para possibilitar aos seus visitantes a escolha de uma layout ou mesmo cores diferentes para navegar no seu site, você deverá primeiramente criar as CSS para os diferentes layouts.

    Em seguida disponibilizar na página botões ou links para acionar os layouts. O clique nestes botões ou links acionará um código javascript que chamará uma das CSS criadas. Ver respostas a seguir.

    Nota: O código Java Script que faz funcionar as CSS alternativas foi desenvolvido por um inglês chamado Paul Sowden e é mundialmente utilizado por desenvolvedores e projetistas CSS. Você encontra o código e uma explicação completa das folhas alternativas neste Tutorial.

    índice

38. O que é folha
    de estilo alternativa?

    Uma folha de estilo alternativa é aquela projetada para aplicar
    um estilo alternativo, a ser usado no lugar do estilo principal declarado
    como persistente e/ou preferido e que está aplicado ao documento.

    Estas folhas de estilo permitem ao usuário escolher um estilo
    alternativo para ser aplicado ao documento – uma maneira bastante conveniente
    de se especificar estilos diferenciados para diferentes tipos de mídia.

    Nota: Cada grupo de folhas alternativas deve
    ser especificado com um atributo title único. Por
    exemplo: a sintaxe para link a uma folha de estilo alternativa é
    conforme abaixo:

           
    <link rel="alternate stylesheet" href="meu_estilo3.css" 
    type="text/css" title="alternativo3" media=screen>
    <link rel="alternate stylesheet" href="meu_estilo4.css" 
    type="text/css" title="aternativo4" media=print>
    

    índice

39. O que é folha
    de estilo persistente?

    Uma folha de estilo diz-se persistente quando é uma folha de
    estilo default do documento. Ela pode ser desabilitada em favor da folha
    de estilo alternativa. A sintaxe para link a uma folha de estilo persistente
    é conforme abaixo:

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

    índice

40. O que é folha
    de estilo preferida?

    Uma folha de estilo diz-se preferida quando é uma folha de
    estilo default do documento e é identificada como tal quando
    declarado o atributo title no elemento link. Ela pode ser
    desabilitada em favor da folha de estilo alternativa. Poderá
    existir uma só folha de estilo deste tipo no documento. A sintaxe
    para link a uma folha de estilo preferida é conforme abaixo:

           
    <link rel="stylesheet" href="meu_estilo2.css" 
    type="text/css" title="preferido">

    índice

41. Como combinar
    múltiplas folhas de estilo em uma só?

    Para aplicar várias folhas de estilo (cada uma contendo um
    conjunto diferente de regras de estilo) em um documento basta dar o
    mesmo nome ao valor do atributo title do elemento link.
    As folhas de estilo assim agrupadas serão aplicadas ao documento
    como folhas do tipo preferida. A sintaxe para link a um conjunto de
    folhas de estilo assim combinadas é conforme abaixo:

           
    <link rel="stylesheet" href="principal.css" title="combinada">
    <link rel="stylesheet" href="estilo_letras.css" title="combinada">
    <link rel="stylesheet" href="estilo_tabelas.css" title="combinada"> 
    

    índice

42. O que são elementos
    inline?

    São os elementos HTML que não causam uma quebra de
    linha no fluxo da apresentação. Podem estar contidos
    em elementos de bloco ou mesmo em outros elementos inline. Não
    podem conter elementos de bloco.

    São elementos inline da HTML 4.0.
    
    em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym, tt, i, b, u, s, strike, big, small, sub, sup, a, img, object, applet, font, basefont, br, script, map, q, span, bdo, iframe, input, select, textarea, label, button, ins, del.

    índice

43. O que são elementos nível de bloco?

    São os elementos HTML que causam uma quebra de linha no fluxo
    da apresentação. Podem estar contidos em outros elementos
    de bloco. Não podem estar contidos em elementos inline. Podem
    conter tanto elementos inline como elementos de bloco.

    São elementos nível de bloco do HTML 4.0:
    
    p , h1, h2, h3, h4, h5, h6, ul, ol, dir, menu, pre, dl, div, center, noscript, noframes, blockquote, form, isindex, hr, table, fieldset, address.

    índice

44. O que são elementos
    pai e filho?

    Elemento-pai é aquele que contém outro elemento (este
    chamado de elemento-filho).

           
    <p>Aqui o texto de <span>um</span> parágrafo</p>
    

    No exemplo mostrado p é o elemento-pai e span o elemento-filho.

    Caso não seja especificado, o elemento-filho herda as propriedades
    do elemento pai. Ver herança.

    índice

45. Posso usar
    folhas de estilo e declarações de estilo no HTML em um mesmo
    documento?

    Sim. As folhas de estilo e os estilos declarados no HTML, serão
    ignorados naqueles navegadores que NÃO dão suporte para
    CSS. As declarações de estilo no HTML devem ser evitadas ou reduzidas ao máximo.

    índice

46. Quem tem precedência:
    atributos HTML ou propriedades CSS?

    Propriedades CSS têm precedência sobre atributos
    HTML. Se ambos (CSS e atributos HTML) estão especificados, os
    atributos HTML serão exibidos naqueles navegadores que NÃO
    dão suporte para CSS, no entanto não terão efeito
    algum em navegadores com suporte para CSS.

    índice

47. Pode CSS ser aplicada a
    um documento não HTML?

    Sim, CSS pode ser aplicado a qualquer documento de formato estruturado
    como por exemplo um documento XML.

    índice

48. Como posso centrar
    um elemento nível de bloco?

    Declare sua largura e ajuste suas margens esquerda e direita para um
    valor auto (automático).

           
    #tudo {
    	width:760px;
    	margin-left:auto;
    	margin-right:auto;
    	}
    

    A regra CSS acima centra na tela, qualquer que seja a resolução
    do monitor, um bloco com 760px de largura.

    Nota: Os navegadores Internet Explorer 6 e anteriores não reconhecem
    esta regra. Para contornar isto usamos um artifício (hack) que
    consiste em declarar mais uma regra só para o IE como mostrado
    abaixo:

           
    #tudo {
    	width:760px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center; /* Para o IE */
    	}
    

    índice

49. Devo usar ” ” (aspas)
    ao declarar URL?

    O uso de aspas duplas ou simples ao declarar URL nas folhas de estilo
    é facultativo.

    No exemplo abaixo todas as três formas de declaração
    estão corretas.

           
    #tudo {background-image:url(imagem.gif)}
    #tudo {background-image:url('imagem.gif')}
    #tudo {background-image:url("imagem.gif")}
    

    índice

50. Como retirar o sublinhado
    dos links?

    Retira-se o sublinhado do link com a propriedade text-decoration definida em none.

           
    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:none;}
    a:active {text-decoration:none;}
    
    /* ou usando agrupamento de seletores */
    
    a:link, a:visited, a:hover, a:active {text-decoration:none;}
    

    Mas, cuidado ao retirar o sublinhado dos links. Assegure-se de que
    esta prática não irá tornar seus links pouco identificáveis
    na página. Considere neste caso declarar um fundo colorido para
    o link.

           
    a:link {
    	text-decoration:none;
    	background-color:#FFFFCC;
    	}		
    

    A regra CSS mostrada retira o sublinhado e coloca um fundo colorido no link.

    índice

51. Como estilizar
    links de maneira diferente na mesma página?

    Criando-se classes para cada uma das maneiras que se queira estilizar.

           
    a.maneira1 {
    	text-decoration:none;
    	background-color:#f00;
    	}
    a.maneira2 {
    	text-decoration:underline;
    	background-color:#00f;
    }
    a.maneira3 {
    	text-decoration:overline;
    	background-color:#0f0;
    }
    /* E na marcação HTML a declaração das classes */
    <a class="maneira1">Meu link_1</a>
    <a class="maneira2">Meu link_2</a>
    <a class="maneira3">Meu link_3</a>
    

    índice

52. Como declarar fontes cujo nome é composto por mais de uma palavra?

    Nomes de fontes cujo nome é composto por mais de uma palavra devem ser declarados entre ‘ ‘ (aspas simples) ou " " (aspas duplas)

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

    índice

Boa sorte.