CSS - Introdução

João E. -

O que é CSS?

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). É uma linguagem de folha de estilo usada para descrever a apresentação de um documento escrito em uma linguagem de marcação, como HTML ou XML. O CSS permite estilizar e estruturar páginas da web, especificando como os elementos devem ser renderizados na tela, papel ou em outras mídias.

O CSS trabalha em conjunto com o HTML. Enquanto o HTML é responsável pela estrutura e conteúdo de uma página da web, o CSS se concentra na apresentação visual e no layout. Ele permite controlar vários aspectos da aparência da página da web, como cores, fontes, espaçamento e posicionamento.

Com o CSS, você pode aplicar estilos a elementos HTML específicos ou grupos de elementos.

Exemplo: Estilos CSS para Elementos HTML

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

div {
    background-color: lightgray;
    padding: 10px;
}

Ao usar CSS:

  • Você pode separar a lógica de apresentação do conteúdo estrutural de suas páginas da web.
  • Essa separação melhora a manutenibilidade e a reutilização.
  • Você pode definir estilos em um arquivo CSS externo e vinculá-lo a várias páginas HTML.

Exemplo: Vinculando um Arquivo CSS Externo

<link rel="stylesheet" type="text/css" href="styles.css">

O CSS também permite criar designs responsivos que se adaptam a diferentes tamanhos de tela e dispositivos.

Exemplo: Media Queries CSS

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Em resumo, o CSS é uma ferramenta importante para desenvolvedores e designers web. Ele oferece controle sobre a aparência de suas páginas da web em diferentes dispositivos e telas.

Por que usar CSS?

O CSS é uma ferramenta para desenvolvimento web. Existem várias razões para usar CSS em seus projetos web:

O CSS separa a apresentação de uma página web de sua estrutura e conteúdo. Isso significa que você pode definir os estilos visuais de sua página web separadamente da marcação HTML. Ao manter a lógica de apresentação em um arquivo CSS separado, seu código HTML se torna mais limpo e mais focado na estrutura e conteúdo da página. Essa separação torna seu código mais fácil de atualizar no futuro.

O uso de CSS permite ter mais controle sobre a aparência de suas páginas web. Com CSS, você pode especificar várias propriedades visuais para elementos HTML, como cores, fontes, espaçamento, bordas e fundos. Você pode aplicar diferentes estilos a elementos específicos ou grupos de elementos, dando-lhe um controle detalhado sobre a aparência de sua página web.

O CSS reduz a complexidade e a repetição no conteúdo estrutural de suas páginas web. Sem CSS, você precisaria aplicar os mesmos estilos a cada elemento HTML separadamente, o que pode levar a muita repetição e código inchado. Com CSS, você pode definir estilos uma vez e aplicá-los a vários elementos usando seletores. Isso reduz a duplicação de código e torna seu HTML mais conciso.

Um recurso poderoso do CSS é compartilhar a formatação em várias páginas web. Ao definir estilos em um arquivo CSS externo, você pode vincular esse arquivo a várias páginas HTML. Isso significa que você pode fazer alterações globais modificando um único arquivo CSS em vez de atualizar os estilos de cada página individual.

Como o CSS Funciona?

O CSS funciona aplicando estilos aos elementos HTML em uma página da web. Os estilos são definidos usando regras CSS, que consistem em seletores e blocos de declaração.

As regras CSS podem ser definidas em um arquivo separado com extensão .css, ou podem ser incorporadas ao documento HTML usando a tag <style>. Ao usar um arquivo CSS externo, você precisa vinculá-lo ao seu documento HTML usando a tag <link> na seção <head>.

Vinculando um Arquivo CSS Externo

Exemplo: Vinculando um Arquivo CSS Externo

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Cada regra CSS consiste em um seletor e um bloco de declaração. O seletor aponta para o elemento ou elementos HTML que você deseja estilizar. Pode ser um seletor de elemento (por exemplo, p para parágrafos), um seletor de classe (por exemplo, .highlight para elementos com a classe "highlight"), ou um seletor de ID (por exemplo, #header para o elemento com o ID "header").

Sintaxe da Regra CSS

Exemplo: Sintaxe da Regra CSS

seletor {
    propriedade1: valor1;
    propriedade2: valor2;
}

O bloco de declaração é envolvido por chaves {} e contém uma ou mais declarações. Cada declaração especifica uma propriedade CSS e seu valor correspondente, separados por dois pontos :. Múltiplas declarações dentro de um bloco são separadas por ponto e vírgula ;.

Bloco de Declaração CSS

Exemplo: Bloco de Declaração CSS

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

Quando um navegador web carrega uma página, ele lê os arquivos HTML e CSS. O navegador então aplica essas regras aos elementos HTML correspondentes de acordo com as propriedades e valores declarados. Esse processo é chamado de renderização.

O CSS também permite cascata e herança. Se várias regras se aplicam a um elemento, a regra com maior especificidade tem prioridade. Algumas propriedades são herdadas por elementos filhos de seus elementos pais.

No geral, o CSS define regras que têm como alvo elementos HTML e especifica suas propriedades visuais para que você possa controlar a aparência de suas páginas web.