Os comandos CSS mais importantes

Provavelmente você terá de utilizar diferentes comandos CSS durante a criação ou a manutenção de um site. Por isso, este tutorial apresenta os comandos CSS mais importantes e frequentemente aplicados, assim como a finalidade de cada um e alguns exemplos de códigos. Continue lendo para melhorar as suas habilidades de web design.

Abrangência dos comandos CSS

Originalmente, comandos CSS serviam apenas para definir fontes, cores de fontes, tabelas e elementos rodeados de texto. No entanto, a importância e a abrangência da linguagem de estilo CSS se expandiu consideravelmente com o passar do tempo. Hoje em dia, ela permite a geração de gradientes de cores, recortes de imagens, sombras, cantos arredondados, animações e muito mais.

Nota

Atualmente, é quase impossível criar um site que não utilize Cascading Style Sheets (CSS). O nosso Digital Guide explica para você o que é CSS e como incluir CSS no HTML. Se você está começando a enveredar por essa linguagem de estilo agora, acesse este tutorial básico de CSS e conheça os principais truques de CSS: snippets que melhorarão os seus códigos.

Um comando CSS, também chamado de instrução CSS, deve ter a seguinte estrutura:

seletor chave de abertura propriedade valor da propriedade chave de fechamento
p { color: navy; }

Combinados, propriedade e valor da propriedade formam uma declaração.

Ao programar em CSS, você deve ter em mente que, apesar de contínuos ajustes e melhorias, nem todos os navegadores “entendem” a linguagem por completo. Prefixos de navegador conseguem contornar esse problema, direcionando comandos CSS a navegadores específicos. São esses os prefixos:

  • -moz- para o Mozilla Firefox
  • -ms- para o Microsoft Edge
  • -khtml- para o Konqueror
  • -o- para versões antigas do Opera
  • -webkit- para o Safari, o Chrome e as novas versões do Opera

Observe o exemplo de aplicação:

.box {
	-moz-border-radius: 10px; / *instrução para Firefox* /
border-radius: 10px;
}

No site caniuse, você pode conferir gratuitamente a compatibilidade de comandos CSS com os navegadores mais comuns.

Dica

Em CSS, tudo o que é inserido entre / *…* / é ignorado pelo navegador. Você pode usar a estrutura para acrescentar comentários ao seu código e para ocultar comandos CSS por motivos de testes, sem que seja preciso apagá-los ou reescrevê-los.

CSS Flexbox, CSS Grid e CSS Media Queries, por sua vez, foram desenvolvidos para a facilitar a criação de sites responsivos. Juntamente com novos comandos CSS, esses recursos ajudam na implementação do princípio Mobile First.

Comandos CSS para cores

As cores da internet são baseadas no espaço de cores RGB. Comandos CSS podem ser usados para definir cores para cada componente de um site. Quase qualquer elemento pode ter uma cor própria ou ganhar um gradiente de cores.

Nota

Em comandos CSS, os nomes das classes e os nomes dos IDs são case sensitive, ou seja, sensíveis a maiúsculas e minúsculas. Fará diferença se você escrever a instrução para um ID como #AMARELO { … } ou #amarelo { … }. Portanto, digite as instruções de forma idêntica quando referentes a elementos HTML.

Especificar valores de cores com comandos CSS

  • Hexcode: #63f0ac
  • Nome da cor: red, green, blue, coral, white, black…
  • RGB: rgb(238,130,238) e transparência RGB com rgba(238,130,238, 0.7)
  • HSL com transparência: hsla(140,20%,50%,0.5) - Hue (tom): de 0 a 360 graus na roda de cores - Saturation (saturação): de 0% (incolor) a 100% (intensidade máxima) - Lightness (claridade): de 0% (preto) a 100% (branco) - Valor de transparência numérico até 1.0 = cobertura total da cor

Exemplos de cores para elementos HTML

Para definir uma cor de fonte, você pode utilizar a propriedade color:

p { color: red; } / *um parágrafo em vermelho* /
div { color: #ffc3dd; } / *contêiner div com fonte em rosa claro* /
h1 { color: rgba(220,0,218,0.85); } / *título em violeta intenso com transparência de 85%* /

Criar gradientes de cores com comandos CSS

Antigamente, era preciso usar arquivos de imagem para criar gradientes de cores. Hoje em dia, contudo, é fácil gerá-los com comandos CSS. É possível fazer isso com o uso da instrução background-image: gradient ou de sua forma abreviada background: gradient. Em gradient, defina um valor para uma imagem sem dimensões e gere um gradiente de cores, que poderá ser alterado em pontos definidos.

Comando CSS Descrição Valores possíveis
linear-gradient Gradiente linear de uma cor para outra ou com várias cores to-top, to-right, 45deg (especificação livre de ângulo), cores com % como pontos de parada/transição
radial-gradient Gradiente circular de uma cor para outra circle, ellipse com valores de pixels e cores
conic-gradient Transição de uma cor para outra em formato cônico Cores com valores de % e ângulo inicial como números

Essa tabela apresenta apenas alguns dos atributos possíveis. Todos os valores comuns podem ser utilizados na especificação de cores, incluindo valores de cor com transparência.

Acompanhe um exemplo de notação de um comando CSS completo:

.box { background-image: linear-gradient(to top, white 0%, black 50%); }

Comandos CSS para fontes

Com o comando CSS font, você pode , de uma só vez, alterar as seis propriedades de uma fonte em uso:

p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }

Confira, na tabela, cada um dos componentes dessa instrução CSS, na ordem em que devem ser especificados:

Comando CSS Descrição Valores possíveis
font-style Estilo da fonte normal, italic, oblique
font-variant Variante da fonte normal, small-caps
font-weight Espessura da fonte normal (= 400), bold, bolder, lighter, 100 a 900 (em incrementos de 100)
font-size / line-height Tamanho da fonte Especificação em px, %, em, rem, vw, vh
font-family Família da fonte Fontes dependem do sistema operacional, do navegador e das extensões instaladas

A definição de font-family, para o corpo do site, é herdada por todas as instruções subordinadas hierarquicamente. A cor da fonte não é definida pela instrução font, mas sim pela especificação color:nome_da_cor.

Dica

Em comandos CSS, nomes de fontes com espaços devem ser inseridos entre aspas simples ou duplas, como neste exemplo: font-family: "Lobster Two".

Nosso artigo especializado em tipografia no web design responsivo apresenta mais informações sobre as unidades de medida utilizadas para tamanhos de fonte (font-size).

Comandos CSS para layouts de texto

Além de fontes, cores e tamanhos, outros detalhes tipográficos influenciam a legibilidade de um site. Entre eles estão:

Comando CSS Descrição Valores possíveis
text-align Alinhamento do texto left, right, center, justify
text-decoration Decoração do texto underline, overline, line-through
word-spacing Espaçamento entre palavras Valor numérico em pt (pontos) mm, cm, px, em, rem
letter-spacing Espaçamento entre caracteres Valor numérico em pt (pontos) mm, cm, px, em, rem
text-indent Recuo da 1ª linha Valor numérico em pt (pontos) mm, cm, px, em, rem
text-transform Maiúsculas e minúsculas capitalize, uppercase, lowercase, none

Comandos CSS para linhas e bordas

Para criar bordas, você deve fazer uso do elemento CSS border, que reúne em si várias propriedades, de modo semelhante ao elemento font.

Por exemplo: para enquadrarmos uma imagem (com a tag HTML img) em uma linha de 5 pixels de espessura na cor azul-marinho, usamos a seguinte notação abreviada:

img { border: 5px solid #000080; }

Analise os componentes desse comando CSS:

Comando CSS Descrição Valores possíveis
border-width Largura da borda px, mm, in, em, rem
border-style Estilo da borda none, hidden, dotted, dashed, double, groove, ridge, inset, outset
border-color Cor da borda Ver seção sobre cores

Linhas ao longo de cada lado de uma imagem ou retângulo podem ser posicionadas com os comandos border-top, border-right, border-bottom e border-left, com os mesmos atributos utilizados na notação abreviada border.

Comandos CSS para espaçamentos

Existem dois tipos de espaçamento:

  • padding é o espaçamento interno entre o conteúdo e o elemento que o cerca
  • margin é o espaçamento externo entre um elemento e outro elemento adjacente

Espaçamento interno

O comando padding define o espaçamento entre uma imagem ou bloco de texto e a borda que o circunda. Existem formas abreviadas e instruções específicas para cada lado de um bloco de conteúdo.

Comando CSS Descrição Valores possíveis
padding: 1px Espaçamento interno geral px, em, mm, in, pt, pc, %
padding: 1em 2.5em; Espaçamento interno acima e abaixo (1º valor), esquerda e direita (2º valor) px, em, mm, in, pt, pc, %
padding: 5px 2px 4px; Espaçamento interno acima (1º valor), esquerda e direita (2º valor), abaixo (3º valor) px, em, mm, in, pt, pc, %
padding-top: 1mm; Espaçamento interno acima px, em, mm, in, pt, pc, %
padding-right: 1pc; Espaçamento interno à direita px, em, mm, in, pt, pc, %
padding-bottom: 3pt; Espaçamento interno abaixo px, em, mm, in, pt, pc, %
padding-left: 2in; Espaçamento interno à esquerda px, em, mm, in, pt, pc, %

Quando na forma abreviada padding, caso todas as quatro posições estejam preenchidas com valores, elas serão consideradas em sentido horário, de cima para baixo. O exemplo torna o conceito mais claro:

p { padding: 5px 0 5px 0; } / *5 pixels acima e abaixo, nenhum espaçamento interno à direita e à esquerda* /

Espaçamento externo

O comando CSS margin determina a distância entre um elemento de layout e o elemento adjacente. A notação e a indicação de cada valor são idênticas às de padding.

Comando CSS Descrição Valores possíveis
margin: 5px; Espaçamento externo geral px, em, mm, in, pt, pc, %
margin: 2em 1.5em; Espaçamento externo acima e abaixo (1º valor), esquerda e direita (2º valor) px, em, mm, in, pt, pc, %
margin: 2px 10px 15px; Espaçamento externo acima (1º valor), esquerda e direita (2º valor), abaixo (3º valor) px, em, mm, in, pt, pc, %
margin-top: 2pc; Espaçamento externo acima px, em, mm, in, pt, pc, %
margin-right: 5mm; Espaçamento externo à direita px, em, mm, in, pt, pc, %
margin-bottom: 7pt; Espaçamento externo abaixo px, em, mm, in, pt, pc, %
margin-left: 1in; Espaçamento externo à esquerda px, em, mm, in, pt, pc, %
Nota

Ao calcular os elementos de um layout, é preciso que você considere todos os componentes. Ou seja: a largura do texto ou da imagem (width), o espaçamento interno (padding), a largura da borda (border-width) e o espaçamento externo (margin).

Se você definir a aparência dos links de um site com a linguagem de estilo CSS, cada status de link poderá ganhar uma representação visual diferente. Além de outros aspectos, você também poderá determinar como um link será exibido ao se passar o mouse sobre ele, ao se clicar e ao se selecioná-lo (com a tecla Tab, por exemplo).

a:link   { background-color: black; color: white;}

Geralmente, as chamadas pseudoclasses podem ser modificadas para se alterar as cores de um link. Em princípio, contudo, qualquer comando CSS admissível pode ser incorporado a essas classes.

Comando CSS Descrição Valores possíveis
a:link Link em estado inicial Pode ser combinado com comandos CSS
a:hover Link ao passar o ponteiro do mouse Pode ser combinado com comandos CSS
a:active Link ao clicar Pode ser combinado com comandos CSS
a:focus Link selecionado, por exemplo, com a tecla Tab Pode ser combinado com comandos CSS
a:visited Link após ser acessado Pode ser combinado com comandos CSS

Comandos CSS para planos de fundo

O plano de fundo de um site também pode ser alterado pela linguagem de estilo CSS. É possível, por exemplo, escolher uma cor ou incorporar uma imagem a ele. No caso de imagens, você ainda poderá definir características adicionais.

Comando CSS Descrição Valores possíveis
background-color Cor de fundo Ver seção sobre cores
background-image Imagem de fundo URL da imagem
background-attachment O plano de fundo se move ao rolar a tela ou permanece fixo? scroll, fixed
background-clip Determina a qual seção as propriedades do plano de fundo se aplicam padding-box, corner-box, content-box
background-position Alinhamento da imagem de fundo top, center, bottom / left, center, right
background-repeat Se a imagem for menor que o plano de fundo, ela pode ser repetida repeat, repeat-x (horizontal), repeat-y (vertical), space (repetir sem cortar), round (repetir com redimensionamento)

Todos esses são comandos detalhados. Eles também podem ser aninhados sob o comando superior background. Observe:

background: white url("http://example.org/image.png")
    repeat-x

Na instrução acima, integramos os comandos background-color, background-image e background-repeat.

Dica

Para que você possa consultar este tutorial de comandos CSS de um jeito bem mais fácil, fixe-o à sua barra de tarefas do Windows. Não sabe como? O nosso Digital Guie ensina você a fixar um site na barra de tarefas do Windows 11.

Este artigo foi útil?
Para melhorar a sua experiência, este site usa cookies. Ao acessar o nosso site, você concorda com nosso uso de cookies. Mais informações
Page top