CSS para iniciantes: O que é e como funciona o CSS?

CSS, ou Cascading Style Sheets é uma linguagem de marcação utilizada para adicionar estilo em páginas HTML. É uma das tecnologias mais importantes na web, pois permite que os desenvolvedores definam a aparência e a disposição dos elementos em uma página HTML.

O CSS é usado para especificar como os elementos HTML, como títulos, parágrafos, tabelas e imagens, devem ser exibidos na tela. É possível, por exemplo, definir o tamanho e o tipo de fonte de um título, a cor de fundo de uma página ou a posição de uma imagem na tela. 

Além disso, o CSS permite que você crie estilos padronizados ou mais genéricos que possam ser aplicados a várias páginas de uma só vez, o que torna muito mais fácil e rápido alterar a aparência de um site.

O CSS possui regras em sua escrita que chamamos de sintaxe. Cada regra consiste em um seletor, que identifica o elemento HTML que será estilizado, e em uma ou mais declarações, que especificam como o elemento deve ser exibido. Por exemplo, a seguinte regra define que todas  as tags <h1> devem ter uma fonte de 20 pixels e uma cor verde:

h1 { 
   font-size: 20px; 
   color: green; 
}

O CSS permite a você trabalhar com diversos aspectos da apresentação de uma página web, incluindo:

• Layout: É possível especificar a posição dos elementos na página, definir seu tamanho e espaçamento, e controlar a largura e altura de elementos como tabelas e imagens.
• Tipografia: É possível especificar a fonte, tamanho, cor e estilo de texto, além de controlar o espaçamento entre linhas e entre letras.
• Cores: É possível especificar as cores dos elementos, incluindo a cor de fundo, a cor de texto e as bordas.
• Backgrounds: É possível especificar imagens e cores de fundo para elementos, além de controlar a repetição e a posição de imagens de fundo.
• Transições e animações: É possível criar efeitos suaves e animações ao alterar o estilo de um elemento, como mudar a cor de fundo ou o tamanho da fonte ao passar o mouse.

Como aplicar CSS em uma página HTML

O CSS precisa estar vinculado a um arquivo HTML para poder se comunicar com os elementos e poder impactar a tela com suas alterações visuais e temos algumas formas de fazer isso, veja: 

Folha de estilo externa: o CSS é armazenado em um arquivo separado com extensão .css e é vinculado ao HTML através da tag <link> no cabeçalho do arquivo HTML. Isso permite que as propriedades de estilo sejam aplicadas em várias páginas da web.

Folha de estilo interna: o CSS é inserido diretamente no cabeçalho do documento HTML, entre as tags <style> e </style>. Isso é útil para aplicar estilos específicos a uma página individual.

Estilos inline: o CSS é aplicado diretamente aos elementos HTML usando o atributo style. Isso é útil para aplicar estilos a elementos individuais que não precisam ser compartilhados com outras páginas.

Identificando um elemento HTML no CSS

Podemos nos referir a um elemento HTML de várias formas, as mais comuns são:

Seletores de elemento: são os seletores mais simples, que selecionam elementos HTML com base no nome do elemento. Exemplo:

p{
    color: green;
}

Seletores de classe: selecionam elementos com base no valor do atributo class. Exemplo:

.paragrafo-personalizado{
    font-size: 25px;
}

Seletores de ID: selecionam um único elemento com base no valor do atributo id. Por exemplo:

#cabecalho{
    background: black;
}

O céu é o limite se você se aplicar em aprender sobre CSS e suas diversas formas de aplicação em um documento HTML.