CSS significa Cascading Style Sheets. CSS é uma linguagem de folha de estilo padrão usada para descrever como as páginas da Web são renderizadas (ou seja, layout e formatação).
Antes do CSS, quase todas as propriedades de apresentação de documentos HTML estavam contidas na marcação HTML (especialmente na marcação HTML); todas as cores de fonte, estilos de fundo, alinhamento de elementos, bordas e tamanhos tinham que ser explicitamente descritos em HTML.
Como resultado, desenvolver um site grande torna-se um processo longo e caro, pois as informações de estilo são adicionadas repetidamente a cada página do site.
Para resolver esse problema, o CSS foi introduzido em 1996 pelo World Wide Web Consortium (W3C), que também mantém seu padrão. CSS é projetado para permitir a separação de apresentação e conteúdo. Os designers da Web agora podem mover as informações de formatação da página da Web para folhas de estilo separadas, resultando em marcação HTML bastante simplificada e melhor capacidade de manutenção.
CSS3 é a versão mais recente da especificação CSS. CSS3 adiciona vários novos recursos de estilo e melhorias para aprimorar as apresentações na web.
O que você pode fazer com CSS
Você pode fazer muito mais com CSS, são apenas exemplos mais comumente usados.
- Você pode aplicar facilmente a mesma regra de estilo a vários elementos.
- Você pode usar uma única folha de estilo para controlar a aparência de várias páginas em seu site.
- Você pode renderizar a mesma página de maneira diferente em dispositivos diferentes.
- Você pode definir estados dinâmicos de elementos como foco, foco, etc. Caso contrário, não é possível.
- Você pode alterar a posição dos elementos em uma página da Web sem alterar a marcação.
- Você pode alterar a exibição de elementos HTML existentes.
- Você pode transformar elementos como dimensionar, girar, inclinar e muito mais. no espaço 2D ou 3D.
- Você pode criar animações e transições sem JavaScript.
- Você pode criar versões web amigáveis para impressão.
Vantagens de usar CSS
A maior vantagem do CSS é que ele permite separar estilos e layout do conteúdo do documento. Aqui estão mais algumas vantagens.
- CSS economiza muito tempo – CSS oferece muita flexibilidade na configuração de propriedades de estilo para elementos. Você pode escrever CSS uma vez; você pode aplicar o mesmo código a grupos de elementos HTML ou reutilizá-lo em várias páginas HTML.
- Facilidade de manutenção – CSS fornece uma maneira fácil de atualizar a formatação de documentos e manter a consistência em vários documentos. Porque o conteúdo de um conjunto inteiro de páginas da Web pode ser facilmente controlado usando uma ou mais folhas de estilo.
- As páginas carregam mais rápido – CSS permite que várias páginas compartilhem informações de formatação, reduzindo a complexidade e a duplicação do conteúdo da estrutura do documento. Reduz significativamente o tamanho da transferência de arquivos, resultando em tempos de carregamento de página mais rápidos.
- Estilizando sobre HTML — CSS tem uma gama mais ampla de recursos de apresentação do que HTML e oferece mais controle sobre o layout de suas páginas da web. Como resultado, você pode dar às suas páginas da web uma aparência melhor do que o HTML pode representar elementos e atributos.
- Compatibilidade com vários dispositivos – CSS também permite que as páginas da Web sejam otimizadas para mais de um tipo de dispositivo ou mídia. Usando CSS, o mesmo documento HTML pode ser renderizado em diferentes estilos de exibição para diferentes dispositivos de renderização, como desktop e dispositivos móveis.
Incluir CSS em documentos HTML
CSS pode ser anexado como um documento separado ou embutido no próprio documento HTML. Existem três maneiras de incluir CSS em um documento HTML:
- Estilos embutidos — Use o atributo <style> DENTRO de tags HTML.
- Estilos internos – use o elemento <style> na seção de cabeçalho <head> do documento HTML.
- Folhas de estilo externas – Use o elemento <link> para apontar para um arquivo CSS externo.
Estilos embutidos
Os estilos inline ou embutidos são usados para aplicar regras de estilo exclusivas aos elementos, colocando as regras CSS diretamente na tag de abertura. Ele pode ser anexado a um elemento usando o atributo style.
A propriedade style inclui muitos pares de propriedades e valores CSS. Cada par “property: value” é separado por um ponto e vírgula (;), como você escreveria em uma folha de estilo incorporada ou externa. Mas precisa estar tudo em uma linha, ou seja, sem nova linha após o ponto e vírgula, assim:
<h1 style="color:red; font-size:30px;">Este é um título</h1>
<p style="color:green; font-size:22px;">Este é um parágrafo.</p>
<div style="color:blue; font-size:14px;">Este é algum conteúdo de texto.</div>O uso de estilos embutidos geralmente é considerado uma prática ruim. Como as regras de estilo são incorporadas diretamente na marcação HTML, isso faz com que a apresentação se misture com o conteúdo do documento; isso dificulta a manutenção do código e anula o propósito de usar CSS.
Folhas de estilo incorporadas
As folhas de estilo incorporadas ou internas afetam apenas o documento em que estão incorporadas.
As folhas de estilo incorporadas são definidas usando o elemento <style> na seção <head> de um documento HTML. Você pode definir qualquer número de elementos <style> em um documento HTML, mas eles devem aparecer em <head> </head> Vejamos um exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Meu Documento HTML</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>Este é um título</h1>
<p>Este é um parágrafo</p>
</body>
</html>Folha de estilo externa
As folhas de estilo externas são ideais quando os estilos são aplicados a muitas páginas de um site.
Uma folha de estilo externa contém todas as regras de estilo em um documento separado que você pode vincular a partir de qualquer arquivo HTML em seu site. As folhas de estilo externas são as mais flexíveis porque, com as folhas de estilo externas, você pode alterar a aparência de todo o site alterando apenas um arquivo.
Você pode anexar folhas de estilo externas de duas maneiras – vinculando e importando.
Vinculando folhas de estilo externas
Antes de vincular, precisamos primeiro criar uma folha de estilo. Abra seu editor de código favorito e crie um novo arquivo. Digite o seguinte código CSS neste arquivo e salve-o como “style.css”.
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}As folhas de estilo externas podem ser vinculadas a documentos HTML usando a tag <link>. A tag está localizada na seção <head>, conforme mostrado no exemplo a seguir:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Meu Documento HTML</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Este é um título</h1>
<p>Este é um parágrafo</p>
</body>
</html>Dica: De todos os três métodos, usar uma folha de estilo externa é a melhor maneira de definir e aplicar estilos a documentos HTML. O uso de uma folha de estilo externa deixa claro que os arquivos HTML afetados requerem alterações mínimas de marcação.
Importar folhas de estilo externas
@import é outra maneira de carregar folhas de estilo externas. @import instrução instrui o navegador a carregar uma folha de estilo externa e usar seus estilos.
Você pode usá-lo de duas maneiras. O mais fácil está no cabeçalho do documento. Observe que outras regras CSS ainda podem ser incluídas no elemento:
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Da mesma forma, você pode importar uma folha de estilo dentro de outra folha de estilo usando a regra @import.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}Nota: Todos as regras @import devem aparecer no início da folha de estilo. Quaisquer regras de estilo definidas na própria folha de estilo substituem as regras conflitantes na folha de estilo importada. No entanto, importar uma folha de estilo dentro de outra folha de estilo não é recomendado devido a problemas de desempenho.
