O que é CSS, para que serve e como ele se conecta ao HTML
CSS (Cascading Style Sheets) é a linguagem usada para estilizar páginas web.
Enquanto o HTML define a estrutura, o CSS cuida da aparência: cores, fontes, tamanhos, espaçamentos e o posicionamento dos elementos na tela.
De forma simples:
Sem CSS, todas as páginas da web seriam texto puro sem nenhuma formatação visual. Nada de cores, nada de layout, nada de fontes diferentes.
Com CSS você consegue:
Existem três formas de aplicar CSS em uma página HTML.
Você cria um arquivo .css separado e conecta ao HTML com a tag <link> dentro do <head>.
1<!
No arquivo estilo.css:
1h1 { 2 color: tomato; 3}
Essa é a forma mais recomendada. O HTML cuida do conteúdo, o CSS cuida da apresentação, e cada um vive no seu arquivo. Além disso, o mesmo arquivo CSS pode ser usado em várias páginas ao mesmo tempo.
O CSS fica dentro do próprio arquivo HTML, na tag <style> dentro do <head>.
1<!DOCTYPE html> 2<html> 3 <head> 4 <style> 5 h1 { 6 color: tomato; 7 } 8 </style> 9 </head> 10 <body> 11 <h1>Olá!</h1> 12 </body> 13</html>
Funciona bem para páginas únicas ou testes rápidos, mas mistura estrutura e estilo no mesmo arquivo.
O estilo é aplicado diretamente no elemento HTML com o atributo style.
1<h1 style="color: tomato;">Olá!</h1>
Evite essa forma no dia a dia. Ela sobrescreve outros estilos, é difícil de manter e vai contra a ideia de separar conteúdo de apresentação.
Assim como o HTML está em todo lugar, o CSS também está. Qualquer página com um visual agradável tem CSS por baixo dos panos, seja em blogs, lojas, redes sociais ou sistemas internos.
Mesmo em projetos que usam frameworks modernos como React ou Vue, o CSS continua presente, seja diretamente, seja em bibliotecas de estilo construídas em cima dele.