Navegação: 

Atividade 2 - CSS

Estilize-o com CSS

As tags informam ao navegador quais elementos do site usar. Mas também precisamos dizer como exibir os elementos e onde colocá-los. Podemos querer o título no centro ou no lado direito. Podemos querer uma imagem à direita e um parágrafo à esquerda. Existem duas maneiras de fazer isso: através de atributos HTML ou Cascading Style Sheets.

Folhas em estilo cascata (CSS)

Os atributos HTML são simples, mas podem ficar confusos rapidamente. Se quisermos estilizar muito, cada elemento HTML pode se tornar longo e difícil de ler. Além disso, e se quisermos estilizar muitos elementos da mesma maneira? Teríamos que copiar todos os atributos de cada elemento, o que não é eficiente e sujeito a erros. Para a maioria dos estilos, é melhor usar CSS.

Os arquivos CSS funcionam em estreita colaboração com tags HTML. Cada tag HTML pode ter um atributo class e/ou um atributo id que ajuda a identificar cada elemento. Muitos elementos podem ter a mesma classe e um elemento pode ter várias classes. No entanto, um elemento pode ter apenas um único id e o id não pode ser compartilhado entre os elementos. O arquivo CSS usa esses atributos para exibir estilos específicos para cada class ou id.

Veja este exemplo abaixo:

Clique na guia "HTML" no canto superior esquerdo para ver o código HTML e na guia "CSS" para ver o código CSS.

Vamos dar uma olhada no código HTML. Tente encontrar um <div> tag com o atributo “info”. Parece <div id=“info”>. Ao atribuir um ID a esse div, podemos usar CSS para especificar o estilo para esse elemento específico.

Mude para o arquivo CSS. Também podemos dar estilo a todos os elementos de um tipo específico - por exemplo, poderíamos usar CSS dar todos os <p> elementos do mesmo estilo. No bloco de cabeçalho, dizemos ao navegador para colorir todos os cabeçalhos #0097A7 (que é a cor azul-petróleo).

Vamos falar sobre a sintaxe (ou a forma de escrever) do CSS. Primeiro, você começa com o elemento que deseja estilizar. Se você quiser estilizar todos os elementos com a mesma tag (como <header>), basta escrever o nome. Se você deseja estilizar um elemento com uma classe ou id, coloque um . ou um # na frente do nome da classe ou do id, respectivamente. Então, para cada propriedade que você deseja alterar, use o formato nome-do-atributo: valor;. Não se esqueça de terminar cada linha com um ;. Todos esses estilos devem ser colocados entre chaves { e }.

Existem muitos elementos de estilo para cobrir todos eles neste tutorial. Se, no esboço que você fez anteriormente, você não tiver certeza de como usar CSS para obter o estilo desejado, tente pesquisar online.

texto alternativo

Embora o CSS entenda 140 nomes de cores, como “verde”, “vermelho” e “azul”, isso ainda pode ser limitante. E se quisermos um verde escuro ou um verde um pouco mais claro? Para conseguir isso, também podemos nos referir às cores na forma hexadecimal ou RGB. Verifique este link para ver as cores e sua forma hexadecimal correspondente.

Adicionando uma nova fonte

Como você deve saber, existem várias fontes que você pode usar. Esta parte mostrará como importar diferentes fontes para o seu site.

texto alternativo

Atividade 2 – Adicionando atributos e estilo

Agora é hora de deixar nosso site lindo! Para concluir esta atividade, você precisará concluir as seguintes etapas:

  1. Abra o editor web (clique no botão “Experimente você mesmo!” abaixo)

  2. Adicione um atributo id à tag de parágrafo. Por exemplo, <p id="page-subtitle">

  3. Vá para a aba CSS e crie uma nova regra #page-subtitle { }

  4. Altere a cor da legenda adicionando color: yellow; dentro das chaves

  5. Altere a fonte adicionando font-family: 'Roboto Mono', monospace; dentro das chaves e adicionando @import url('https://fonts.googleapis. com/css?family=Roboto+Mono'); na parte superior da guia CSS

Tente você mesmo!