O que é CSS?
- CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata).
- CSS descreve como os elementos HTML devem ser exibidos na tela, no papel ou em outras mídias.
- CSS economiza muito trabalho, pois pode controlar o layout de várias páginas da web de uma só vez.
- Folhas de estilo externas são armazenadas em arquivos
.css.
Por que usar CSS?
- O CSS é usado para definir estilos para suas páginas da web, incluindo design, layout e variações de exibição para diferentes dispositivos e tamanhos de tela.
CSS resolveu um grande problema
HTML nunca teve a intenção de conter tags para formatar uma página da web!
HTML foi criado para descrever o conteúdo de uma página da web, como:
<h1>Este é um cabeçalho</h1>
<p>Este é um parágrafo.</p>
Quando tags como <font> e atributos de cores foram adicionados à especificação do HTML 3.2, isso começou um pesadelo para os desenvolvedores da web. O desenvolvimento de grandes sites, onde fontes e informações de cores foram adicionadas a cada página, tornou-se um processo longo e caro.
Para resolver este problema, o World Wide Web Consortium (W3C) criou o CSS. O CSS removeu a formatação de estilo da página HTML!
CSS economiza muito trabalho!
As definições de estilo são normalmente salvas em arquivos .css externos. Com um arquivo de folha de estilo externo, você pode alterar a aparência de um site inteiro alterando apenas um arquivo!
Exemplo de Uso de CSS
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Bem-vindo ao meu site!</h1>
<p>Este é um exemplo de parágrafo.</p>
</body>
</html>
CSS (styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}
p {
color: #666;
}
Neste exemplo, o arquivo styles.css define o estilo para o documento HTML. Alterando este único arquivo CSS, você pode mudar a aparência de todas as páginas que utilizam este arquivo de estilo. Isso facilita a manutenção e atualização do design do seu site.
CSS é essencial para criar sites modernos e responsivos, proporcionando uma melhor experiência de usuário e facilitando o trabalho dos desenvolvedores web.