CSS Fundamentos

Esta é uma página web simples desenvolvida em HTML e CSS que demonstra a aplicação dos principais estilos CSS. O site abrange uma variedade de conceitos fundamentais de estilização, incluindo manipulação de cores, tipografia, alinhamento, espaçamento, sombras, bordas e comportamentos de layout. Além disso, explora técnicas de formatação de texto e caixas, com exemplos práticos como controle de dimensões, espaçamento interno e externo, sombras de caixa, e uso de imagens de fundo. Ideal para iniciantes, este projeto serve como um guia visual para aprender e entender os fundamentos do CSS

Pressione Ctrl + U para visualizar o código-fonte da página.

Estilização de Textos

Cor e Tipografia

Este texto tem a cor azul.

Este texto usa a fonte Arial.

Este texto tem tamanho de 18px.

Este texto está em negrito.

Este texto está em itálico.

Este texto está em letras maiúsculas.

Este texto está sublinhado.

Alinhamento e Espaçamento

Este texto está centralizado.

Este texto tem espaçamento de linha de 1.8.

Este texto tem espaçamento entre letras de 3px.

Este texto tem espaçamento entre palavras de 10px.

Este texto tem indentação de 50px na primeira linha.

Este texto está alinhado verticalmente como sobrescrito.

Sombras e Decoração

Este texto tem uma sombra de 2px.

Este texto não quebra em uma nova linha.

Este texto quebra automaticamente quando necessário.

Estilização de Caixas

Dimensões

Esta div tem largura de 200px.
Esta div tem altura de 150px.
Esta div tem largura máxima de 300px.
Esta div tem largura mínima de 100px.
Esta div tem altura máxima de 100px e conteúdo rolável.

Conteúdo extra para demonstrar a altura máxima. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis ullam, dolore quos reprehenderit consectetur, veritatis cupiditate eos nobis porro sint sit in saepe repellendus, eum corporis possimus iure similique quis. Conteúdo extra para demonstrar a altura máxima. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis ullam, dolore quos reprehenderit consectetur, veritatis cupiditate eos nobis porro sint sit in saepe repellendus, eum corporis possimus iure similique quis. Conteúdo extra para demonstrar a altura máxima. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis ullam, dolore quos reprehenderit consectetur, veritatis cupiditate eos nobis porro sint sit in saepe repellendus, eum corporis possimus iure similique quis.
Esta div tem altura mínima de 50px.

Espaçamento Interno e Externo

Esta div tem espaçamento interno (padding) de 20px.
Esta div tem espaçamento externo (margin) de 20px.

Bordas

Esta div tem uma borda de 2px sólida.
Esta div tem cantos arredondados com 10px de raio.
Esta div tem uma sombra de caixa.

Comportamento de Layout

Esta div tem display inline-block.
Esta div está posicionada relativamente a 20px do topo.
Esta div tem overflow oculto.
Esta div está flutuando à direita.
Esta div limpa os elementos flutuantes.

Cor de Fundo e Imagem

Esta div tem cor de fundo azul.
Esta div tem uma imagem de fundo.
Esta div tem a imagem de fundo redimensionada para 50%.
Esta div tem a imagem de fundo centralizada.
Esta div tem a imagem de fundo sem repetição.