10 exemplos de código CSS simples que você pode aprender em 10 minutos
Depois de começar a mexer em HTML, provavelmente você se interessará em adicionar mais impacto visual às suas páginas da web. CSS é a melhor maneira de fazer isso. CSS permite que você aplique alterações em toda a página sem depender de estilos embutidos.
Aqui estão vários exemplos simples de CSS para mostrar como fazer algumas alterações básicas de estilo em sua página da web.
1. Código CSS Básico para Formatação Fácil de Parágrafos
O estilo com CSS significa que você não precisa especificar um estilo sempre que criar um elemento. Você pode apenas dizer "todos os parágrafos devem ter este estilo específico" e pronto.
Digamos que você queira que cada parágrafo (<p>, uma das tags HTML que todos deveriam conhecer) seja um pouco maior do que o normal. E com texto cinza escuro, em vez de preto.
O código CSS para isso é:
p { font-size: 120%; color: dimgray; }Simples! Agora, sempre que o navegador renderiza um parágrafo, o texto herdará o tamanho (120 por cento do normal) e a cor ("escurecimento").
Se você está curioso para saber quais cores de texto simples você pode usar, verifique esta lista de cores CSS da Mozilla.
2. Exemplo de CSS para alterar maiúsculas e minúsculas
Deseja criar uma designação para parágrafos que devem estar em versalete? Um exemplo de CSS para isso seria:
p.smallcaps { font-variant: small-caps; }Para fazer um parágrafo totalmente em versalete, use uma tag HTML ligeiramente diferente. Esta é a aparência:
<p class="smallcaps">Your paragraph here.</p>Adicionar um ponto e um nome de classe a um elemento especifica um subtipo desse elemento definido por uma classe. Você pode fazer isso com texto, imagens, links e praticamente qualquer outra coisa.
Se você deseja alterar um conjunto de texto para um caso específico, use estes exemplos de código CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;O último coloca a primeira letra de cada frase em maiúscula.
3. CSS fácil para alterar as cores do link
As mudanças de estilo não se limitam a parágrafos. Um link pode ser atribuído a quatro cores diferentes: sua cor padrão, sua cor visitada, sua cor flutuante e sua cor ativa (que é exibida enquanto você clica nele). Use este exemplo de código CSS:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }Com links, cada "a" é seguido por dois pontos, não um ponto.
Cada uma dessas declarações muda a cor de um link em um contexto específico. Não há necessidade de alterar a classe de um link para que ele mude de cor.
4. Remova os sublinhados do link com este exemplo de CSS
Embora o texto sublinhado indique claramente um link, às vezes parece melhor descartar esse sublinhado. Isso é feito com o atributo "text-decoration". Este exemplo de CSS mostra como remover sublinhados em links:
a { text-decoration: none; }Qualquer coisa com a tag de link ("a") permanecerá sem sublinhado. Quer sublinhar quando o usuário passa o mouse sobre ele? Basta adicionar:
a:hover { text-decoration: underline; }Você também pode adicionar esta decoração de texto aos links ativos para garantir que o sublinhado não desapareça quando o link for clicado.
5. Faça um botão de link com código CSS
Quer atrair mais atenção para o seu link? Um botão de link é uma ótima maneira de fazer isso. Este requer mais algumas linhas:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }Vamos explicar este código de amostra CSS.
Incluir todos os quatro estados de link garante que o botão não desapareça quando um usuário passar o mouse ou clicar nele. Você também pode definir parâmetros diferentes para hover e links ativos, por exemplo, alterando o botão ou a cor do texto.
A cor de fundo é definida com a cor de fundo e a cor do texto com a cor. O preenchimento define o tamanho da caixa — o texto é preenchido em 10px verticalmente e 25px horizontalmente.
O alinhamento de texto garante que o texto seja exibido no centro do botão, em vez de fora de um lado. A decoração de texto, como no último exemplo, remove o sublinhado.
O código CSS "display: inline-block" é um pouco mais complicado. Resumindo, permite definir a altura e a largura do objeto. Ele também garante que ele comece uma nova linha quando for inserido.
6. Exemplo de código CSS para criar uma caixa de texto
Um parágrafo simples não é muito empolgante. Se você deseja destacar um elemento em sua página, você pode querer adicionar uma borda. Veja como fazer isso com uma string de código CSS simples:
p.important { border-style: solid; border-width: 5px; border-color: purple; }Este é direto. Ele cria uma borda roxa sólida, com cinco pixels de largura, ao redor de qualquer parágrafo de classe importante. Para fazer um parágrafo herdar essas propriedades, basta declará-lo assim:
<p class="important">Your important paragraph here.</p>Isso funcionará independentemente do tamanho do parágrafo.
Existem muitos estilos de borda diferentes que você pode aplicar; em vez de "sólido", tente "pontilhado" ou "duplo". Enquanto isso, a largura pode ser "fina", "média" ou "espessa". O código CSS pode até definir a espessura de cada borda individualmente, assim:
border-width: 5px 8px 3px 9px;Isso resulta em uma borda superior de cinco pixels, uma borda direita de oito, uma borda inferior de três e um tamanho de borda esquerda de nove pixels.
7. Centralizar elementos com código CSS básico
Para uma tarefa comum, centralizar elementos com código CSS é surpreendentemente não intuitivo. Depois de fazer isso algumas vezes, torna-se muito mais fácil. Você tem algumas maneiras diferentes de centralizar as coisas.
Para um elemento de bloco (geralmente uma imagem), use o atributo margin:
.center { display: block; margin: auto; }Isso garante que o elemento seja exibido como um bloco e que a margem de cada lado seja definida automaticamente. Se quiser centralizar todas as imagens em uma determinada página, você pode até adicionar "margin: auto" à tag img:
img { margin: auto; }Para saber por que funciona dessa forma, verifique a explicação do modelo de caixa CSS no W3C .
Mas e se você quiser centralizar o texto com CSS? Use este CSS de amostra:
.centertext { text-align: center; }Quer usar a classe "centertext" para centralizar o texto em um parágrafo? Basta adicionar essa classe à tag <p>:
<p class="centertext">This text will be centered.</p>8. Exemplos CSS para ajustar o preenchimento
O preenchimento de um elemento especifica quanto espaço deve haver em cada lado. Por exemplo, se você adicionar 25 pixels de preenchimento à parte inferior de uma imagem, o texto a seguir será empurrado 25 pixels para baixo. Muitos elementos podem ter preenchimento, não apenas imagens.
Digamos que você queira que cada imagem tenha 20 pixels de preenchimento nos lados esquerdo e direito e 40 pixels na parte superior e inferior. A execução de código CSS mais básica para isso é:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }Há uma instrução CSS mais curta, no entanto, que apresenta todas essas informações em uma única linha:
img { padding: 40px 25px 40px 25px; }Isso define os preenchimentos superior, direito, inferior e esquerdo com o número certo. Graças a apenas dois valores usados (40 e 25), você pode torná-lo ainda mais curto:
img { padding: 40px 25px }Quando você usa apenas dois valores, o primeiro valor é definido para a parte superior e inferior, enquanto o segundo será para a esquerda e para a direita.
9. Destaque as linhas da tabela com codificação CSS
O código CSS faz com que as tabelas pareçam muito mais agradáveis do que as grades padrão. Adicionar cores, ajustar bordas e tornar sua mesa responsiva a telas de dispositivos móveis é tudo fácil. Este exemplo simples de CSS mostra como destacar as linhas da tabela ao passar o mouse sobre elas.
tr:hover { background-color: #ddd; }Agora, sempre que você passar o mouse sobre uma célula da tabela, essa linha mudará de cor. Para ver algumas das outras coisas legais que você pode fazer, verifique a página W3C em tabelas CSS sofisticadas .
10. Exemplo de CSS para deslocamento de imagens entre transparentes e opacos
O código CSS também pode ajudá-lo a fazer coisas legais com imagens. Aqui está um exemplo de CSS para exibir imagens com opacidade inferior, para que pareçam ligeiramente "esbranquiçadas". Quando você passa o mouse sobre as imagens, elas ficam com a opacidade total:
img { opacity: 0.5; filter: alpha(opacity=50); }O atributo "filtro" faz a mesma coisa que "opacidade", mas o Internet Explorer 8 e anteriores não reconhecem a medição de opacidade. Para navegadores mais antigos, é uma boa ideia incluí-lo.
Agora que as imagens estão ligeiramente transparentes, você pode torná-las totalmente opacas ao passar o mouse:
img:hover { opacity: 1.0; filter: alpha(opacity=100); }10 exemplos CSS com código-fonte
Com esses exemplos de código CSS, você deve ter uma ideia muito melhor de como o CSS funciona. Os modelos CSS podem ajudar, mas entender os elementos brutos é vital.
Esses 10 exemplos fáceis de código CSS são recapitulados:
- Formatação fácil de parágrafo
- Mudar maiúsculas e minúsculas
- Alterar as cores do link
- Remova os sublinhados do link
- Faça um botão de link
- Crie uma caixa de texto
- Elementos de alinhamento ao centro
- Ajustar preenchimento
- Destacar linhas da tabela
- Tornar as imagens opacas
Revisando-os novamente, você notará vários padrões que podem ser aplicados a códigos futuros. E é aí que você sabe que realmente começou a se tornar um mestre em CSS. Mas lembrar pode ser difícil. Você pode querer marcar esta página para referência futura.
