CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em HTML ou XML. Ele permite separar o conteúdo da formatação, proporcionando maior flexibilidade e controle sobre o design das páginas web.
Como o CSS funciona?
O CSS funciona aplicando regras de estilo aos elementos HTML. Essas regras são compostas por seletores e declarações. O seletor identifica o elemento que será estilizado, enquanto a declaração define as propriedades visuais do elemento, como cor, tamanho e espaçamento.
Exemplo de uma regra CSS:
p {
color: blue;
font-size: 16px;
}Neste exemplo, todos os parágrafos (p) terão a cor azul e um tamanho de fonte de 16 pixels.
Tipos de CSS
Existem três formas principais de aplicar CSS em uma página web:
- CSS Inline – Adicionado diretamente dentro da tag HTML usando o atributo
style.<p style="color: red;">Texto em vermelho</p> - CSS Interno – Definido dentro de uma tag
<style>no cabeçalho do documento HTML.<style> p { color: green; } </style> - CSS Externo – Utiliza um arquivo separado (
.css), vinculado ao HTML por meio da tag<link>.<link rel="stylesheet" href="styles.css">
Vantagens do Uso de CSS
- Separação entre estrutura e estilo: O HTML define o conteúdo, enquanto o CSS define a aparência.
- Facilidade de manutenção: Alterar um arquivo CSS afeta todas as páginas que o utilizam.
- Maior desempenho: Com folhas de estilo externas, o CSS pode ser armazenado em cache pelo navegador, reduzindo o tempo de carregamento das páginas.
- Compatibilidade com dispositivos: Permite criar layouts responsivos, adaptáveis a diferentes tamanhos de tela.
Conceitos Importantes no CSS
Seletores
Os seletores determinam quais elementos serão estilizados. Alguns exemplos:
elemento(ex:p) – Seleciona todos os elementos do tipo especificado..classe(ex:.botao) – Seleciona todos os elementos com a classe especificada.#id(ex:#menu) – Seleciona um elemento com o ID especificado.
Propriedades e Valores
As propriedades são características que podem ser modificadas. Exemplo:
h1 {
font-family: Arial, sans-serif;
text-align: center;
}Box Model
O modelo de caixa do CSS define como os elementos são dispostos na página. Ele é composto por:
- Content (Conteúdo)
- Padding (Preenchimento interno)
- Border (Borda)
- Margin (Margem externa)
Conclusão
O CSS é essencial para a criação de sites modernos e atraentes. Ele oferece controle total sobre a aparência dos elementos, tornando a experiência do usuário mais agradável. Com a evolução do CSS3, novas funcionalidades foram adicionadas, permitindo animações, transições e efeitos avançados sem a necessidade de JavaScript.
