Sintaxe
A sintaxe CSS é constituida de três partes: um seletor (selector), um propriedade (property) e um valor (value):| selector {property: value} |
| body {color: black} |
| p {font-family: "sans serif"} |
| p {text-align:center;color:red} |
| p { text-align: center; color: black; font-family: arial } |
Agrupamento
Você pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos header (título). Todos os elementos header serão verdes:| h1,h2,h3,h4,h5,h6 { color: green } |
O Seletor class (classe)
Com o seletor class você pode definir diferentes estilos para o mesmo tipo de elemento HTML. Digamos que você gostaria de ter dois tipos de parágrafos em seu documento: uma parágrafo alinhado à direita, e um parágrafo centralizado. Eis como você pode fazer isso com estilos:| p.right {text-align: right} p.center {text-align: center} |
|
|
| .center {text-align: center} |
|
O seletor id
O seletor id é diferente do seletor class selector! Enquanto um seletor class pode ser aplicado a VÁRIOS elementos numa página, um seletor id sempre se aplica a somente UM elemento.Um atributo ID deve ser único dentro do documento.
A regra de estilo abaixo será aplicada a um elemento p que tem seu valor id como "para1":
| p#para1 { text-align: center; color: red } |
| *#wer345 {color: green} |
Algum texto |
| p#wer345 {color: green} |
Algum texto |
Comentários em CSS
Você pode inserir um comentário na CSS para explicar o seu código, o que pode ajuda-lo quando você editar o código fonte numa data posterior. Um comentário será ignorado pelo navegador. Um comentário em CSS começa com "/*", e termina com "*/", assim:| /* Este é um comentário */ p { text-align: center; /* Este é outro comentário */ color: black; font-family: arial } |
