Uma regraNo CSS
segue uma sintaxe própria que define como será aplicado estilo asite do Maujor tem um ou mais elementos da marcação HTML
de uma páginatutorial sobre CSS muito bom, vou deixar aqui algumas partes relevantes.
A regra, na sua forma mais elementar, é composta de três partes: um seletor, uma propriedade e um valor e CSS tem asua própria sintaxe conforme mostrado a seguire define como o estilo será aplicado aos elementos do HTML:
- seletor: é um elemento da marcação
HTML
identificado pelo seu nome (por exemplo:<p>
,<h1>
,<form>
), pelo nome de uma classe aplicada ao elemento da marcaçãoHTML
(por exemplo:.topo
,.principal
,.menu
), pelo nome de um identificador ID aplicado ao elemento da marcaçãoHTML
(por exemplo:#tudo
,#auxiliar
,#rodape
) ou por qualquer outro identificadorCSS
de elementos ou trechos da marcaçãoHTML
, genericamente denominados de seletoresCSS
. - propriedade: é a propriedade do elemento
HTML
ao qual será aplicada a estilização definida no valor (por exemplo: tamanho da fonte, cor do texto, altura do elemento). - valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, altura igual a 300px)
Ao conjunto propriedade: valor denominamos declaração CSS
.
Na sintaxe de uma regra CSS
, escreve-se o seletor e a seguir a propriedade e o valor separados por dois pontos e colocados entre chaves {
}
.
É possível escrever mais de uma declaração CSS
em uma regra com o objetivo de estilizar-se várias propriedades de um mesmo seletor. Neste caso deve-se usar ponto-e-vírgula (;
) para separar as declarações CSS
constantes da regra CSS
. O ponto-e-vírgula é facultativo quando a regra CSS
for constituída de uma só declaração CSS
e também facultativo após a última declaração CSS
quando houver mais de uma declaração CSS
.
É recomendável que se use, sempre, o ponto-e-vírgula após cada declaração CSS
, pois no caso de futuramente ter que se acrescentar mais declarações na regra CSS
não se corra o risco de esquecer eventual ponto-e-vírgula inicialmente omitido.
- seletor: é um elemento da marcação
HTML
identificado pelo seu nome (por exemplo:<p>
,<h1>
,<form>
), pelo nome de uma classe aplicada ao elemento da marcaçãoHTML
(por exemplo:.topo
,.principal
,.menu
), pelo nome de um identificador ID aplicado ao elemento da marcaçãoHTML
(por exemplo:#tudo
,#auxiliar
,#rodape
) ou por qualquer outro identificadorCSS
de elementos ou trechos da marcaçãoHTML
, genericamente denominados de seletoresCSS
.- propriedade: é a propriedade do elemento
HTML
ao qual será aplicada a estilização definida no valor (por exemplo: tamanho da fonte, cor do texto, altura do elemento).- valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, altura igual a 300px)
Na sintaxe de uma regra
CSS
, escreve-se o seletor e a seguir a propriedade e o valor separados por dois pontos e colocados entre chaves{
}
.É possível escrever mais de uma declaração
CSS
em uma regra com o objetivo de estilizar-se várias propriedades de um mesmo seletor. Neste caso deve-se usar ponto-e-vírgula (;
) para separar as declaraçõesCSS
constantes da regraCSS
. O ponto-e-vírgula é facultativo quando a regraCSS
for constituída de uma só declaraçãoCSS
e também facultativo após a última declaraçãoCSS
quando houver mais de uma declaraçãoCSS
.
Com o agrupamento, aA regra CSS
será aplicada a mais de um seletor, para isso é necessário o uso dabasta utilizar a vírgula(,
). Para agrupar todos os elementos do cabeçalho de níveis 1 e 2 os parágrafos e o elemento com a classe .box
, e deixá-los na cor verde, pode-se fazer da seguinte forma:
Caso você queria criar uma nova regra, você pode "inventar" um nome e defini-lo como valor a ser atribuído ao atributo class
(classe) do elemento HTML
. O nome "inventado" será o seletor para aplicar declarações CSS
. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML
. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento da HTML
, usando classes diferentes para cada um deles.
Essa sintaxe é mostrada no código abaixo. Você coloca o elemento HTML
mais um nome qualquer que você "inventou" precedido de ponto(.
):
A grande diferença entre o seletor id e o de classe é a unicidade. Ou seja, um seletor id de determinado nome só pode ser definido a um e somente um elemento
HTML
dentro do documento.
A grade diferença entre o seletor id e o de classe éÉ a unicidade. Ou sejamesma ideia da classe, um seletor id de determinado nome só pode ser definido a um e somente um elemento HTML
dentro do documento.
Você pode "inventar" um nome e com ele criar um id que seráporém o seletor para definir a regra CSS
. Um determinado id só pode ser aplicado a UM elemento HTMLid
.
A sintaxe para o seletor id é mostrada a seguir. Um nome qualquer que você "inventa" precedido do sinal #
("cerquilha"/"tralha"/"jogo-da-velha"):
Você pode inserir comentários nas CSS
para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. Um comentário começaComentários em CSS começam com o sinal /*
e termina com */
: