Como mudar o header no CSS e outros hacks

Olá! Meu nome é Mariana, como vai você? Se precisa mudar sua relação com o CSS e avançar com tranquilidade na concepção de seus projetos, continue lendo porque vou te dar algumas dicas valiosas.

Quando começamos a programar pensamos: “Por que não podemos mexer nisso? Oh! Que raiva!".

Sim, podemos mudar isso. Vamos começar com algumas dicas para um bom CSS:

1. Observe o layout antes de começar a escrever. É sempre muito útil desenhar no Paint por seções onde você deseja que cada elemento vá.
2. Depois de fazer essa divisão, escreva o HTML e depois o CSS.
3. Lembre-se de usar as classes com sabedoria para identificá-las em nosso CSS.

Uma vez que o HTML é desenvolvido, vamos para o CSS. Quando começamos a programar, queremos fazer as duas coisas ao mesmo tempo, mas isso não é muito útil porque muitas vezes você pode tropeçar entre a lógica e o visual, então recomendo HTML primeiro e depois CSS.

Agora, o que é CSS? Sua sigla significa Cascade Style Sheet, ou seja, estiliza seu HTML para dar um estilo mais colorido.

Em CSS, é aconselhável contar com o Flexbox, pois suas propriedades permitirão que você manipule um ou vários elementos sem quebrar a estrutura do seu HTML e sem sofrer desnecessariamente. Este jogo de Flexbox me ajudou muito na minha inicialização:

Flexbox Froggy

A game for learning CSS flexbox

A game for learning CSS flexbox

Antes de mostrar o código do nosso exemplo, compartilho algumas recomendações finais, então tome cuidado:

Sabemos que muitas vezes podemos ficar presos nas propriedades do CSS, então convido você a abrir o HTML em seu navegador, clicar com o botão direito e selecionar inspecionar. Se você não tem certeza de qual código implementar em seu VS, zublime ou codificador de texto, pode testar as propriedades em tempo real para examinar as alterações diretamente em seu navegador. Depois que o que você tinha em sua cabeça funcionar, lembre-se de aplicar essas alterações ao seu arquivo HTML. Será muito mais fácil assim.

Finalmente, recicle o código sempre que puder. Isso economiza seu tempo. Nas primeiras vezes, devemos aprender do zero como as ferramentas funcionam. Mais tarde você verá que existem padrões no código, que nos ajudarão a economizar tempo e adaptá-los ao que precisamos, então não tenhamos medo de reciclar. Não é pirataria, é adaptabilidade.

Agora apresento um breve exemplo de cabeçalho:

Código HTML

Código CSS

Para modificar um header ou cabeçalho, devemos primeiro gradear nosso design CSS em divs.

Os próprios headers não precisam de divs, pois se comportam como uma divisão em si, mas permitem que o programador pense com clareza.

Feito isso e estando claro o projeto final necessário, fazemos as seguintes adaptações em nosso código.

Margem 0 vertical e auto horizontal. Aplicamos a propriedade flex para justificar o conteúdo de acordo com a caixa divisória principal do nosso código, uma largura ou width de 1000 px (o padrão de uma página web) e, por fim, um padding para que haja margens internas iguais de cima para baixo e da direita para a esquerda.

Abaixo o código:

Resultado:

Esta é a maneira responsiva de poder editar seu cabeçalho CSS. Agora, se você não se sentir confortável usando o Flexbox (que é altamente recomendado), você pode escrever:

h2 {font-size: 60%; line-height:60%;}

Isso permite que você personalize totalmente o cabeçalho, mas não afetará o layout de sua margem ou os elementos que estão no restante do layout da página.

Que tal este exemplo? Você pode ver esta página no meu GitHub se quiser dar uma olhada mais profunda no código.

É sempre importante buscar referências entre outros desenhos e fazer passo a passo o que outros já fizeram. Essa é a maneira de obter segurança em nosso código e velocidade em nosso código na entrega de um projeto.

Até a próxima!