Lembra-se do HTML (Hypertext Markup Language)? A linguagem de codificação que serve de base para todo o desenvolvimento web? Bem, se HTML é a primeira linguagem que você vai querer aprender quando estiver interessado em construir sites, o seu primo CSS é o segundo logo.
O que é CSS? E como isso se relaciona com o HMTL?
CSS significa Cascading Style Sheets, com ênfase em “Style”. Enquanto o HTML é usado para estruturar um documento da web (definindo coisas como manchetes e parágrafos e permitindo que você incorpore imagens, vídeo e outras “medias”), CSS vem e específica o estilo do seu documento – layouts de página, cores e fontes são todos determinados com CSS. Pense no HTML como a base (cada casa tem um) e no CSS como as escolhas estéticas (há uma grande diferença entre uma mansão vitoriana e uma casa moderna de meados do século).
Como funciona o CSS?
CSS traz estilo às suas páginas da web ao interagir com elementos HTML. Elementos são os componentes HTML individuais de uma página da web – por exemplo, um parágrafo – que em HTML pode ter a seguinte aparência:
<p> Este é o meu parágrafo! </p>
Se você quiser que este parágrafo apareça em rosa e em negrito para as pessoas que visualizam a sua página da web por meio de um navegador, você deve usar um código CSS semelhante a este:
p {cor: rosa; intensidade da fonte: Negrito;}
Nesse caso, “p” (o parágrafo) é chamado de “seletor” – é a parte do código CSS que especifica em qual elemento HTML o estilo CSS afetará. Em CSS, o seletor é escrito à esquerda da primeira chave. A informação entre chaves é chamada de declaração e contém propriedades e valores que são aplicados ao seletor. Propriedades são coisas como tamanho da fonte, cor e margens, enquanto os valores são as configurações para essas propriedades. No exemplo acima, “colore” e “fonte-weight” são propriedades, e “pink” e “bold” são valores. O conjunto completo de colchetes de
{cor: rosa; intensidade da fonte: Negrito; }
É a declaração e, novamente, “p” (significando o parágrafo HTML) é o seletor. Esses mesmos princípios básicos podem ser aplicados para alterar tamanhos de fonte, cores de fundo, recuos de margem e muito mais. Por exemplo. . .
Corpo {cor de fundo: azul-claro;}
. . . Tornaria o plano de fundo da página azul-claro ou. . .
p {tamanho da fonte: 20px; cor vermelha;}
. . .criará um parágrafo de fonte de 20 pontos com letras vermelhas.
CSS externo, interno ou embutido?
Você deve estar se perguntando como esse código CSS é realmente aplicado ao conteúdo HTML. Muito parecido com o HTML, o CSS é escrito em texto simples e sem formatação por meio de um editor de texto ou processador de texto no seu computador, e há três maneiras principais de adicionar esse código CSS às suas páginas HTML. O código CSS (ou folhas de estilo) pode ser externo, interno ou embutido. Folhas de estilo externas são salvas como arquivos.css e podem ser usadas para determinar a aparência de um site inteiro por meio de um arquivo (em vez de adicionar instâncias individuais de código CSS a cada elemento HTML que você deseja ajustar). Para usar uma folha de estilo externa, seus arquivos.HTML precisam incluir uma sessão de cabeçalho com link para a folha de estilo externa e se parece com isto:
<head>
<link rel = ”stylesheet” type = ”text / css” href = mysitestyle.css ”>
</head>
Isso vinculará o arquivo.html à sua folha de estilo externa (neste caso, mysitestyle.css), e todas as instruções CSS nesse arquivo serão aplicadas às suas páginas.html vinculadas.
Folhas de estilo internas são instruções CSS escritas diretamente no cabeçalho de uma página.HTML específica. (Isso é especialmente útil se você tiver uma única página em um site que tenha uma aparência única.) Uma folha de estilo interna se parece com isso. . .
<head>
<style>
Corpo {cor de fundo: cardo; }
P {tamanho da fonte: 20px; cor: azul-médio;}
</style>
</head>
. . . Uma cor de fundo cardo e parágrafos com fonte de 20 pontos e azul-médio serão agora aplicados a esta única página.html.
Por fim, os estilos embutidos são fragmentos de CSS escritos diretamente no código HTML e aplicáveis apenas a uma única instância de codificação. Por exemplo:
<h1 style = ”font-size: 40px; color: violet;”> Veja este título! </h1>
Faria com que um título específico em uma única página.HTML apareça em violeta, fonte de 40 pontos.
De modo geral, as folhas de estilo externas são o método mais eficiente para implementar CSS em um site (é mais fácil acompanhar e implementar o estilo de um site a partir de um arquivo CSS dedicado), enquanto as folhas de estilo internas e o estilo online pode ser usados em um caso por caso, quando mudanças de estilo individuais precisam ser feitas.
Portanto, se o HTML é a base, as molduras, as paredes e as vigas que dão suporte ao seu site, considere CSS a cor da pintura, os estilos das janelas e o paisagismo que surgirão posteriormente. Você não pode chegar a lugar nenhum sem colocar essa base primeiro, mas – após fazer isso – você vai querer prosseguir com algum estilo, e CSS é o ingresso para liberar o seu decorador interno.