Sintaxe do CSS
Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 2 de 76.
No CSS, sintaxe refere-se ao conjunto de regras que definem como o código CSS deve ser escrito. Compreender a sintaxe do CSS é essencial para criar folhas de estilo bem estruturadas e funcionais. Uma regra CSS básica consiste em um seletor e um bloco de declaração.
Aqui está uma explicação simples:
- Seletor: Especifica o elemento HTML que você deseja estilizar (ex: p, div, img).
- Bloco de Declaração: Contém uma ou mais declarações entre chaves
{}.
- Declaração: Consiste em uma propriedade e um valor, separados por dois-pontos
:(por exemplo, color:green;). Cada declaração deve terminar com um ponto e vírgula (;).
- Propriedade: O atributo de estilo que você deseja alterar (por exemplo, color, font-size).
- Valor: O valor que você deseja definir para a propriedade (por exemplo, blue, 16px).
Por exemplo:
p {
color: blue;
font-size: 16px;
}Neste exemplo, p é o seletor, visando todos os elementos de parágrafo. O bloco de declaração contém duas declarações: uma definindo a cor do texto como azul e a outra definindo o tamanho da fonte como 16 pixels.
Desafio
FácilVocê recebeu um código HTML com um elemento de parágrafo e uma regra CSS para esse parágrafo. Modifique a regra CSS para alterar a cor do texto para red.
Experimente você mesmo
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Estilização com CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento do TextoDecoração do TextoDesafio de Revisão nº 1Desafio de Revisão nº 27Modelo de Caixa — Parte 1
O que é o Modelo de Caixa?PreenchimentoMargensBordasLargura e AlturaDesafio de Revisão
8Modelo de Caixa — Parte 2
Dimensionamento da CaixaRaio da BordaTransbordamentoSombra da CaixaDesafio de Revisão3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é uma Flex Box?Direção da Flex BoxJustificar conteúdoAlinhar itensO centro perfeitoDesafio da Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta tag viewportLayouts fluidosUnidades de viewportFundamentos das Media QueriesImagens flexíveisPratique por conta própria: Playground de Web