Quero me matricular
Artigos Alura Lingua

Vocabulário básico para quem trabalha com CSS

Giovanna Oliveira
Giovanna Oliveira
Vocabulário para quem trabalha com CSS #inset

Hello, there! Você trabalha com CSS ou está pensando em estudar esta linguagem? Então é importante que você se familiarize com os termos usados, não apenas para entender melhor a área, mas também para saber como pedir ajuda caso tenha alguma dúvida.

O CSS determina o estilo dos elementos em uma página. Pense no HTML como a estrutura de uma casa, como as paredes, portas e janelas, e no CSS como o estilo dessa casa: as cores das paredes, o formato das janelas e o tamanho das portas.

Então dê uma olhadinha nos termos abaixo e favorite a nossa página para consultar sempre que precisar. Let's go!

Vocabulário básico para quem trabalha com CSS

Para ficar mais fácil de entender, veja o exemplo a seguir e depois confira cada um termos que compõem este pequeno código.

p {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #000000;
}

Aqui estamos dizendo que o parágrafo será escrito com a fonte Arial (ou uma fonte sem serifa), tamanho 12 e na cor preta. Now let's learn the names of the components?

1. CSS / CSS3

CSS é a sigla de Cascading Style Sheets, ou seja, Folhas de Estilo em Cascata. O nome "em cascata" é devido à ordem de importância dos estilos aplicados aos elementos (se houver mais de um estilo disponível para determinado elemento, é no CSS que determinamos a ordem correta desses estilos). CSS3 é a versão mais recente de CSS.

2. Selector

O selector é a parte do CSS em que dizemos qual elemento da página vai receber o estilo que estamos configurando. No nosso exemplo, p é o selector, e isso significa que todas as vezes em que aparecer a tag < p > no código HTML, ela será configurada de acordo com o estilo que definimos.

3. Property

Property é a propriedade do selector que vamos configurar, ou seja, é tudo o que aparece antes dos dois pontos ( : ). Aqui nós dizemos o que queremos ajustar do elemento: vamos ajustar a cor, o tamanho, o espaçamento, a borda? No nosso exemplo, temos três properties diferentes: font-family, font-size e color.

4. Value

Depois de definir qual é a property que vamos estilizar, precisamos definir qual é o value, ou seja, o valor que ela receberá. É aqui que especificamos qual será a cor, qual será o tamanho etc. No nosso exemplo, os valores que aparecem são:

5. Declaration

Uma declaration (declaração) é cada uma das linhas em que definimos o estilo do selector, ou seja, é a combinação de uma property com um value. Especificamente, é cada uma das linhas que aparecem dentro das chaves ( {} ). No nosso exemplo, temos três declarations diferentes:

Um declaration block (bloco de declarações), portanto, é o grupo de declarações que definem o estilo de um selector. É tudo aquilo que aparece dentro das chaves ( {} ). Ou seja, as nossas três declarations juntas compõem um declaration block.

6. Rule / Rule Set

E também temos um nome para o conjunto todo, incluindo o selector e o declaration block: rule set, ou seja, conjunto de regras. O rule set é a somatória de tudo, desde o selector até cada uma das declarations, ou seja, é todo o nosso exemplo ali em cima.

Did you already know these words? O universo do CSS é bem abrangente e cada uma dessas palavras é subdividida em outras, mas essas são as mais importantes para você começar a usar esse código desde já. Mas se você quer aprender mais palavras de programação para ampliar o seu repertório, leia o nosso artigo "Descubra o que significam estas tags de HTML em inglês". See you!

Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!

Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.

Inglês e espanhol online de maneira eficaz!

Escolha um dos planos e tenha acesso aos cursos completos da plataforma

Plano Anual 12x R$40 ou R$480 Quero este plano
Plano Semestral 6x R$50 ou R$300 Quero este plano