CSS

CSS é a "decoração" de um site, controlando cores, fontes e layout. Separa estilo da estrutura, permite reutilização de design e ajusta a aparência para todos os dispositivos.

Introdução

Imagine que você está montando uma casa. O HTML seria a estrutura básica – as paredes, o teto, as janelas – que dão forma ao espaço. Mas a decoração da casa, como escolher as cores das paredes, o tipo de móveis, e onde cada coisa vai ficar, isso seria o CSS.

CSS (Cascading Style Sheets) é como a "decoração" de um site. Enquanto o HTML constrói a estrutura (onde ficam os títulos, os parágrafos, as imagens), o CSS é responsável por como tudo isso vai aparecer: as cores, os tamanhos das fontes, os espaçamentos, e o layout geral da página.

Como Funciona o CSS?

O CSS funciona aplicando estilos a partes específicas do HTML, como se você estivesse escolhendo a cor de uma parede ou o tipo de sofá para um cômodo específico. No CSS, você cria "regras" que dizem como cada elemento da sua "casa" (o site) deve parecer.

Seletores: São como as etiquetas que você coloca nas partes da casa para dizer o que vai onde. Eles indicam qual parte do HTML (como um título ou um parágrafo) você quer decorar.
Declarações: São as decisões de decoração – por exemplo, pintar a parede de azul ou usar uma fonte grande para um título. Elas dizem ao navegador como exibir cada parte que você marcou com um seletor.

Estrutura de uma Regra CSS

Uma regra CSS é como uma ordem que você dá ao navegador para ele decorar a página do jeito que você quer:

seletor {
    propriedade: valor;
}

Exemplo:

h1 {
    color: blue;
    font-size: 24px;
}

Neste exemplo:

h1 é como dizer "essa parede aqui", se referindo a todos os títulos grandes do site.
color: blue; é como dizer "pinte esta parede de azul".
font-size: 24px; é como escolher o tamanho das letras na parede.

Formas de Aplicar CSS

CSS Inline:
- É como pintar uma parede diretamente, sem passar pelo planejamento. Você aplica o estilo diretamente na linha do HTML.
- Exemplo:
  <h1 style="color: blue; font-size: 24px;">Título</h1>
CSS Interno:
- É como fazer um plano de decoração específico para um cômodo da casa. Você coloca as regras de estilo dentro do documento HTML, mas em um lugar separado.
- Exemplo:
  <head> <style> h1 { color: blue; font-size: 24px; } </style> </head>
CSS Externo:
- É como contratar um designer para fazer todo o planejamento da decoração. Você tem um arquivo separado com todas as regras de estilo, e o HTML apenas segue essas regras.
- Exemplo:
  <head> <link rel="stylesheet" href="estilos.css"> </head>
  No arquivo estilos.css:
  h1 { color: blue; font-size: 24px; }

Vantagens do CSS

Separação de Estilo e Estrutura: Com o CSS, você separa a "decoração" da estrutura da casa, facilitando mudanças de estilo sem mexer na estrutura.
Reutilização de Estilos: Um plano de decoração pode ser usado em várias partes da casa. Da mesma forma, com CSS externo, você pode aplicar o mesmo estilo a várias páginas do site.
Controle Total do Layout: O CSS permite que você decida exatamente como cada parte do site deve aparecer, ajustando para que fique bonito em qualquer dispositivo.

Conclusão

CSS é como a arte de decorar um site, dando vida e cor ao conteúdo. Ele permite que você controle a aparência de tudo em uma página web, tornando a navegação mais agradável e funcional. Aprender CSS é como aprender a decorar: você começa com o básico e, com o tempo, vai criando designs mais complexos e bonitos.

AnteriorAbstração PróximoTag <div> para caixinhas

Atualizado há 7 meses

Isto foi útil?

Introdução

Como Funciona o CSS?

Seletores: São como as etiquetas que você coloca nas partes da casa para dizer o que vai onde. Eles indicam qual parte do HTML (como um título ou um parágrafo) você quer decorar.

Declarações: São as decisões de decoração – por exemplo, pintar a parede de azul ou usar uma fonte grande para um título. Elas dizem ao navegador como exibir cada parte que você marcou com um seletor.

Estrutura de uma Regra CSS

Uma regra CSS é como uma ordem que você dá ao navegador para ele decorar a página do jeito que você quer:

seletor {
    propriedade: valor;
}

Exemplo:

h1 {
    color: blue;
    font-size: 24px;
}

Neste exemplo:

h1 é como dizer "essa parede aqui", se referindo a todos os títulos grandes do site.

color: blue; é como dizer "pinte esta parede de azul".

font-size: 24px; é como escolher o tamanho das letras na parede.

Formas de Aplicar CSS

CSS Inline:

É como pintar uma parede diretamente, sem passar pelo planejamento. Você aplica o estilo diretamente na linha do HTML.

Exemplo:

<h1 style="color: blue; font-size: 24px;">Título</h1>

CSS Interno:

É como fazer um plano de decoração específico para um cômodo da casa. Você coloca as regras de estilo dentro do documento HTML, mas em um lugar separado.

Exemplo:

<head>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>

CSS Externo:

É como contratar um designer para fazer todo o planejamento da decoração. Você tem um arquivo separado com todas as regras de estilo, e o HTML apenas segue essas regras.

Exemplo:

<head>
    <link rel="stylesheet" href="estilos.css">
</head>

No arquivo estilos.css:

h1 {
    color: blue;
    font-size: 24px;
}

Vantagens do CSS

Separação de Estilo e Estrutura: Com o CSS, você separa a "decoração" da estrutura da casa, facilitando mudanças de estilo sem mexer na estrutura.

Reutilização de Estilos: Um plano de decoração pode ser usado em várias partes da casa. Da mesma forma, com CSS externo, você pode aplicar o mesmo estilo a várias páginas do site.

Controle Total do Layout: O CSS permite que você decida exatamente como cada parte do site deve aparecer, ajustando para que fique bonito em qualquer dispositivo.

Conclusão