Sintaxe CSS

Parte da seção Styling with 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 : (ex: color:green;). Cada declaração deve ser terminada com um ponto e vírgula (;).

Propriedade: O atributo de estilo que você deseja alterar (ex: color, font-size).
Valor: O valor que você deseja definir para a propriedade (ex: 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ácil

Você 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.

Folha de consulta

A sintaxe CSS consiste em um seletor e um bloco de declaração:

Seletor: Especifica o elemento HTML a ser estilizado (ex: p, div, img)
Bloco de Declaração: Contém declarações entre chaves {}
Declaração: Propriedade e valor separados por dois-pontos :, terminados com ponto e vírgula ;
Propriedade: O atributo de estilo a ser alterado (ex: color, font-size)
Valor: O valor para a propriedade (ex: blue, 16px)

p {
    color: blue;
    font-size: 16px;
}

Experimente você mesmo

<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Styling with CSS

1Introdução

O que é CSS?Sintaxe CSSComentários CSS A Tag Head A Tag Title

4Fundamentos de Texto

Cor do Texto Família da Fonte Tamanho da Fonte Peso da Fonte Alinhamento de Texto Decoração de Texto Desafio de Recapitulação nº 1 Desafio de Recapitulação nº 2

7Modelo de Caixa Parte 1

O que é o Modelo de Caixa?Padding Margens Bordas Largura e Altura Desafio de Revisão

10Formulário de Login

Corpo Container do Formulário

Input

Botão

13Página Web de Tonga

Menu de Navegação Cabeçalho de Boas-vindas

2Adicionando CSS

CSS Inline CSS Interno CSS Externo Desafio de Estilização Básica

5Cores e Planos de Fundo

Cor de Fundo Cores HEX Cores RGB Transparência com RGBA Desafio de Revisão nº 1

8Modelo de Caixa Parte 2

Box Sizing Border Radius Overflow Box Shadow Desafio de Revisão

11Técnicas de Layout

Elementos Block vs Inline Fundamentos de Posicionamento Posicionamento Relativo Posicionamento Absoluto Posicionamento Fixo Fundamentos de Z-Index Desafio de Recapitulação

14Desafios Finais

Organizar Itens Lista de Filmes Convite de Casamento Notificação Flutuante

3Seletores Básicos

Introdução aos Seletores Seletor de Tipo Seletor de Classe Seletor de ID Seletores de Grupo Seletor Universal Desafio de Seleção

6Cardápio de Café

Fundamentos de Tipografia Estilização de Texto

Cores e Planos de Fundo

9Flex Box

O que é Flex Box?Flex Direction Justify Content Align Items O Centro Perfeito Desafio de Flex Box

12Fundamentos do Design Responsivo

O que é Design Responsivo?Meta Tag Viewport Layouts Fluidos Unidades de Viewport Fundamentos de Media Queries Imagens Flexíveis