Conhecer bem a base front-end com certeza é uma tarefa bem complicada para quem está começando a programar. Entre HTML, CSS e JavaScript, hoje quero trazer um conteúdo mais voltado para estilização da página.

Nesse artigo vou supor que você já tenha conhecimentos básicos de HTML, mas não de programação e lógica. Se você está começando sua jornada e, após ler o texto, tenha alguma dúvida, por deixe nos comentários para que eu tente ajudar.

Trouxe nesse artigo informações e funcionalidades que julgo serem quase que essenciais para quem está começando a jornada no front. Por isso, se você já tem certa experiência, talvez algumas partes sejam repetitivas, então se sinta livre para pular ou revisitar os temas.

O que é CSS?

CSS (Cascading Style Sheets) é uma linguagem de estilo criada em 1996 e aplicada hoje em todos os navegadores modernos. Essa linguagem serve para estilizar a página, podendo aplicar cores, imagens e personalizar elementos já existentes.

O CSS pode ser aplicado diretamente no HTML, mas, normalmente, ele é encontrado em um arquivo externo (.css) que fará a parte de estilização da página.

Na maioria dos casos, as propriedades do CSS são ligadas diretamente a uma classe, apesar de também haver a possibilidade de utilizar um id como referência, algo não muito recomendado. Além disso, é possível utilizar a própria tag HTML para fazer essa ligação, apesar disso não ser tão usado.

Como funciona o CSS

O CSS é renderizado no navegador assim que o usuário acessa a página. O processo de construção acontece após a estruturação do HTML, servindo para pintar os elementos de estilização em tela.

Normalmente, o CSS é chamado na tag head do HTML e suas modificações vão afetam o body da página. No código, você verá um arquivo .css sendo importado da seguinte maneira:

<link rel="stylesheet" href="css/base.css">

Para aplicar os estilos, precisamos definir duas coisas: a classe ou o id, que será usado como referência para o CSS, e os atributos, que serão aplicados no arquivo .css.

// index.html
<button class="botao">A estilização será aplicada aqui</button>

// index.css
.botao {}

Todos os atributos do CSS são declaradas dentro das chaves e elas impactam diretamente no HTML da página. Confira o exemplo.

.botao {
    background-color: #f1f1f1;
}

No caso acima, o botão criado no body ficará com o fundo branco. Vale lembrar que a cor pode ser facilmente modificada mexendo no hex — #f1f1f1 no exemplo acima.

Height e Width (Altura e Largura)

Se você já leu algum código CSS, muito provavelmente esbarrou com o height e o width. Essas duas propriedades são responsáveis pela altura e largura de um elemento, respectivamente. Isso é muito interessante em diversas situações e talvez seja o conhecimento mais básico da estilização.

.botao {
    height: 100vh;
    width: 90%;
}

No exemplo acima, são usadas duas propriedades para definir o tamanho dos elementos. O primeiro, o "vh", se refere ao tamanho da tela, sendo 100vh a altura de uma tela inteira. No segundo, foi usado porcentagem no width, definindo que deve ocupar 90% da tela em largura.

Além desses dois, também é possível utilizar pixels para definir o height e o width.

.p {
    width: 300px;
}

Background

Seguindo a mesma linha de pensamento, acho que uma das propriedades que mais vale a pena entender é o background.

No background, você consegue definir cor, imagens e posicionamento de arquivos indexados. Isso pode ser muito útil quando você precisa definir a cor de fundo de um elemento ou quer colocar uma imagem personalizada.

Vale lembrar que o background e seus derivados sempre fazem referência ao fundo do elemento. Portanto, suas outras propriedades, como cor do texto ou tamanho do elemento devem ser modificadas através de outras propriedades.

Atualmente, esse atributo engloba as propriedades background-image, background-color, background-repeat, background-attachment e background-position. Além disso, é possível utilizar somente a propriedade background, que serve chamar todas as outras opções. Confira a sintaxe.

.elemento {
    background-color: #020202; 
    /* define a cor de fundo */

    background-repeat: repeat no-repeat repeat-x repeat-y; 
    /* define que, caso haja imagem, ele deve ou não repetir e em qual direção */

    background-attachment: scroll fixed local initial inherit; 
    /* define o comportamento do elemento quando usuário movimenta a tela (scroll) */

    background-position: center initial inherit;
    /* define a posição da imagem em relação ao elemento */

    background-image: url('https://www.example.com/image1.png'); 
    /* define a imagem */
}

Caso você queria uma explicação mais completa (e em inglês), confira o artigo sobre o background logo abaixo.

• Background | CSS Tricks

Color

O color, assim como o background, também serve para modificar a estilização de um elemento específico. Essa propriedade modifica a cor do texto, independente de ser um h1, h2, h3, h4, h5, h6, p ou qualquer elemento que possa receber um texto.

No código, você consegue definir o color da seguinte forma:

p {
    color: #020202;
}

No exemplo acima, todas os p da página terão a cor #020202. Isso pode ser modificado caso você defina uma classe e coloque um color novo. Leia uma explicação mais completa sobre o color no artigo abaixo:

• Color | CSS Tricks

Flexbox

Diferente do color e do backgournd, o flexbox afeta de maneira mais global os elementos. Nele, você consegue definir como uma parte dos elementos serão organizados, algo que é muito útil em diversas situações.

Por exemplo, você pode definir se um conjunto de elementos deve ficar em linha ou em coluna. Para isso utilizamos o flex-direction, que pode ser definido como row, row-reverse, column e column-reverse.

No entanto, antes disso, você precisa definir que o flexbox está sendo usado naquele elemento. Nesse caso, precisamos chamar o display como flex.

display: flex;

O display é uma propriedade que serve exatamente para dar contexto ao seu código. Por exemplo, você pode definir ele como "none", para deixar o elemento invisível, ou "fixed", para que o elemento esteja fixo na tela. Por padrão, o display é block.

Sempre que você definir o display como flex ele ficará com o row, em linha. No entanto, você pode modificar isso colocando o flex-direction para column ou qualquer outras propriedades aceitas.

flex-direction: row row-reverse column column-reverse;

Recomendo muito que você veja a documentação tanto do display quanto do flexbox. Links logo abaixo.

• Display - CSS | MDN
• Conceitos básicos de flexbox | MDN

Seletores

No CSS, os seletores são responsáveis por definir o que deve acontecer numa determinada classe ou id e funcionam como uma extensão dos atributos. Por exemplo, se usuário passar o mouse por cima de um button e ele mudar de cor, muito provavelmente foi usado o seletor hover para fazer essa alteração.

Além disso, é possível definir outros tipos de modificações, como especificar o que deve acontecer com a primeira letra de um parágrafo usando ::first-letter.

p::fist-letter {
    color: #020202
}

Todos os seletores são chamados usando sempre dois pontos (:), podendo ter até dois dele para chamar um determinado seletor. Alguns exemplos de seletores que você pode achar com facilidade são ::before, ::after, :active, :focus, :hover e :placeholder.

A lista de seletores é bem extensa, então vou deixar o um artigo que cita todas as propriedades que podem ser aplicadas usando CSS.

• Selectors | CSS Tricks

Variáveis

Além das propriedades que modificaram diretamente o código, há alguns atalhos e ferramentas do próprio CSS que podem poupar muito tempo. As variáveis são um claro exemplo disso, uma vez que você pode definir uma cor ou qualquer outra informação e chamar ela em várias partes do código. Veja o exemplo:

/* base.css */
:root {
    --primary-color: #020202;
}

/* main.css */
.p {
    color: var(--primary-color);
}

.h1 {
    color: var(--primary-color);
}

Normalmente as variáveis são criadas no root da página. Apesar do exemplo usar uma cor, você pode passar qualquer propriedade numa variável, como tamanho da fonte ou espaçamento das letras, por exemplo.

@media

Se você já ouviu falar sobre responsividade na web, muito provavelmente entendeu o quão isso é importante no front-end. Páginas responsivas permitem que mais usuário, em diferentes dispositivos, possa acessar seu front e se sentir confortável.

No CSS, deixamos uma página responsiva utilizando o @media. Essa funcionalidade permite que uma única página possa se adaptar para diversos dispositivos. Para isso, você precisa especificar o tamanho mínimo, com min-width, ou o tamanho máximo, com max-width.

@media only screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

No exemplo acima, o @media define que qualquer usuário que esteja vendo a página num dispositivo com, no mínimo, 600 pixels de largura deve ver o background azul.

• CSS @media rule

Conclusão

Tentei deixar esse conteúdo o mais de didático possível para quem está começando a jornada, mas se você chegou até aqui e ainda tem alguma dúvida, por favor, deixe nos comentários para que eu tente ajudar.

Ao longo do texto deixei alguns links, então, se quiser, fique a vontade para revisitar esse artigo e acessar os artigos recomendados enquanto prática suas habilidades com CSS.