Seu primeiro trecho CSS em quatro passos
Aprenda a escolher um elemento da página, revisar seu CSS e copiar o resultado.
Não é preciso se cadastrar. Comece por uma página comum, não por chrome:// ou Chrome Web Store. Se o ícone não aparecer, abra o menu de extensões (peça de quebra-cabeça) e fixe o One-Click CSS Copy na barra.
Como copiar os estilos CSS de um elemento
- 01
Abra o site e a extensão
Em uma página HTTP/HTTPS compatível, clique no ícone do One-Click CSS Copy.
- 02
Clique em “Select an element”
Passe o mouse e observe o destaque nos elementos da página.
- 03
Selecione um elemento
Clique no botão, título ou card desejado e confira o CSS computado no painel.
- 04
Clique em “Copy CSS”
Cole no editor, substitua .copied-element e use “Inspect another” se quiser repetir.
Uma boa primeira experiência
Teste em um botão simples. Veja a cor, o padding e o border-radius; depois compare com a aba Computed do DevTools. Assim fica claro o que entrou no trecho filtrado.
.copied-element {
background-color: #2563eb;
color: #ffffff;
padding: 12px 18px;
border-radius: 10px;
font-weight: 600;
}Exemplo ilustrativo · os valores variam conforme o elemento
Vale lembrar
A versão gratuita permite cinco cópias bem-sucedidas por dia. Se a área de transferência for bloqueada, selecione e copie o texto manualmente. Escape ou Cancel encerram a seleção.
Grátis: 5 cópias de CSS concluídas por dia
Se algo não funcionar
A seleção não aparece
Confirme que está em uma página HTTP/HTTPS comum e tente de novo.
O estilo ficou diferente
Revise o contêiner pai, as fontes, os recursos externos e o seletor.
Quero escolher outro elemento
Clique em “Inspect another” no painel de resultado.