Olá, aluno(a)! Na lição anterior, vimos sobre os elementos semânticos em HTML e como implementar uma página de web com estruturação, para que diversos leitores possam ter acesso às informações que as organizações disseminam sobre seus produtos e/ou serviços. Ao acessar um site, o navegador consegue interpretar o código HTML e CSS para transformar na página que seus olhos enxergam. Tudo vai do layout que o projetista de web designer cria para que a informação seja agradável e interessante para os usuários. Assim, nesta lição, trataremos do término do documento HTML, da Lição 2, e aprenderemos a renderizar com a linguagem Cascading Style Sheets (CSS). Então, mãos à obra!

A maior dificuldade que todo Desenvolvedor Front-End iniciante tem é saber quais elementos serão renderizados e como dividir o site em blocos ou seções. Por isso, focamos na parte de semântica em HTML, para que entenda sobre os tipos de elementos e tags que a maioria das páginas de site utiliza. Nesta etapa, aprenderemos a renderizar as páginas de internet. Isso facilita muito ao acessar a página de empresas corporativas, redes sociais, e ver como foi elaborada a diagramação. Depois desta lição, veremos os sites e aplicativos de maneira holística (como um todo), e isso é possível graças à linguagem de renderização em folhas de estilo cascata, conhecida como CSS.

As empresas de softwares precisam ter, em sua equipe, os melhores profissionais em desenvolvimento em Front-End. Por isso, nos dias atuais, estes profissionais são muitos requisitados, principalmente, para jogos interativos e sistemas corporativos, como: agências bancárias, sites de farmácias, lojas de eletrônicos, supermercados, entre outros.

Para se ter uma ideia do mundo que está adentrando, pense no site da Magazine Luiza. Quais as linguagens de programação que são aplicadas para que o site funcione? Quais as suas parcerias para que, todo dia, tenha promoção de diversos produtos? É apenas uma equipe que alimenta o site da MagaLu, para que sejam exibidas as promoções, ou o sistema que opera com desenvolvimento do Front-End (Interface) e Back-End (banco de dados e implementações com lógica de programação)?

Neste estudo de caso, aprenderemos sobre as propriedades da linguagem Cascading Style Sheets (CSS). Para que serve esta linguagem? Como consigo utilizar suas propriedades para que a maioria dos navegadores consiga interpretar e renderizar o site conforme o designer projetou o layout? Para treinamento, utilizaremos o mesmo layout do objetivo, implementando as propriedades conforme especificado pela equipe de designer. O fundamento desta disciplina é simular uma situação de como o Desenvolvedor Front-End opera na prática, em seu dia a dia de trabalho, ou seja, nas empresas que o contratam.

Em média e por experiência, o Desenvolvedor Front-End leva em torno de três a quatro horas para codificar um site proposto pela equipe de designer. Lembrando que o cliente tem que aprovar o layout para que o seu desenvolvimento aconteça. Como já implementamos os elementos HTML na lição anterior, focaremos em entender sobre as propriedades e renderização do CSS. A estrutura deve ser sólida para não gerar retrabalho, por isso, precisamos nos aprofundar neste estudo. Assim, o treinamento e aperfeiçoamento em sempre estudar essas propriedades ajudam todo o desenvolvedor de Front-End a adquirir confiança e experiência em sua vida profissional. Pratique sempre!

Como já implementamos as tags de HTML na lição anterior, estilizaremos cada parte do site, visto que cada conteúdo terá um resultado diferente. Assim, o nosso objetivo é renderizar o documento HTML criado, para que tenha um estilo personalizado. Estudaremos o código HTML a seguir:

Analisaremos o documento HTML, para começarmos a renderizar a página inicial do site. Na linha 8, temos a inserção para a folha de estilo, que deve ser criado em um arquivo separado com o nome styles.css. Portanto, a Figura 1 ilustra como deve ficar o diretório e os arquivos para esta lição.

A Figura 1 apresenta a padronização dos diretórios, que, no nosso caso, temos, como diretório raiz, o SitePizzaria. Dentro, temos dois diretórios, nomeados css e img, lembrando que, em relação aos nomes dos diretórios e arquivos, fica a seu critério, mas, para fins didáticos, vamos nomeá-los conforme a Figura 1. No diretório css, foi criado um arquivo com a extensão .css. Toda vez que criamos um arquivo css, temos que nomeá-lo com esta extensão, o mesmo é utilizado para os arquivos para documentos em HTML, como é caso da página inicial do exemplo que estamos implementamos, index.html.

O diretório img contém as imagens em forma de slice (separadas). Assim, a intenção é aprender as propriedades existentes na linguagem CSS. O diretório img estará disponível no Google Drive. A Folha de Estilo em Cascata, ou Cascading Style Sheet, é uma linguagem separada do HTML. O objetivo do CSS é zelar pela estilização e personalização das páginas de internet. A sua vantagem é ser robusto em relação aos elementos que compõem o HTML. Assim, conseguimos escrever uma formatação de modo visual, mesclando os estilos com os elementos em HTML. Temos, então, que o CSS consegue separar os estilos personalizados e não precisamos deixar poluída a estruturação do documento HTML (LEPSEN, 2018).

A sintaxe do CSS é composta de uma estrutura simples, que é feita pela declaração de propriedades e valores separados por um sinal de dois pontos (:), sendo que, ao final de cada propriedade, utiliza-se o sinal de ponto e vírgula (;), conforme ilustrado:

No nome seletor, utilizamos as tags dos elementos em HTML. Por exemplo, <body>, <header>, <footer>, entre outros. A propriedade é empregada à modificação do estilo que desejamos personalizar (UZAYR, 2022). No nosso exemplo, começaremos a aplicar CSS a partir da tag <body>, vejamos, então, como utilizar as propriedades do CSS:

Analisemos linha a linha: 

• Linha 1: na primeira linha, utilizamos no seletor o sinal de *, que significa que queremos que os navegadores resetem as propriedades de margin e padding (SILVEIRA; ALMEIDA, 2013).

• Linha 2:  a propriedade margin é aplicada para resetar o valor em 0px, isso quer dizer que teremos, como margem da página, zero pixels. Na propriedade CSS, podemos aplicar o valor, como: auto, ch, cm, em, ex, fr, in, mm, pc, pt e px.

• Linha 3: a propriedade padding é utilizada para definir a distância entre o conteúdo de um elemento em relação a suas bordas. Algumas subpropriedades do padding são: padding-top, padding-right, padding-bottom, padding-left. Neste caso, aplicamos a propriedade padding para resetar tanto o topo, direita, baixo e esquerda. O mesmo serve para a propriedade margin (MDN, 2022).

• Linha 4: temos a propriedade box-sizing, que modifica as propriedades de alturas (heights) e larguras (widths) dos elementos. O valor que adotamos foi border-box, utilizado especificamente nas propriedades de largura (width) e de altura (height), incluindo o tamanho do padding size e a propriedade border. Esta propriedade, para muitos navegadores, não inclui a de margin (LEPSEN, 2018; MDN, 2022).

• Linhas 1 e 5: tanto para iniciar como fechar um seletor de estilo em CSS, aplicamos o caractere de chave, {, para iniciar e finalizar.

• Linha 6: iniciamos outro seletor que é do elemento <body>, especificado no documento em HTML, e abrimos o CSS com o caractere de chave, {.

• Linha 7:  aplicamos a propriedade background-image, ou seja, queremos que a imagem de fundo seja de uma pizza para chamar a atenção do cliente que está acessando nosso site e, também, apresentar nosso produto de maneira holística, que chame a atenção do cliente pelo aspecto e sabor.

• Linha 8: temos a propriedade background-size, que especifica a proporção das imagens de fundo, ou seja, qual o tamanho que a imagem terá. Ela pode ser, totalmente, tanto altura e largura da própria imagem ou pode ser parcial. O valor adotado foi cover, que ajusta a imagem de forma que sua proporção seja de largura máxima, sem deformar a imagem.

• Linha 9: a propriedade font-family é adotada para escolher uma fonte para que o interpretador do navegador (browser) decodifique para nós. No nosso caso, o navegador está utilizando a primeira fonte da lista, que é: system-ui. Caso não a encontre, inserimos uma lista de fontes para que o navegador possa interpretar, sendo fontes padronizadas e sem serifas. As fontes sans-serif utilizam traços e desenhos simples, sem alargamentos ou achatamentos em sua forma (W3SCHOOLS, [2022]).

• Linha 10: Fecha-se o seletor do <body> com o caractere de chave, }.

A linguagem CSS é muito rica e versátil em suas propriedades. Uma dica é que sempre pratique e estude sobre esta poderosa ferramenta. Busque sempre aprender sobre as duas linguagens citadas até aqui, isso faz um enorme diferencial em sua carreira profissional como Desenvolvedor(a) Front-End.

Esta lição apresentou os principais fundamentos sobre a linguagem CSS e o objetivo é aprender a aplicar na prática como funcionam os seletores, as  propriedades e os valores. Agora é a sua vez de saber aplicar e dominar a linguagem CSS. Para isso, personalize o menu de navegação apresentado dentro da tag <header></header>, como segue:

Dica: caso necessite aplicar a renderização na tag <ul id="menu-esquerda"> o seletor ficará da seguinte forma:

Repare que, no elemento <ul>, tem um id associado a ele, isso significa que, para personalizar, precisamos chamar esta propriedade. Para renderizá-lo, basta utilizar o caractere de #.