CMS Básico com PHP, HTML e CSS

Parte 1 - Conhecendo as nossas ferramentas de trabalho

Aula 3.2 - Aplicando estilos CSS

[voltar] [índice]

Existem três formas de aplicar estilos CSS:

A tag 'style'

Utilizada para aplicar estilos CSS apenas ao arquivo HTML corrente.

<head>
    ...
    <style>
    
    Aqui entram os estilos CSS...
    
    </style>
    ...
</head>

O atributo 'style' das tags

Utilizado para aplicar estilos CSS apenas ao elemento do HTML.

<p style="Aqui entram os estilos CSS...">Um parágrafo.</p>

A tag 'link'

Utilizada para incluir arquivos de recursos externos no HTML, inclusive arquivos que contenham estilos CSS.

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

É possível linkar vários arquivos CSS a um mesmo arquivo HTML.

Precedência

A leitura do HTML é sequencial do início para o fim do documento e, portanto, a estilização também será. Ou seja: as definições de estilos CSS que aparecerem por último terão precedência sobre as anteriores.

Sintaxe do CSS

As definições de estilos são feitas a partir de conjuntos de regras compostos por um seletor e um bloco de declarações:

seletor {  <------------------+
    propriedade-1: valor;     |
    propriedade-2: valor;     +--- Bloco de declarações
    ...                       |
    propriedade-n: valor;     |
}  <--------------------------+

Seletor

Aponta para tags HTML e os valores nos atributos class e id que queremos estilizar.

Bloco de declarações

Delimitado por chaves, contém uma ou mais declarações terminadas com ponto-e-vírgula (;).

Propriedade

É o nome da propriedade de estilo que queremos aplicar ao seletor.

Valor

É a especificação dos atributos da propriedade.

Tipos de seletores

Elemento HTML

Corresponde ao nome da tag que será estilizada.

Valor do atributo 'id'

O atributo id serve para identificar de forma única alguma tag HTML a partir de um nome. Por exemplo:

<p id="destaque">Parágrafo em destaque.</p>

Desta forma, podemos estilizar especificamente o parágrafo com o atributo id="destaque" a partir de seu nome de identificação com o seletor #destaque.

Valor do atributo 'class'

O atributo class pode ser utilizado para especificar grupos de tags que irão compartilhar estilos em comum. No CSS, o valor da classe poderá ser utilizada como um seletor:

.nome_da_classe { propriedades... }

Seletor universal (*)

Aplica as propriedades definidas a todos os elementos do HTML.

Seletores com pseudo-classes

Utilizadas para apontar para um elemento de acordo com o seu estado. Por exemplo:

a:hover { propriedades... }

Agrupamento de seletores

Nós podemos associar vários seletores a um mesmo bloco de propriedades separando-os por vírgulas. Por exemplo:

h1, h2, h3 { propriedades... }

Hierarquias

Os seletores também podem ser hierarquizados para diferenciar suas localizações. Assim, uma tag p que apareça dentro de uma tag div da classe resumo, por exemplo, poderá ser estilizada de forma diferente de uma outra que apareça dentro de uma div da classe artigo:

.resumo p { propriedades... }
.artigo p { outras_propriedades... }

CSS e design

Uma boa estilização CSS, e aqui eu me refiro ao código, deve ser organizada de forma a seguir os princípios mínimos do design:

A seguir...