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!
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?
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.
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.
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.
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:
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.
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.