Curso de programação web com HTML e CSS

HTML e CSS – O que são? Como funcionam?

Nesse post, meu objetivo é mostrar alguns conceitos básicos que são essenciais para todo desenvolvedor web, dentre eles, o HTML e CSS – O que são? Como funciona? onde vivem? 🙂

Ahh, antes de continuar você precisa saber que esse post faz parte de uma sequência de posts que estou preparando para vocês. Clique aqui e acesse!

Back-end ou Front-end?

Antes de falarmos sobre essas linguagens, precisamos entender a diferença entre back e front end.

Back end é a parte que o usuário não consegue enxergar, mas que precisa estar lá para uma aplicação funcionar, como por exemplo, um banco de dados. É a parte que roda em um servidor, onde fica toda a parte lógica da aplicação. De maneira geral, o desenvolvedor Back end é responsável por fazer uma conexão/manipulação entre os dados oriundos do navegador com um banco de dados, e vice-versa, podendo usar tecnologias como PHP, Java, C# etc.

O Front end é a parte visual de um site ou aplicação, aquela que conseguimos interagir. É a parte que roda no dispositivo da pessoa que está usando a aplicação, onde fica toda parte visual e interação com o usuário. O desenvolvedor Front end é responsável por codificar uma interface gráfica, normalmente com as tecnologias mais básicas da Web, como HTML, CSS e JavaScript.

Certo, Van, mas e o Full Stack?

O full stack é o cara que trabalha com tudo isso e mais um pouco rs. Mas a caminhada é bem longa. Eu, Vanessa, optei por trilhar o caminho do Front-End, então vem comigo e vamos aprender juntos, do zero.

HTML e CSS, qual a diferença?

HTML (Hyper Text Markup Language) é o esqueleto/estrutura de uma página. Trata-se de uma linguagem de marcação de texto feita para indicar para o navegador qual o tipo de conteúdo que está sendo colocado em uma página, como um título, um parágrafo, uma imagem, um link para outra página etc. E sabe quando essa linguagem nasceu? 1991, por um cara chamado Tim Berners-Lee, com o intuito de possibilitar o compartilhamento de documentos de forma mais prática.

Quer saber mais? clique aqui.

CSS (Cascading Style Sheet) é uma linguagem criada para estilizar coisas em uma página web, como tamanho de fontes, cores de caixas, efeitos visuais etc. Ou seja, se você não tiver uma estrutura, não tem o que ser estilizado. Então primeiro a gente aprende a montar uma casa e depois a gente coloca portas, janelas e a pintura. A princípio, toda a parte estética era escrita no mesmo arquivo da parte estrutural, tornando o código gigante e de difícil entendimento; então, em 1995, foi criado o CSS para cuidar apenas parte estética da página, de forma separada da estrutura.

Quer saber mais? clique aqui.

Mas como eu conecto essas duas coisas? Vem comigo.

Configurando o CSS

Existem três formas diferentes para configurarmos nosso CSS.

CSS inline: na mesma linha que temos uma tag HTML, adicionamos uma propriedade do CSS (style) e essa recebe o atributo cor. O problema dessa forma é que precisamos repetir o mesmo comando em todas as tags <p> que quisermos a mesma formatação, e pior, caso eu queira mudar a cor “cyan” para “red”, seria necessário refazer todas as linhas manualmente.

// Aqui a propriedade style, que está dentro da tag <p>, recebe a cor.
    <p style="color: cyan"> Esse modo é inline </p>

Tag style: aqui definimos essa tag lá no <head> e dentro dela inserimos uma marcação, como p, e colocamos as propriedades do nosso interesse. Assim, quando alterarmos um parágrafo, todos os demais seguem a mesma formatação, no nosso caso, a cor cyan.

// Aqui é preciso abrir a tag <style> e dentro dela colocamos o p{ }. Logo, todos os p receberão a mesma formatação.
    <style>
        p {
            color: cyan
        }
    </style>
    <p> Esse modo é com uso de tag style </p>

Arquivo externo: forma mais comum onde podemos usar a mesma estilização, ou seja, o mesmo arquivo CSS para mais de uma página HTML.

// Para linkar o CSS no arquivo HTML:
<head>
      <link rel="stylesheet" href="nomedoarquivo.css">
</head>

Agora que já sabemos isso, podemos começar a aprender os primeiros passos. Bora? Então clica aqui e vamo aprender comigo.

Esse post foi modificado em 23 de janeiro de 2022 10:07

Tags CSSHTML

This website uses cookies.