Cascading Style Sheets (CSS) são classificados em quatro tipos diferentes (ou estilos). Quando você entender como esses quatro tipos diferentes trabalhar, você poderá denominar suas páginas web de forma mais eficiente.

Video: CSS3: Muito além das folhas de estilo em cascata - Parte 4

Para manter seu CSS organizada, utilize comentário CSS tags para identificar as diferentes secções de CSS dentro de sua folha de estilo. Por exemplo, você pode ter uma seção para os estilos de cabeçalho, para os estilos da barra lateral, para os estilos de navegação e para os estilos de rodapé. comentários CSS usar o / * ... * / sintaxe:

/ * Este é um comentário * /

estilo de classe (aka estilo personalizado)

estilos de classe podem ser aplicadas seletivamente a qualquer elemento HTML usando o class =“nome personalizado“ sintaxe. Por exemplo, você pode criar um estilo de classe chamada realçar que tem uma cor de fundo amarelo brilhante:

.destaque {background-color: # FFFF33-}

Para aplicar este estilo para qualquer conteúdo, você simplesmente usar o atributo de classe:

Video: CSS3: Muito além das folhas de estilo em cascata - Parte 3

 class ="realçar"gt;Isso é realmente importante

identidade

estilos de identificação são aplicadas automaticamente a um elemento HTML na página com o mesmo ID. Por exemplo, se você quiser adicionar uma tag para manter o seu conteúdo da barra lateral, você daria esse recipiente um ID semântica, como a barra lateral:

#sidebar {background-color: # 66CCFF-}

Seu código pode então algo parecido com isto:

id ="Barra Lateral"gt;
Custom Web Design Services
...

etiqueta

estilos de tags permitem que você redefinir automaticamente o estilo e posicionamento de qualquer tag HTML existente, como corpo, p, h1, ou li. Por exemplo, você pode definir os estilos de fonte para todas as suas

marcas em todo o seu site ou dentro de uma seção específica:

h1 {font-family: Arial, Helvetica, sans-serif-font-size: 1.2em-font-weight: bold-color: # 8c9292-text-transform: uppercase-}

Composto

estilos compostos também são aplicados automaticamente a um elemento de base na sua localização dentro da página, tal como todas as etiquetas dentro do com o ID de barra lateral, que fica no interior de um contentor principal com o ID de embrulho:

#wrapper #sidebar h1 {color: # CC3300-font-family: "Times New Roman", Georgia, Serif-}