Crie um elemento <div> que represente um cartão com:
Visualize abaixo o cartão com essas propriedades aplicadas:
Este é o conteúdo do cartão básico. Note como o padding de 15px em todos os lados cria um espaço interno entre o texto e a borda azul de 2px.
Crie um elemento que simule um botão com:
Visualize abaixo o botão flutuante:
Botão FlutuantePasse o mouse sobre o botão para ver o efeito de cursor.
Crie um <div> grande com:
Visualize abaixo o container centralizado:
Este é um container centralizado. Ele ocupa 80% da largura disponível e está centralizado horizontalmente na página graças à propriedade margin: 0 auto. A altura mínima é de 300px, mas se o conteúdo for maior, o container se expandirá.
A borda tracejada ajuda a visualizar os limites do container. Este é um exemplo de texto adicional para demonstrar como o container se comporta com conteúdo que excede a altura mínima.
Crie um elemento com:
Visualize abaixo a moldura irregular:
Este elemento tem bordas arredondadas diferentes em cada canto, criando uma forma irregular interessante. Além disso, possui margens externas assimétricas: 10px no topo, 20px à direita, 30px abaixo e 40px à esquerda.
Note como o elemento está deslocado em relação aos outros elementos da página devido a essas margens diferentes.
Observe o espaço desigual ao redor do elemento devido às diferentes margens aplicadas.
Crie um <div> de 200px x 200px com:
Visualize abaixo o bloco com efeito 3D:
Este bloco tem uma borda "double" (tripla) e uma sombra deslocada que cria a ilusão de que está flutuando acima da página. A sombra de 8px para baixo e para a direita com 0px de blur cria um efeito de profundidade.
Selecione elementos de parágrafo e lista para:
Compare um parágrafo normal com um parágrafo resetado:
Este é um parágrafo normal. Ele tem margens e padding padrão aplicados pelo navegador. Note o espaço acima e abaixo do parágrafo, que são as margens padrão.
Este parágrafo foi resetado: margin: 0; padding: 0; border: none; e width: 400px;. Note como ele não tem mais o espaçamento padrão e ocupa exatamente 400px de largura.
Crie um <div> com:
Visualize abaixo o círculo perfeito:
O elemento acima é uma div quadrada de 100x100px que foi transformada em um círculo usando border-radius: 50%. A margem de 20px em todos os lados cria um espaçamento uniforme ao redor do círculo.
Crie um elemento <blockquote> com:
Visualize abaixo a citação com bordas personalizadas:
"Esta é uma citação com bordas personalizadas. A borda esquerda é sólida e grossa (5px), enquanto a borda inferior é pontilhada e fina (2px). As bordas superior e direita foram removidas com 'none'. O padding-left de 15px afasta o texto da borda esquerda, melhorando a legibilidade."
- Exemplo de formatação de citação
Crie um <div> com:
Visualize abaixo o card com sombra interna:
Este card tem uma sombra interna que cria a sensação de profundidade ou depressão. A sombra projetada para dentro do elemento (usando "inset") faz com que pareça que o conteúdo está "afundado". A margem de 50px apenas no topo cria um espaçamento acima do elemento, mas não nas laterais ou abaixo.
Note que este elemento tem apenas margem superior (50px), mas não tem margem nas laterais ou inferior.
Crie dois elementos <div> irmãos com:
Visualize abaixo o layout de duas colunas:
Esta coluna ocupa 30% da largura disponível. Tem padding de 10px em todos os lados, uma borda fina cinza e altura fixa de 400px.
Usamos float: left para posicionar as colunas lado a lado.
Esta coluna ocupa 70% da largura disponível. Juntas, as duas colunas somam 100% da largura do container pai.
Ambas as colunas têm a mesma altura (400px), o que cria um layout uniforme.
O padding de 10px em ambas as colunas cria um espaço interno consistente entre o conteúdo e as bordas.
Este é um exemplo básico de layout de duas colunas usando apenas propriedades de largura e float. Em layouts modernos, técnicas como Flexbox ou CSS Grid são mais comumente usadas, mas o float ainda é uma técnica válida para certos cenários.
Observe como as duas colunas se alinham lado a lado, ocupando 100% da largura total (30% + 70%).