You are on page 1of 9

A regra CSS e sua sintaxe

seletor { propriedade: valor; }

Seletor: genericamente, o elemento HTML


identificado por sua tag, ou por uma classe,
ou por uma ID, ou etc., e para o qual a
regra ser vlida (por exemplo: <p>, <h1>,
<form>, .minhaclasse, etc...);

Propriedade: o atributo do elemento HTML


ao qual ser aplicada a regra (por exemplo:
font, color, background, etc...).

Valor: a caracterstica especfica a ser


assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde,
etc...)

Exemplos

p{
font-size: 12px; /* ponto-e-vrgula facultativo */
}
body {
color: #000;
background: #fff;
font-weight: bold; /*ponto-e-vrgula facultativo
*/
}

Se o valor for uma palavra composta, dever estar


entre aspas duplas , ou simples :
h3 {
font-family: Comic Sans MS;
}

Para maior legibilidade das folhas de estilo, de boa


prtica usar linhas distintas para escrever cada uma
das declaraes propriedade e seu valor
p{

text-align: right;
color: #f00;
}

Agrupamento de seletores

Seletor Classe

h1, h2, h3, h4, h5, h6 {


color: #0f0;
}

elemento.minhaclasse {
propriedade: valor;
}

Seletor Classe

Chamada HTML

p.cor-um {
color:#000;
}

<p class =cor-um> este pargrafo ser na cor


preta.</p>

p.cor-dois {
color:#0ff;
}

<p class =cor-dois>este pargrafo ser na cor


azul.</p>

Chamada HTML
<p class =cor-um cor-dois>
Aqui o texto do pargrafo.
</p>

O seletor ID
#meuID {
propriedade: valor;
}

You might also like