INTRODUÇÃO ÀS REGRAS CSS

CSS (Cascading Style Sheets — Folhas de Estilo em Cascata) é uma linguagem usada para definir a apresentação de documentos HTML.

Enquanto o HTML estrutura o conteúdo, o CSS cuida da aparência: cores, tamanhos, posicionamento, espaçamentos e outros aspectos visuais.

Frase que resume bem a dupla:
“HTML para estruturar, CSS para apresentar.”

Por que usar CSS?

O HTML foi criado apenas para estruturar conteúdo. O CSS traz diversas vantagens:

Produtividade → um único arquivo CSS pode formatar várias páginas.
Identidade visual unificada → fácil manter padrão de cores, fontes e estilos.
Alterações rápidas → basta editar o CSS, sem mexer em cada página.
Arquivos mais leves → carregamento mais rápido.
Acessibilidade → melhor suporte para leitores de tela.
Versão para impressão → basta trocar o CSS.
Controle total do layout → muito além dos atributos HTML.
Compatibilidade com múltiplos dispositivos → responsividade.

Como aplicar CSS

Existem três formas de usar CSS em HTML:

1. Inline (Em Linha)

Estilo aplicado diretamente na tag. Pouco usado, serve apenas para casos isolados.

<p style="font-family: sans-serif; color: blue;">Texto com CSS inline</p>

2. Interno (Incorporado)

As regras ficam dentro do HTML, na tag <style> dentro do <head>. Útil para páginas únicas.

<head>

<style>

body { font-family: Verdana; }

h1 { font-size: 120%; }

</style>

</head>

3. Externo (Arquivo .css)

O mais recomendado. Cria-se um arquivo .css separado e o vincula ao HTML com <link>.

Elemento <link>

Usado no <head> para conectar recursos externos (como CSS ou ícone da guia).

rel → tipo de relação (ex.: stylesheet)
type → tipo de conteúdo (text/css)
href → caminho do arquivo

Exemplos:

Sintaxe do CSS

Uma regra CSS tem a seguinte estrutura:

seletor {

propriedade: valor;

}

Exemplo:

p {

text-align: center;

color: brown;

font-size: 14px;

}

Várias propriedades podem ser aplicadas a um mesmo seletor, separadas por ;.

Agrupando e Encadeando Seletores

Agrupados

Aplicam o mesmo estilo a vários elementos, separados por vírgula:

h1, h2, p {

text-align: center;

color: brown;

}

Encadeados

Especificam elementos dentro de outros:

div p strong a {

color: brown;

}

Aqui, apenas os links <a> que estão dentro de <strong>, dentro de <p>, dentro de <div> serão afetados.

Resumindo

HTML = estrutura → o que mostrar.
CSS = estilo → como mostrar.
Formas de uso: Inline, Interna e Externa (mais recomendada).
Permite criar padrão visual unificado, sites leves, responsivos e acessíveis.
Regras básicas: seletor + propriedades + valores.
Seletores podem ser agrupados ou encadeados para maior precisão.

Comentários em CSS

No CSS podemos adicionar comentários para explicar trechos do código. Eles podem ocupar uma linha ou várias linhas.

A sintaxe é sempre: /* ... */

Exemplos:

/* Esse é um comentário em linha */

/* Este é um bloco de comentário

que pode ocupar várias linhas

e explicar melhor o código */

Tudo que estiver comentado não será interpretado pelo navegador e, geralmente, aparece em verde no editor.

Seletores de Classe e Id

Class → usada para aplicar um mesmo estilo a vários elementos.
Id → usada para aplicar estilo a um único elemento específico.

Resumo prático:

Agrupar elementos → class
Identificar um elemento único → id

Usando id

O seletor de identificação (id) é exclusivo:

Cada elemento pode ter apenas um id.
Em uma página, cada id só pode aparecer uma vez.
O nome do id não pode começar com número.

Para selecionar no CSS, usa-se o símbolo # seguido do nome:

<p id="titulo">Texto com id</p>

#titulo {

color: blue;

font-size: 20px;

}

Usando class

O seletor de classe permite aplicar o mesmo estilo a vários elementos.

Um elemento pode ter várias classes.
A mesma classe pode ser usada em diversos elementos.

Para selecionar no CSS, usa-se o ponto (.) antes do nome:

<p class="destaque">Texto com classe</p>

<p class="destaque">Outro texto</p>

.destaque {

color: red;

font-weight: bold;

}

Diferença essencial

id → único (um por página)
class → reutilizável (vários elementos)

Exemplo usando Class

Para agrupar elementos deve-se utilizar uma Classe, que é definida dentro do CSS e no arquivo HTML. Dentro da tag identifica-se a que classe, determinado elemento faz parte, utilizando o atributo class. Para selecionar elementos com uma classe específica, escreva um ponto (.), seguido do Nome da Classe (que o programador determina).

Não esqueça: Classes não são únicas!

• É possível usar a mesma class para vários elementos.

• É possível usar várias classes para um mesmo elemento.

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma class.

No exemplo abaixo, todos os elementos HTML com class = "center" serão azuis e alinhados no centro:

.center{

text-align: center;

color: blue;

}

Também é possível determinar que apenas elementos HTML específicos serão afetados por uma classe. No exemplo abaixo, apenas os elementos <p> com class = "center" serão alinhados no centro:

p.center{

text-align: center;

color: blue;

}

BACKGROUND – Definindo o estilo de fundo

A propriedade background controla todo o estilo de fundo de um elemento.
Ela pode ser usada de forma individual ou como um atalho (shorthand).

Propriedades principais

background-color → define a cor de fundo do elemento.

background-color: lightblue;

background-image → define a imagem de fundo. Pode ser uma URL ou um gradiente.
background-image: url("imagem.jpg");

background-image: linear-gradient(red, yellow);

background-repeat → define se a imagem se repete.
Valores:
repeat (padrão, repete em x e y)
repeat-x (somente horizontal)
repeat-y (somente vertical)
no-repeat (não repete)

background-repeat: no-repeat;

background-attachment → controla se o fundo rola com o conteúdo ou fica fixo.
scroll → rola junto
fixed → fica fixo em relação à janela

background-attachment: fixed;

background-position → define a posição inicial da imagem.
Pode ser em pixels, porcentagem ou palavras-chave (left, right, center, top, bottom).

background-position: center top;

background-size → ajusta o tamanho da imagem de fundo.

background-size: 80px 60px; /* largura 80px, altura 60px */

background-size: 300px; /* largura 300px, altura automática */

background-size: cover; /* cobre toda a área */

background-size: contain; /* ajusta sem cortar a imagem */

CORES EM GRADIENTE

Gradientes criam uma transição suave de cores.
Importante: eles são definidos com background-image, não com background-color.

Tipos principais

Linear Gradient (ao longo de uma linha):

background-image: linear-gradient(to right, red, yellow);

Faz a transição de uma cor para outra em linha reta.

Radial Gradient (a partir de um ponto central):

background-image: radial-gradient(circle, blue, white);

As cores se espalham em círculos ou elipses.

Gradiente Linear – Palavras-chave de direção

to top → de baixo para cima
to right → da esquerda para a direita
to left → da direita para a esquerda
to bottom → de cima para baixo (padrão)
to top left → do canto inferior direito ao superior esquerdo
to top right → do canto inferior esquerdo ao superior direito
to bottom left → do canto superior direito ao inferior esquerdo
to bottom right → do canto superior esquerdo ao inferior direito

Exemplo:

background-image: linear-gradient(to bottom right, red, yellow, green);

Radial faz a sua variação em círculo. No CSS, é criado utilizando a função radial-gradient().

background-image: radial-gradient(shape size at position, start-color, ..., last-color)

Shape com valores ellipse ou circle;

Size com valores: farthest-corner (default) / closest-side / closest-corner / farthest-side

At position: at top, at right, at bottom, at left

background: radial-gradient(circle at left,red,orange,yellow,transparent);

OPACITY

Permite alterar a opacidade de um elemento, deixando-o mais ou menos transparente. Basta atribuir um valor entre 0 e 1 à propriedade, opacity. Neste caso, o valor 0 indica um elemento completamente transparente, enquanto o valor 1 torna o elemento totalmente opaco. Opacidade pode ser definida como a qualidade da falta de transparência. Ele pode ser usado para definir a quantidade de conteúdo a ser visível.

Google Sites

Report abuse