CSS Inline
Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 6 de 76.
CSS Inline é um método de adicionar estilos CSS diretamente a um elemento HTML usando o atributo style. Esta abordagem permite aplicar estilos únicos a elementos individuais sem a necessidade de folhas de estilo externas ou internas. Estilos inline são úteis para fazer alterações de estilo rápidas e específicas em um único elemento.
Aqui está a sintaxe básica para usar CSS inline:
<element style="property: value;"></element><element>: O elemento HTML que você deseja estilizar.style: Um atributo que contém as declarações CSS.
property: A propriedade CSS que você deseja definir (ex: color, font-size).value: O valor que você deseja definir para a propriedade (ex: blue, 16px).
Por exemplo:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>Neste exemplo, o elemento de parágrafo possui estilos inline que definem a cor do texto como azul e o tamanho da fonte para 16 pixels. Estes estilos serão aplicados apenas a este elemento de parágrafo específico.
Desafio
FácilVocê recebeu um documento HTML com um elemento de parágrafo. Use CSS inline para estilizar o parágrafo com as seguintes propriedades:
- Defina a cor do texto como "red".
- Defina o tamanho da fonte como "18px".
Confira o exemplo na lição para orientação!
Folha de consulta
Use o atributo style para aplicar CSS diretamente aos elementos HTML:
<element style="property: value;"></element>Exemplo com múltiplas propriedades:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</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 Styling with CSS
4Fundamentos de Texto
Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento de TextoDecoração de TextoDesafio de Recapitulação nº 1Desafio de Recapitulação nº 27Modelo de Caixa Parte 1
O que é o Modelo de Caixa?PaddingMargensBordasLargura e AlturaDesafio de Revisão
3Seletores Básicos
Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção9Flex Box
O que é Flex Box?Flex DirectionJustify ContentAlign ItemsO Centro PerfeitoDesafio de Flex Box12Fundamentos do Design Responsivo
O que é Design Responsivo?Meta Tag ViewportLayouts FluidosUnidades de ViewportFundamentos de Media QueriesImagens Flexíveis