Aulas

Área: Web - Adicionado um Estilo com CSS


Aula 1 - Revisão da Aula Anterior

No módulo 1 abordamos alguns conceitos importantes sobre o desenvolvimento de páginas e estudamos algumas tags que nos deram uma pequena visão do que é a programação para WEB.

Vamos continuar aprendendo sobre outras tags do HTML mas vamos explorar também um pouco de CSS, que significa: Cascading Style Sheets ou em português: Folha de Estilo em Cascata.

Para dar continuidade aos nossos estudos vamos utilizar nosso código escrito até esse momento: 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Bicicletaria Pedal Forte</title>
</head>
<body>
    <header>
        <img src='bicicletaria.jpeg'>
        <h1>Bicicletaria Pedal Forte</h1>
        <p><i>Mais de 20 anos pedalando com você!</i></p>
        <hr>
    </header>
    <main>
        <h2>Serviços</h2>
        <p>Oferecemos manutenção completa para sua bicicleta:</p>
        <ul>
          <li>Troca de peças</li>
          <li>Ajuste de marchas</li>
          <li>Revisão geral</li>
        </ul>
        <hr>
        <h2>Produtos</h2>
        <p>Temos uma linha variada de bicicletas e acessórios:</p>
        <p>
            <b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br>
            <b>Acessórios:</b> Capacetes, Luvas, Luzes
        </p>
        <hr>
    </main>
    <footer>
        <h2>Contato</h2>
        <p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>       
           Email: contato@pedalforte.com.br
        </p>
        <hr>	
        <p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p>
    </footer>
</body>
</html>

O que vimos nesse código: 


  • Construímos nossa estrutura básica,
  • Utilizamos algumas tags semânticas,
  • Adicionamos tags de texto e de separação,
  • Adicionamos uma imagem que identifica nosso site e
  • Trocamos algumas tags de separação por tags de lista.

Comente abaixo se encontrou alguma dificuldade até esse momento nos nossos estudos?


Aula 2 - Falando sobre o CSS

Apesar da nossa página já ter alguns elementos interessantes, como uma imagem no topo, ela ainda tem a impressão de algo inacabado. Isso acontece porque precisamos implementar um estilo visual nela.

Esse estilo não é possível utilizando apenas as tags disponíveis pelo HTML, vamos precisar de uma linguagem de estilo, no nosso caso o CSS. 

Quando o HTML foi criado em 1989 a ideia era de compartilhamento de documentos científicos, mas alguns anos depois, em 1994, foi desenvolvido o CSS que permitiu um controle sobre o estilo da página, como cores, formatos, margens, e outros elementos visuais, tornando as páginas mais bonitas e atraentes.

Utilizando uma comparação simples podemos dizer que :

  • HTML é a estrutura de uma casa, as paredes, janelas, portas, telhado, etc.
  • CSS é a cor da parede, o formato das janelas e portas, o tipo de telhado.

Na imagem abaixo temos uma comparação entre o que é o HTML e o que é o CSS:



  • Comente o que você entendeu sobre o que é HTML e o que é CSS. 
  • Qual a diferença entre eles e a importância do CSS em uma páginas WEB.

Aula 3 - Adicionando CSS

Existem três maneiras diferentes de adicionar o CSS em uma página HTML. e todas elas possuem vantagens e desvantagens. 

Nessa aula vamos adicionar o CSS diretamente no elemento que queremos estilizar, é o método chamado Inline, ou em linha.

Utilizando nosso exemplo queremos alterar a cor de fundo da nossa página, ou seja, onde está branco queremos que fique em um marrom bem escuro fazendo um contraste interessante com a nossa imagem no topo.

Quando adicionamos um CSS primeiro devemos definir qual o elemento que será alterado e qual é a alteração que desejamos: Queremos que todo o corpo da nossa página <body> tenha a cor marrom ao invés da cor branca.

Para isso vamos : 

  • Acrescentar um atributo chamado style dentro da nossa tag <body>
  • Vamos atribuir as propriedades CSS (ex. background) e
  • Definir os valores da propriedades CSS (ex. orange).
<body style='background:orange'>
  ....
</body>

Na imagem vamos ver a mudança que temos ao adicionar conforme o exemplo acima:



Nesse exemplo utilizamos o nome de uma cor (orange) como valor para a propriedade de fundo (background) e definimos que todo o corpo da página receberia essa cor.

O uso do nome de uma cor como valor de uma propriedade é limitado a uma lista de 140 cores reconhecidas pelas navegadores mais modernos, um exemplo dessas cores são: black, red, yellow, green, gray e outras.

As cores suportadas pelos navegadores vão além dessa lista de nome, e ai temos outras maneiras de definir mais cores, como por exemplo, o código Hexadecimal de uma cor:
  • Vermelho : red ou #FF0000
  • Azul : blue ou #0000FF
  • Verde : green ou #008000
A cor que estamos procurando para nossa página não possui um nome declarado, vamos precisar então utilizar o seu código hexadecimal que é #3B2F2F

<body style='background:#3B2F2F'>
  ....
</body>


Apenas alteramos o valor da propriedade e vamos obter o resultado abaixo:



Temos agora uma cor marrom escura que queremos em nossa página, mas observe que o texto não está mais legível, a cor preta não se destacou e criou uma certa dificuldade para leitura. Na próxima aula vamos alterar a cor do nosso texto.

  • Reescreva abaixo a tag <body> com uma cor de fundo (background) da sua escolha, pode ser através de um nome de cor ou de um código hexadecimal.


Aula 4 - Alterando a Cor do Texto

Ainda utilizando o CSS de maneira inline, vamos alterar a cor do texto para que ele fique mais legível e vamos aproveitar e mudar também a fonte das letras que estamos utilizando em nossa página.

Na Aula anterior utilizamos a propriedade background, para alterar a cor de fundo, agora vamos utilizar a propriedade color (cor) , e atribuir o valor white (branco). Assim teremos um texto mais legível.

<body style='background:#3B2F2F;color:white'>
  ....
</body>

Vamos também alterar a família de fontes que estamos utilizando, usando a propriedade font-family e declarando o nome de uma fonte bastante utilizada: tahoma.


<body style='background:#3B2F2F;color:white;font-family:tahoma'>
  ....
</body>


Acrescentando essas duas propriedades vamos ter o resultado abaixo:



Temos então uma tag do html <body> com três propriedades diferentes: 
  • background,
  • color,
  • font-family.
Com base nisso comente abaixo:

Utilizando o método Inline você identifica alguma desvantagem nesse modelo? Se sim, quais são?

Aula 5 - Desvantagens do modelo inline

Nas aulas anteriores demonstramos como adicionar o CSS em nosso código HTML, e para isso fizemos uso do modelo Inline. 

Apesar desse modelo atender o que queremos ele possui algumas desvantagens:

  • Dificuldade na manutenção do código.
Um CSS Inline com apenas uma propriedade é fácil de ser mantido, mas geralmente utilizamos várias propriedades para uma mesma tag, como foi o nosso exemplo ao alterar a tag <body>.

<body style='background:#3B2F2F;color:white;font-family:tahoma'>
Na hora de alterar uma propriedade ou valor vamos ter dificuldade, pois o código irá aparecer tudo na mesma linha, o que dificulta a leitura e a correção.

  • Dificuldade para a reutilização do código.
Até o momento está trabalhando com uma página única, mas sites da internet, geralmente possuem várias páginas. Se no CSS for todo inline temos que repetir o mesmo código várias vezes e se quisermos alterar ou acrescentar uma propriedade temos que alterar em todas as páginas onde ele está sendo utilizado, isso demanda tempo e é passível de erros.

  • Compromete a performance e a separação de responsabilidades.
Códigos CSS inline prejudicam o tempo de carregamento de uma página, comprometendo a performance dele, além disso, misturar HTML e CSS vai contra as boas práticas de desenvolvimento.

Com base nas informações acima diga em qual situação é uma boa ideia utilizar o CSS Inline?


Aula 6 - Utilizando o CSS Internal

Como vimos na aula anterior, o CSS Inline pode ser utilizando principalmente para teste rápidos, onde o desenvolvedor pode observar se o estilo que está querendo satisfaz a sua necessidade. Existem outras aplicações para o CSS Inline mas, sempre que possível, ele deve ser evitado.

Qual é a alternativa para o CSS Inline? 

A utilização do CSS no modo Internal ou Interno pode substituir o Inline com mais vantagens. Nesse modo o código de estilos ainda fica dentro da própria página, porém de uma maneira separada da tag HTML.

Para utilizar esse modelo, primeiro vamos retirar o atributo style juntamente com as propriedades e valores que foram adicionados dentro da tag <body>.

<body>
    ....
</body>

O próximo passo é utilizar uma tag html chamada <style> que deve ser colocada entre as tags <head>. Veja abaixo como fica o código:


<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Bicicletaria Pedal Forte</title>
    <style>

    </style>
</head>
<body>
    ....
</body>

Todas os estilos que desejamos aplicar nessa página serão colocados dentro dessa nova tag. Isso facilita a manutenção do código uma vez que todos os estilos ficarão agrupados no topo do arquivo. 


Agora que temos a tag <style> precisamos informar qual será o elemento HTML que irá receber o estilo, no nosso caso será apenas o <body>.


Vamos aproveitar e mudar a cor dos nosso títulos também, que estão representados pela tag de título <h2>.


Nosso código fica:


<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Bicicletaria Pedal Forte</title>
    <style>
        body{
        
        }
        h2 {
        
        }
    </style>
</head>
<body>
    <header>
        <img src='bicicletaria.jpeg'>
        <h1>Bicicletaria Pedal Forte</h1>
        <p><i>Mais de 20 anos pedalando com você!</i></p>
        <hr>
    </header>
    <main>
        <h2>Serviços</h2>
        <p>Oferecemos manutenção completa para sua bicicleta:</p>
        <ul>
          <li>Troca de peças</li>
          <li>Ajuste de marchas</li>
          <li>Revisão geral</li>
        </ul>
        <hr>
        <h2>Produtos</h2>
        <p>Temos uma linha variada de bicicletas e acessórios:</p>
        <p>
            <b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br>
            <b>Acessórios:</b> Capacetes, Luvas, Luzes
        </p>
        <hr>
    </main>
    <footer>
        <h2>Contato</h2>
        <p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>       
           Email: contato@pedalforte.com.br
        </p>
        <hr>	
        <p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p>
    </footer>
</body>
</html>

Utilizando o mesmo estilo que aplicamos na aula anterior vamos adicionar as propriedades e os valores em nossas tags selecionadas:


<style>
  body {
    background: #3B2F2F;
    color:white;
    font-family:tahoma
  }
  h2 {
    color:orange;
  }
</style>


O resultado obtido pode ser conferido na imagem abaixo:



Para fixação da diferença entre o CSS Inline e o CSS Internal, escreva abaixo quais as vantagens e desvantagens desses dois modelos:

Aula 7 - Revisão do Conteúdo sobre CSS

Estudamos até o momento que existem duas maneiras para utilização de código CSS ( Folha de Estilo em Cascata) que podemos aplicar em nossas páginas HTML.

A Primeira foi a Inline ou em Linha:

  • Utilizada dentro do próprio elemento HTML, utilizando o atributo style.
  • Um exemplo da sua sintaxe é: <h2 style='color:orange'>Título</h2>
  • Altera apenas o estilo do elemento onde foi aplicado.
  • Por misturar o conteúdo da páginas e os estilo deixa o código pouco organizado.
  • Não pode ser utilizado em várias elementos ao mesmo tempo, tendo que ser aplicado em cada elemento que precisar de alteração.
  • Deixa a manutenção do código mais difícil de ser realizado.
  • Sua vantagem é a utilização em testes rápidos ou ajustes pontuais.
Exemplo:

<h2 style='color:orange'>Título</h2>


A Segunda opção foi a Internal ou internamente:

  • Utiliza a tag <style> adicionada entre as tags <head> no topo do arquivo.
  • Um exemplo da sua sintaxe é: <style>h2 { color: orange }</style>
  • Altera diversos elementos HTML ao mesmo tempo, ou seja, todos as tag <h2> serão alteradas automaticamente.
  • É possível fazer uma separação entre o conteúdo e o estilo, tornando o código mais organizado.
  • Pode ser utilizado para alterar mais de um elemento dentro de um mesmo arquivo.
  • Mais fácil de alterar pois é mais fácil de ser localizado e mais fácil de ser lido do que se estivesse tudo em apenas uma linha, principalmente se o estilo possui várias propriedades e vários valores.
  • Indicado para páginas únicas e projetos pequenos.
Exemplo:

<style>
  h2 {
    color:orange;
  }
</style>


Na próxima aula vamos aprender uma forma de utilizarmos o CSS que é a maneira mais recomendada em termos de boas práticas em programação: o CSS External.


Se tiver alguma dúvida até aqui, escreva nos comentários abaixo:



Aula 8 - CSS External

Como o próprio nome diz, o CSS External ou Externo, refere-se a um arquivo com a extensão .CSS, onde são definidas todas as propriedade e valores que irão compor o estilo de uma páginas HTML.

A vantagem desse método: 

  • Todas as definições ficam separadas em um arquivo apropriado, tendo apenas que ser vinculado (ou linkado) ao arquivo onde será utilizado.
  • Pode ser vinculado a vários arquivos, mantendo um padrão de estilização em todas as páginas do projeto.
  • A manutenção se torna mais fácil, uma vez que o arquivo só possui os padrão de estilo, sem códigos HTML junto. A leitura também se torna mais fácil.
  • Outra vantagem é que um arquivo CSS é carregado mais rapidamente do que a tag <style> ou o atributo style.

Vamos adotar o arquivo CSS em nosso projeto, e para isso vamos:

  • Retirar a tag <style> que colocamos entre as tag <head> do nosso arquivo index.html.
  • Criar um novo arquivo com o nome estilo.css, que por enquanto irá ficar no mesmo diretório onde está o index.html.
  • No arquivo CSS colocar o código abaixo:
body {
  background: #3B2F2F;
  color:white;
  font-family:tahoma
}

h2 {
  color:orange;
}


Veja que no arquivo CSS ficam todos os estilos que iremos utilizar e para finalizar precisamos vincular esse arquivo ao nosso HTML.


  • Utilizar a tag <link>
A tag <link> é utilizada para vincular recursos externos ao documento HTML.
Essa tag não possui fechamento, e para o nosso caso vamos utilizar dois atributos:

1) rel = indica a relação entre o arquivo externo e o HTML.

No nosso caso temos uma folha de estilo, ou stylesheet.

2) href = aponta qual é o lugar (caminho) onde está localizado o arquivo.

No nosso caso no arquivo está no mesmo diretório, então basta escrever o nome do arquivo: estilo.css

Confira como deve ficar a parte do vínculo do arquivo de estilo:

<head>
  ..
    <link rel='stylesheet' href='estilo.css'>
  ...
</head>


Dessa forma agora temos dois arquivos: index.html e estilo.css. deixando a parte da estrutura e conteúdo separada da parte de configuração de estilos. 


O que podemos melhorar em nosso projeto agora que temos o arquivo de estilo separado, escreva abaixo o que você acha?


Aula 9 - Boas práticas de programação - Parte I

Temos no nosso projeto duas chamadas a arquivos externos: 

  • O estilo:
<link rel='stylesheet' href='estilo.css'>

  • E a imagem:


<img src='bicicletaria.jpeg'>


Apesar de nosso projeto estar funcionando perfeitamente, a boa prática de programação recomenda que os arquivos de imagem e de estilo fiquem em diretórios separados.


Vamos criar dois diretórios e colocar os nossos arquivos dentro deles:

  • css : onde iremos guardar todos os arquivos de estilo.
  • img : onde iremos guardar todos os arquivos de imagem.

Observe que se abrirmos a nossa página agora no navegador vamos obter o resultado abaixo:



O que aconteceu? 

O caminho para encontrar os arquivos mudaram, precisamos apenas acrescentar os novos destinos onde ele devem estar:

<link rel='stylesheet' href='css/estilo.css'>

e 


<img src='img/bicicletaria.jpeg'>

Feito isso, tudo volta a funcionar perfeitamente.


Na sua opinião porque precisamos deixar os arquivos em diretórios separados e não todos juntos em uma mesma pasta?



Aula 10 - Boas práticas de programação - Parte II

Vimos na nossa aula anterior que é uma boa prática organizar nossos arquivos em diretórios separados, como por exemplo: arquivos de estilos e de imagens.

Agora vamos falar sobre como deve ser escrito o código de programação: com letras minúsculas ou maiúsculas?

No HTML e no CSS não importa se o código será escrito com letras maiúsculas ou minúsculas, pois ele é elas não são o que chamados de case-sensitive.

Um código CSS poderia ser escrito como abaixo que iria funcionar normalmente:

BODY {
  background: #3B2F2F;
  color:white;
  font-family:tahoma
}

H2 {
  color:orange;
}

Ou poderia ser escrito misturando as letras que também não iria alterar em nada o resultado:


BODY {
  backGROUND: #3B2F2F;
  color:white;
  FONT-family:tahoma
}

H2 {
  color:ORANGE;
}

Mas as boas práticas de programação recomendam que seja utilizado apenas letras minúsculas, pois 


  • Facilita a leitura: letras minúsculas são melhor reconhecidas e
  • Mantém um padrão dentro do desenvolvimento.

Essa regra vale para o HTML também, por exemplo: 


<p>Texto de um parágrafo</p>

ou 


<P>Texto de um parágrafo</P>

São interpretados pelo navegador da mesma maneira.


A exceção para essa regra é quando utilizamos seletores CSS, que é um assunto que iremos abordar mais a frente.


Indentação do Código


Outra boa prática de programação é utilizar a Indentação, que é o recuo ou afastamento do texto em relação a margem. Essa prática é muito utilizada no desenvolvimento.


Observe que o código como está escrito abaixo funciona sem problemas no navegador: 


BODY {backGROUND: #3B2F2F;color:white;FONT-family:tahoma}
H2 {color:ORANGE;}

E o código HTML abaixo também não deixa de funcionar se for escrito dessa forma:


<!DOCTYPE html>
<html lang="pt-BR">
<head><meta charset="UTF-8">
<title>Bicicletaria Pedal Forte</title>
<link rel='stylesheet' href='css/estilo.css'>
</head>
<body>
<header>
<img src='img/bicicletaria.jpeg'>
<h1>Bicicletaria Pedal Forte</h1>
<p><i>Mais de 20 anos pedalando com você!</i></p>
<hr>
</header>
<h2>Serviços</h2>
<p>Oferecemos manutenção completa para sua bicicleta:</p>
<ol>
<li>Troca de peças</li>
<li>Ajuste de marchas</li>
<li>Revisão geral</li>
</ol>
<h2>Produtos</h2>
<p>Temos uma linha variada de bicicletas e acessórios:</p>
<p>
<b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br>
<b>Acessórios:</b> Capacetes, Luvas, Luzes
</p>
<hr>
<h2>Contato</h2>
<p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>       
Email: contato@pedalforte.com.br
</p>
<hr>
<p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p>
</body>
</html>

Poderíamos também escrever o código todos em uma linha e ainda assim estaria funcionando:


<!DOCTYPE html><html lang="pt-BR"><head><meta charset="UTF-8"><title>Bicicletaria Pedal Forte</title><link rel='stylesheet' href='css/estilo.css'></head><body><header><img src='img/bicicletaria.jpeg'><h1>Bicicletaria Pedal Forte</h1><p><i>Mais de 20 anos pedalando com você!</i></p><hr></header><h2>Serviços</h2><p>Oferecemos manutenção completa para sua bicicleta:</p><ol><li>Troca de peças</li><li>Ajuste de marchas</li><li>Revisão geral</li></ol><h2>Produtos</h2><p>Temos uma linha variada de bicicletas e acessórios:</p><p><b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br><b>Acessórios:</b> Capacetes, Luvas, Luzes</p><hr><h2>Contato</h2><p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>       
Email: contato@pedalforte.com.br</p><hr><p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p></body></html>

Mas porque isso não é uma boa ideia?


  • Dificulta a leitura,
  • Dificulta a manutenção,
  • Maior chance de ocorrer erros e
  • Atrapalha a produtividade.
A Regra básica para indentar o código deve ser:

  • Definir qual espaçamento padrão deve ser utilizado e manter esse padrão durante todo o projetos:
Se for definido que serão utilizados dois espaços por nível de hierarquia, deverá mantida sempre essa definição. 

Veja abaixo que a tag <head> e a tag <body> tem o mesmo nível hierárquico mas são inferiores a tag <html>, por isso possuem dois espaços com relação à margem

<html>
  <head>
  </head>
  <body>
  </body>
</html>

Ao acrescentar as tags <title> e <p> vamos recuas mais dois espaços com relação à margem:


<html>
  <head>
    <title>
    </title>
  </head>
  <body>
    <p>
    </p>
  </body>
</html>


Ficou alguma dúvida com relação as boas práticas de programação que foram estudadas até esse momento? 



Aula 11 - Finalizando o Módulo

Nesse módulo começamos a utilizar o CSS e estudamos as maneiras possíveis de utilizá-lo em nosso projeto, como os modos:

  • Inline,
  • Internal e
  • External.
Estudamos as diferenças entre as várias maneiras com as suas vantagens e desvantagens.

Vimos também algumas boas práticas de programação, como:

  • Separação do projeto em pastas.
  • Padronização do uso de letras minúsculas para escrever nosso código e
  • Sempre utilizar a indentação para facilitar nosso desenvolvimento.
Vamos continuar falando sobre o CSS e acrescentar outras tag HTML que irão melhorar o nosso primeiro projeto WEB.

Gostaria de compartilhar o que aprendeu e como está sendo o seu desenvolvimento? 
Deixe sua resposta abaixo: