-
Conhecer o CSS.
-
Alterar a apresentação visual dos textos em HTML utilizando o CSS.
-
Organizar o estilo para melhorar a visualização da página da Barbearia.
O objetivo é alterar a configuração dos textos que queremos apresentar na página da web que estamos desenvolvendo. Para isso, não vamos mais utilizar as tags. A partir deste momento, utilizaremos o CSS, sigla para Cascading Style Sheet (que pode ser traduzido como “folhas de estilo em cascata”, em português). O CSS é a forma como os elementos são configurados para que a visualização da página seja alterada.
Como primeiro objetivo, alteraremos o tamanho da fonte. Vamos utilizar o exemplo da página da Barbearia Alura, em que faremos essa alteração no texto sobre a missão da empresa, aumentando o tamanho da fonte. Atualmente, o texto da missão aparece no navegador da seguinte forma:
No Sublime Text 3, o código em HTML do texto aparece da seguinte maneira:
Dentro da tag <p> do parágrafo da missão da Barbearia Alura, vamos escrever a propriedade style (estilo, em inglês) seguida do sinal de igual (=) e, e entre aspas, indicar o que vamos alterar. Como queremos alterar o tamanho da fonte, devemos escrever font-size (tamanho da fonte, em inglês), seguido de dois-pontos (:) e do tamanho que desejamos para a fonte.
O tamanho padrão para a fonte do navegador é medido em pixel. O pixel é o menor elemento de um dispositivo que exibe imagem. O navegador geralmente realiza a leitura com tamanho de fonte 16 pixels, mas queremos alterar para 20 pixels. O código deve ficar da seguinte maneira:
Ao salvarmos o arquivo anterior e abrirmos no navegador (por meio de duplo clique), podemos perceber que o texto da missão ficou maior, destacando-se do restante do texto:
Nosso próximo objetivo será alinhar o texto no centro da página no navegador. Para isso, utilizamos uma propriedade chamada de text-align (alinhamento de texto, em inglês). Vamos aplicar essa propriedade em todas as linhas do texto que aparecerá na página. Quando precisamos adicionar duas ou mais informações no CSS – por exemplo, indicar a fonte e o alinhamento do texto –, separamos os itens utilizando o ponto e vírgula (;). Nosso código ficará com a seguinte estrutura:
Ao salvarmos o arquivo anterior e abrirmos no navegador, podemos perceber que o texto da missão está alinhado ao centro da página:
No CSS existem três maneiras de configurar o estilo na nossa página da web – estilo é a formatação do texto, como espaçamento, cores, tamanho da fonte, etc. São elas:
- CSS inline.
- A tag
<style>. - Criação de um arquivo externo.
Iremos explicar cada uma delas detalhadamente.
- Estilo com o CSS inline
A primeira maneira de formatar o texto da página é a partir da CSS inline, que utilizamos até agora.
Na linha onde temos a tag <p>, adicionamos a propriedade do CSS escrevendo style. Em vez de utilizarmos o nome “CSS”, escrevemos a propriedade style.
A propriedade style marca somente um conteúdo por vez, isto é, a propriedade deve ser escrita em cada linha do código em que quisermos aplicar aquele estilo. Com isso, sempre que precisarmos aplicar o mesmo style, repetimos esse código. Em cada parágrafo, tivemos que escrever a propriedade style=”text-align: center” para centralizar o texto.
- Estilo com o CSS inline
Ainda que repetir o mesmo código diversas vezes não seja muito interessante, especialmente quando estamos trabalhando com um projeto grande, utilizando o CSS inline precisamos escrever a configuração de estilo em todas as linhas, uma por uma, como fizemos até agora em nosso código: todas as linhas que mudamos de estilo contêm o style.
- Estilo com a tag
<style>.
Para não termos que reescrever o código em cada linha, há a opção de criar a tag dentro de head – recordando: a tag head é responsável por dar informações ao navegador, diferentemente das tags de conteúdos, em que informamos o que queremos exibir. Dentro da tag head, adicionamos a tag style abrindo <style> e fechando </style>. Dentro dela, podemos colocar as marcações de CSS referentes aos elementos que temos em nosso HTML. A parte inicial de nosso código ficará assim:
Nosso objetivo é que os parágrafos sejam alinhados ao centro, da mesma forma como colocamos no inline. Porém, não queremos reescrever o código para todas as linhas, e sim escrever apenas uma vez. Para fazer isso, colocamos a tag do parágrafo, representada por p, seguida da chave ({) e da propriedade do CSS text-align e da chave (}).
- Estilo com a tag
<style>
Usamos o p de parágrafo na tag <style> e, consequentemente, todos os parágrafos ficaram alinhados ao centro como gostaríamos. Isso significa que as marcações que fizermos nessa tag ficarão em todos os elementos que indicarmos, ou seja, como indicamos parágrafo, o text-align foi aplicado em todos os parágrafos.
-
Estilo com a tag
<style> -
Estilo com a criação de arquivo externo
A terceira forma de configurar o estilo, e a mais comum, é usar um arquivo externo. Para isso, criaremos um novo arquivo. Podemos clicar no menu File e, em seguida, ir na opção New file, ou usar o atalho Ctrl+N em nosso teclado. Salvaremos esse arquivo na mesma pasta com o nome style.css.
- Estilo com a criação de arquivo externo
Agora que temos o arquivo criado na pasta, vamos fazer uma referência a ele no HTML. Faremos com que o HTML busque o arquivo externo e passe a “lê-lo” para aplicar as propriedades na página. Para isso, vamos usar a tag link, que é justamente a ligação de um arquivo para outro. Vamos relacionar o link com a propriedade rel e o valor stylesheet. Diremos onde o arquivo está utilizando href, que é o endereço de referência. Agora que temos essa ligação, podemos simplesmente recortar o conteúdo da tag style e enviar para nosso arquivo .css.
- Estilo com a criação de arquivo externo
Depois que alterarmos a posição do código, a visualização não será modificada.
Assim, aprendemos as três maneiras de editar o estilo de nosso site:
- CSS inline.
- A tag
<style>. - Criação de um arquivo externo.
Mudando a cor do texto
Aprenderemos agora a realizar modificações na cor do nosso site. Iremos:
● Alterar a cor de fundo (background, em inglês) para cinza. ● Modificar a cor do texto de um elemento.
Se quiséssemos, por exemplo, alterar a cor de fundo do título utilizando o modo in line, ou seja, um por um, adicionaremos “;” após a primeira característica do nosso style em html <h1> e iríamos inserir background para alterar a cor do fundo, adicionando o valor #CCCCCC (6 vezes a letra C). Esse valor indica a cor cinza na linguagem hexadecimal, que será abordada com mais detalhes na próxima aula.
Não queremos modificar apenas a cor de fundo de um elemento, mas sim de todo o site. Para isso, utilizaremos o arquivo .css que criamos.
Do mesmo modo que utilizamos a função background no in line, escreveremos em nosso arquivo css. a função background para todos os parágrafos.
Na última imagem, percebemos que ficaram muitos espaços entre os parágrafos que não foram preenchidos com a cor cinza. Isso acontece porque o estilo com a cor está localizado apenas para as tags h1 e p, e precisamos mudar também para o nosso body, que envolve todas as tags. Iremos retirar o código das cores para as outras tags e usá-la apenas no body no arquivo css, para deixá-lo mais organizado, respeitando a hierarquia. Assim, todo o fundo ficará da cor selecionada.
Agora que já aprendemos a mudar a cor de fundo de nosso site, vamos descobrir como alterar no código a cor do texto. Por exemplo, para mudarmos a cor da frase referente à missão da Barbearia no site de preto para vermelho, temos a tag strong marcando, especificamente, a linha da missão.
Para adicionar uma definição de cor para essas tags, iremos no arquivo css. e escreveremos color, selecionando a cor vermelha (red, em inglês).
Desse modo, obteremos o resultado desejado em nosso site:
Desafio
Agora que já conseguimos alterar a cor dos elementos de nosso site, é sua vez de experimentar algumas edições!
Escolhas algumas linhas de seu código HTML e mude a cor delas para azul. Pratique o modo in