Capítulo 8: Introdução ao CSS: seletores, propriedades e valores
Para que um site seja visualmente atraente e funcional, é necessário mais do que apenas HTML. Aqui é onde o CSS (Cascading Style Sheets) entra em jogo. CSS é uma linguagem de estilo usada para descrever a aparência e formatação de um documento escrito em HTML. É fundamental para o desenvolvimento web e é usado para definir cores, fontes, layout e muito mais.
Seletores CSS
Os seletores CSS são a parte do CSS que seleciona o elemento HTML que você deseja estilizar. Existem diversos tipos de seletores, mas vamos focar nos mais comuns: seletores de elementos, de classes e de IDs.
- Seletores de Elementos: Eles selecionam elementos com base no nome do elemento HTML. Por exemplo, se quisermos estilizar todos os parágrafos (<p>) de nosso documento, usaremos o seletor de elementos. Exemplo: p {color: red;}
- Seletores de Classes: Eles selecionam elementos com base no atributo de classe do elemento HTML. As classes são úteis quando você deseja criar um estilo CSS que possa ser reutilizado. Exemplo: .myClass {font-size: 20px;}
- Seletores de IDs: Eles selecionam elementos com base no atributo de ID do elemento HTML. Os IDs são únicos e devem ser usados quando você deseja estilizar um único elemento. Exemplo: #myID {background-color: blue;}
Propriedades CSS
As propriedades CSS são o que você deseja estilizar no elemento selecionado. Por exemplo, você pode querer alterar a cor de fundo, a fonte, a cor da fonte, o espaçamento, a margem, a borda e muito mais. Cada propriedade tem um nome e é seguida por dois pontos e um valor. Por exemplo: p {color: red;} - 'color' é a propriedade e 'red' é o valor.
Valores CSS
Os valores CSS são os ajustes que você faz na propriedade escolhida. No exemplo anterior, 'red' é o valor que atribuímos à propriedade 'color'. Os valores podem ser palavras-chave, como 'red', 'blue', 'green', números, porcentagens, e uma vasta gama de outras opções, dependendo da propriedade que você está estilizando.
Conclusão
Entender os seletores, propriedades e valores do CSS é fundamental para se tornar um desenvolvedor front-end eficaz. Eles são a base para a criação de sites visualmente atraentes e funcionais. No próximo capítulo, exploraremos mais profundamente o CSS, aprendendo sobre o modelo de caixa CSS, posicionamento, animações e muito mais.
