Cores HEX
Parte da seção Styling with CSS do Journey de HTML da Coddy. Lição 26 de 76.
Cores HEX são uma forma de especificar cores usando valores hexadecimais. Um código de cor hexadecimal é um código de seis dígitos precedido por um símbolo de hash (#) que representa a quantidade de luz vermelha, verde e azul que compõe uma cor.
Cada par de dígitos no código representa a intensidade de uma dessas cores primárias, variando de 00 (nenhuma intensidade) a FF (intensidade total). As cores hexadecimais oferecem uma ampla variedade de opções de cores e são amplamente utilizadas no design de sites.
Veja a sintaxe básica para usar cores hexadecimais em CSS:
selector {
color: #RRGGBB;
background-color: #RRGGBB;
}Por exemplo:
p {
color: #FF0000; /* Red */
background-color: #00FF00; /* Green */
}Você também pode usar a notação abreviada para cores hexadecimais quando os dois dígitos de cada par forem iguais. Por exemplo:
p {
color: #F00; /* Red (equivalent to #FF0000) */
background-color: #0F0; /* Green (equivalent to #00FF00) */
}Desafio
FácilVocê recebeu um documento HTML com dois títulos (<h1> e <h2>) e um parágrafo (<p>). Sua tarefa é usar códigos de cor hexadecimal para background colors. Siga as etapas abaixo:
- Escreva uma regra CSS para o elemento
<h1>. Defina o background color como electric purple usando a cor hexadecimal#BF00FF. - Escreva uma regra CSS para o elemento
<h2>. Defina o background color como neon green usando#39FF14. - Escreva uma regra CSS para todos os elementos
<p>. Defina o background color como light gray usando#D3D3D3.
Experimente você mesmo
<html>
<head>
<title>HEX Colors</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This heading has an electric purple background!</h1>
<h2>This heading has a neon green background.</h2>
<p>This paragraph has a light gray background.</p>
</body>
</html>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
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ão3Seletores 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íveisPratique por conta própria: Playground de Web