Loading...Loading...
181

O que é CSS? Dando os primeiros passos

By Pedro Ladeira

Last update at 04/09/2021

Na seção de Aprendizado, iremos aprender como o CSS funciona e a sua estrutura. Na seção Caminhada, iremos ver como construir uma marca em volta de você é importante. Por fim, temos a nossa seção de exercícios e desafios para você treinar. Vamos lá!?
Se você caiu de paraquedas nesse episódio, aqui falamos sobre programação e estamos bem no início. Já falamos sobre HTML e estamos entrando pela primeira vez em um novo assunto. Caso queira ler os episódios anteriores é só entrar aqui. Garanto que irá gostar! 😊
Como de costume, sempre indico um conteúdo além para você se aprofundar e não ficar apenas dependendo de mim. O conteúdo da vez é o canal do Lucas Montano. Ele produz vídeos sobre programação e são no mínimo uns 3 por semana. É um cara que gosto bastante de acompanhar e acredito que será bom para você também. 
Já se prepara aí e vamos codar! 💻

<div> Aprendizado </div>

Essa seção é sempre uma continuação dos episódios anteriores. Por isso, caso você não saiba o que é HTML, recomendo que leia o meu segundo episódio: Rumo ao Júnior - 02: Primeiros Passos com HTML, Processo de Aprendizado e Construindo uma Página. Acredito que irá te dar uma baita noção.

Introdução ao CSS

Usar apenas o HTML para fazer um website é algo muito simplório. Os sites bonitões que há por aí são todos estilizados com o CSS.
Cascading Style Sheets é uma ferramenta que irá possibilitar você mudar fontes, cores, imagens, vídeos, sombras, posicionamento de elementos e muito mais coisas.
Embora o CSS seja uma ferramenta completamente diferente do HTML, é possível escrever o CSS dentro do HTML.
Para estilizar um HTML Element, você pode adicionar um style attribute diretamente na Opening Tag. Logo, você diz o que quer que aconteça. Vamos ver:
O exemplo acima é conhecido como Inline Styles, pois você está adicionando o CSS na mesma linha que escreveu o HTML.
Podemos perceber que o elemento <p>, em sua Opening Tag, possui um style attribute e este está dizendo que sua cor irá ser vermelha.
É exatamente isso que irá ocorrer. O texto "Estou aprendendo CSS" ficará em vermelho. Porém, suponha que você está achando o tamanho do texto muito pequeno e deseja aumentar.
Para isso, existe o font-size que diz em qual tamanho o seu texto irá ficar. Perceba que eu coloco 20px. px, neste caso, é apenas uma unidade medida e existe várias outras. Portanto, meu texto agora é vermelho e possui um tamanho de 20px.
Caso queira adicionar mais um estilo na mesma linha e no mesmo elemento, você precisa separar esses estilos com ponto e vírgula (;)

<style> Tag

Usar o Inline Styles é uma forma rápida de estilizar um HTML Element, porém há suas limitações. Vamos supor que você queira estilizar todos os <p> do seu website. Usando o Inline Styles, você teria que adicionar o style attribute na Opening Tag de cada <p>. Isso iria dar um baita trabalho, não é mesmo?
Felizmente, o nosso arquivo HTML permite que tenhamos uma seção separada para escrever o nosso CSS. Para isso, você deve utilizar a <style> tag dentro do <head>. Desse modo:
Depois de adicionar o <style>, você irá escrever o seu CSS dentro dele. Eu não quero que você se preocupe com a escrita que irei te mostrar agora, pois a sintaxe em si será abordada mais para frente.
O CSS adicionado acima faz com que todos os nossos parágrafos tenham a cor vermelha e o tamanho de 20px.

Arquivo .css

Por mais que seja possível escrever CSS dentro do HTML, desenvolvedores evitam ao máximo que isso aconteça. O arquivo .html deve ter apenas HTML  e o arquivo .css deve ter apenas CSS
Eu te ensinei o Inline Style o <style> para você conhecer esses outros meios. Embora eu não recomende que use, pode ser que uma hora seja necessário e conhecimento nunca é além, não é mesmo?
Com um arquivo .css, você irá escrever todo o código necessário para uma página completa. Tudo irá ficar organizado lá.
A maneira que você cria um arquivo CSS é da mesma maneira que criamos um HTML nos episódios anteriores. Basta que você coloque .css no final do arquivo. Por exemplo, style.css
Há um detalhe que é muito importante. Depois de criado um arquivo .css, não basta apenas escrever lá. Não haverá mudança alguma no seu site.
Para que você veja as coisas acontecendo, o seu arquivo HTML deve estar ligado ao seu arquivo CSS. Assim, qualquer linha escrita no .css, será interpretada pelo .html.
Para fazer essa ligação, você deve escrever o seguinte código dentro do <head>:
A <link> tag é usada para fazer esse link entre os dois tipos de arquivos. Ela é uma tag que se fecha sozinha (não há Closing Tag) e que necessita dos seguintes attributes:
  • href: o endereço do seu arquivo .css
  • type: uma descriçãodo tipo de arquivo que você está "linkando". Ao "linkar" .html com .css, esse attribute deve ser igual a text/css
  • rel: uma descrição da relação entre os arquivos "linkdados". Como estamos "linkando" para um arquivo que irá fazer as estilizações, esse attribute deve ter o valor igual a stylesheet.
Acredito que agora você seja capaz de criar um arquivo CSS e fazer a ligação com o HTML. Se não tiver entendido alguma coisa, pode me chamar no instagram. Estou 100% disponível para você a qualquer momento!

Tag Name

Agora, precisamos ver como escrever o CSS de fato dentro do nosso arquivo .css.
O CSS funciona da seguinte maneira: uma vez que ele faz ligação com o HTML, você irá selecionar os elementos que irá aplicar uma certa estilização.
De início, irei te mostrar como selecionar HTML Elements pelo seu nome. A Tag Name é aquela letra/palavra que está entre < e > no HTML. 
Por exemplo, a tag de um parágrafo no HTML é o <p>. Para eu selecionar esse <p> pelo seu Tag Name, eu vou escrever o CSS da seguinte maneira:
No exemplo acima, todos os <p> do nosso arquivo HTML foram selecionados e terão cor vermelha e tamanho de 20px.
Podemos dizer que o CSS está selecionando nossa tag <p>. Pode ser que você encontre pela internet a expressão CSS Selector que é justamente o que o CSS faz, selecionar elementos.
Além disso, logo após selecionar o HTML element, você deve adicionar { } e aí dentro escrever as propriedades CSS que irão dar vida ao seu site.
A ideia aqui não é que você saiba o que escrever dentro das { }, porque isso veremos em um outro episódio. Hoje, estou apenas te apresentando a sintaxe.
Chegamos ao fim da nossa seção Aprendizado, na qual você pegou a base do CSS e como usamos ele em nossos arquivos HTML.
No próximo episódio, irei passar por todas as formas que temos de selecionar HTML Elements, tendo em vista que você já aprendeu selecionar por Tag Name. Não perca na próxima semana, hein!

<div> Caminhada </div>

Como essa seção é dedicada para as reflexões da semana, vou te contar uma que tive durante uma longa caminhada que fiz.
Recentemente, escutei um podcast que falava da importância de fazer o seu marketing pessoal como um programador. Pode ser coincidência ou não, mas no mesmo dia, encontrei um amigo em uma caminhada e falamos justamente sobre o mesmo assunto em diversas áreas profissionais.
Reflita comigo. Hoje em dia, se você pegar adultos que estão quase se aposentando, dificilmente eles se preocupam com o seu marketing pessoal e como poderiam estar atraindo mais pessoas para o seus negócios se tivessem uma representação nas mídias sociais.
Eu diria que para eles até não valeria a pena fazer algo assim. Porém, se pegamos os jovens, a realidade muda drasticamente.
Em um mercado de profissionais cada vez mais competitivos, aqueles que não possuem nenhuma representação nas mídias, dificilmente irão se destacar.
Atualmente, existem pessoas com pouco conhecimento, mas que compartilham com outras pessoas esse conhecimento. Por outro lado, há pessoas extremamente técnicas que não produzem e nem compartilham nada. Qual você acha que estará na boca do povo ou recrutadores? São aquelas pessoas que produzem conteúdo e são encontradas nas redes sociais.
Indo para um lado da programação, a ideia é que as empresas te achem e não que você vá atrás delas.
Mas como fazer isso?
Tendo representação na internet. Daqui um tempo irei falar sobre o GitHub, mas se você está lendo isso aqui e já sabe o que é, tente sempre atualizá-lo. Poste o que estiver estudando independente do que for. Além disso, produza artigos ou textos sobre as tecnologias que estuda. Assim, você deixará visível para as pessoas que estará estudando aquele assunto, aumentando muito sua chance se ser encontrado e contratado.
Por fim, não basta que depois de contratado, você pare de ter representatividade. E se você for demitido? Teria que recomeçar todo esse processo. Produza e tenha representatividade independente do momento que estiver vivendo.

<div> Exercícios e Desafios </div>

Para colocar em prática tudo o que você leu, irei passar alguns exercícios e um pequeno desafio para você.

Exercícios

As respostas só irão ser disponibilizadas no episódio da próxima semana
1) Qual o propósito da tag <link> quando queremos dar estilo a um site?
a) Para ter certeza que você usou o Inline Style da forma correta
b) Para determinar as especificações do CSS
c) Para ligar um stylesheet a um arquivo HTML
d) Para garantir que o CSS irá funcionar
2) Por que devemos separar o HTML e o CSS em arquivos diferentes?
a) Para ter um visual mais bonito no .css
b) Ter um código mais legível
c) Separar o HTML do CSS faz com que fique mais fácil de ler e manter ao longo do tempo
d) Por que usar a tag <link> é obrigatória para usar o CSS
3) Qual a principal diferença entre a tag <style> e o Inline Style?
a) Não há diferenças
b) Inline Style modifica diretamente aquele elemento, enquanto a <style> é escrito no HTML em uma seção dedicada a ele
c) A tag <style> te permite escrever em um arquivo separado ao passo que o Inline Style é escrito dentro da Opening Tag
d) Inline Style te permite escrever em um arquivo CSS, enquanto a <style> deve estar dentro das Opening Tags
4) <p color="red">Eu não estou vermelho</p>. O parágrafo anterior deveria estar em vermelho, porém há uma falha. Por que?
a) Deve se usar a tag <style>
b) O color attribute não é válido. Deveria ser usado o style attribute. 
c) A cor red deveria ser escrita em caixa alta: RED
5) Você deseja ligar um arquivo chamado style.css a um arquivo HTML. Como você escreveria?
a) <link href="style.css" type="css/text" rel="stylesheet">
b) <link href="style.css" type="stylesheet" rel="text/css">
c) <link href="style.css" type="text/css" rel="stylesheet">
d) <link href="style.css" type="stylesheet" rel="css/text">

Desafio

A minha intenção é que o desafio se torne cada vez algo mais complexo, pois eu te provoco a pesquisar e achar a resposta por conta própria.
Na maioria das vezes, dificilmente será algo que eu já tenha passado e, por isso que você deve pesquisar além do Rumo ao Júnior.
Tendo em vista que ainda temos um longo caminho pela frente com o CSS, o desafio será básico, porém vou dar menos descrições possíveis para que você descubra por conta própria. Fique tranquilo(a) que ainda virá muitos desafios de CSS complexos.
O seu desafio será construir o seguinte site:
Detalhe que você deve ter um arquivo CSS. Nada de Inline Style ou <style>.
Só isso! Boa sorte :)

</article>

Toda segunda-feira estou bem aqui para te ajudar ao máximo. Se você gostou desse episódio, bem ao seu lado esquerdo, tem uma raquete. Senta o dedo nela aí. Assim, você mostra para mim que gostou desse conteúdo.
Para conseguir produzir ainda mais conteúdos de qualidade, há a opção de você se tornar um membro pago deste canal. Assim, você não só estará ajudando na produção de conteúdo, mas também irá fazer com que isso chegue em ainda mais pessoas. Portanto, se você vê sentido no que falei, considere-se tornar um membro mensal ou anual.
Além disso, também há opção de você apoiar de formas mais pontuais com a compra de cafézinhos. Basta clicar no cafézinho que está bem a sua esquerda e escolher o valor que gostaria de contribuir. Saiba que qualquer ajuda é sempre muito bem-vinda :)
Se você estiver no e-mail, a raquete não está aí, né? Entra em pedro.pingback.come senta o dedo na raquete por mim :)
Não esqueça de compartilhar esse conteúdo com alguém que goste. Isso me ajuda muito e fico bem feliz!
Não deixe te praticar, hein!
Beijos na bunda e até segunda!