HTML e CSS, o básico da comunicação entre os dois.
Olá pessoal!
Leitura leve no fim de domingo, só para reforçar um pouco mais o conteúdo. Venho falar sobre duas das principais ferramentas de um Front-end nos dias atuais, o HTML, que é nossa linguagem de marcação, responsável por trazer as informações ao usuário, através das tags para adição de texto, imagem, vídeo, botões, links e o CSS que é o responsável pela estilização de como essas informações serão apresentadas, ele definirá cor, fundo, fonte da letra, estilo da letra, espaçamento, entre tantas outras inúmeras possibilidades.
Mas como essa magia acontece? É bem simples, você deve lembrar do meu primeiro texto sobre HTML, onde falo de algumas tags básicas de estruturação dele. Mas ele também conta com uma outra série de tags que ajudam a criar o layout da sua página.
Algumas delas são:
- tag a, que serve para adicionar um link, contato de e-mail ou telefone.
- tag input, que serve para criar um campo digitável, utilizada na criação de formulários.
- tag button, como o próprio nome já diz, serve para adicionar um botão ao seu layout.
- tags de texto como h1, que vai até a h6 e quanto maior o número, menor sua fonte. Tag p de parágrafo.
Aqui você pode ver que, por padrão o HTML já possui um estilo para cada uma das tags e para seu modo de ler o código. Você pode comparar o print do navegador com a forma como o site foi escrito no editor de texto.
Agora falando da magia da estilização, o CSS é o responsável por isso. É impossível listar todos os comandos que são possíveis utilizar pelo CSS, principalmente agora pensando em questões básicas de estilização.
O CSS, pelas boas práticas, é orientado a ser criado em uma página separada e para que ele seja aplicado ao HTML através de uma tag link.
Para executar a comunicação entre CSS e HTML, você precisa ter ciência de alguns fatores. Você pode aplicar estilização a várias partes do seu HTML e existem formas específicas de acessar estas partes.
- Se você quer aplicar a estilização diretamente a uma tag, basta chama-la pelo nome.
- Se você quer aplicar a estilização a uma tag através do id atribuído a ela, você precisa acrescentar uma # na frente do nome do id.
- Se você quer aplicar a estilização a uma tag através da class atribuída a ela, você precisa acrescentar um . na frente do nome da class.
- Você pode aplicar uma estilização a uma tag específica dentro de um contexto específico, digamos que você tem uma div de class=”text” e você quer alterar a cor de apenas uma linha que está dentro da tag h1, você irá chamar essa linha no CSS através do comando: .text h1{ color: white;}
O CSS possui um universo a ser explorado e inúmeras propriedades que não são viáveis de serem apresentados agora. As ideias de box-model já dão um longo artigo por si só, os pseudo-elementos também rendem muitas horas de estudos.
Hoje busquei esclarecer o básico para deixar uma ideia de como iniciar a construir uma página estilizada, muitas outras questões vão ser exploradas pela frente. Mas, com certeza, não conseguirei explicar tudo por aqui.
Então, se você gosta de Front-end e se considera uma pessoa criativa, não deixe de abrir seu editor de texto, a Documentação do CSS e se permita experimentar.
