DEV Community

Cover image for HTML e CSS em 10 minutos
Flávia Correia for Devs Jequié

Posted on • Updated on

HTML e CSS em 10 minutos

Fala pessoal! Tudo bem?

Esse post é para você iniciante e que tem dificuldade em entender o que é HTML e CSS. Mas será que dá mesmo pra entender sobre esse assunto em 10 minutos? Essa resposta é...


O HTML

O que é?

HyperText Markup Language, no português brasileiro Linguagem de Marcação de Hipertextos, é uma linguagem de marcação, usada para definir a estrutura do conteúdo, o HTML é um padrão para estruturar um site, e ele possui sintaxe e semântica.

O conteúdo de um documento HTML é formado por diversos tipos de elementos, então, um parágrafo, uma imagem ou uma tabela é um elemento no HTML.

Um elemento HTML

Para inserir um elemento no documento HTML, é necessário uma tag (marcação), essa tag possui abertura, mas nem sempre possui fechamento, além disso, cada tag no HTML possui um nome, outra coisa necessária no elemento é o seu conteúdo (imagem,texto, vídeo, áudio, etc).

A estrutura da tag de abertura é:

  • Sinal do menor que (<)
  • Nome da tag
  • Sinal do maior que (>)
  • ex. <h1>

A estrutura da tag de fechamento é:

  • Sinal do menor que (<)
  • Barra (/)
  • Nome da tag
  • Sinal do maior que (>)
  • ex. </h1>

A estrutura de um elemento título:

  • <h1> Olá Mundo! </h1>

Sintaxe de um documento .html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Olá Mundo!</title>
  </head>
  <body>
    <h1> Olá Mundo! </h1>
    <p> Esse é um parágrafo. </p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

a. O DOCTYPE é uma declaração para informar ao navegador como o documento deve se comportar.

b. O elemento html é um elemento que envolve todo o conteúdo da página, pode ser conhecido como o elemento raiz.

c. O elemento head é um elemento que envolve todo conteúdo importante para a página HTML, mas que não é relevante ao usuário sua visibilidade.

  • o elemento meta define qualquer informação de metadados que não pode ser definida por outro elemento.
  • o charset define a codificação de caracteres usada na página, nesse caso o UTF-8.
  • o elemento title define o título do documento mostrado na aba da página do navegador.

d. O elemento body é um elemento que envolve todo o conteúdo da página e esse sim, fica visível ao usuário.

  • o elemento h1 define um título principal na página, existem elementos de título do h1 ao h6, eles agem de forma hierárquica como capítulos e subcapítulos de um livro.
  • o elemento p define um parágrafo no documento HTML.

Atributos

Um elemento pode possuir atributos, como o atributo class ou o id (identificador). O atributo class e id são utilizados tanto no CSS quanto no JavaScript para selecionar o elemento e estilizá-lo ou modificá-lo através de funções ou da DOM.

ex1.

<h1 class="title"> Olá Mundo! </h1>
Enter fullscreen mode Exit fullscreen mode

ex2.

<div id="containerTitle"> 
   <h1 class="title"> Olá Mundo! </h1>
</div>
Enter fullscreen mode Exit fullscreen mode

ex3.

<meta charset="utf-8">
Enter fullscreen mode Exit fullscreen mode

Para conhecer mais sobre elementos e atributos HTML, clique aqui.


O CSS

O que é?

CSS ( Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML ou em XML. Ele é definido seguindo algumas regras.

Sintaxe

a. A regra é aberta com um seletor.

  • o seletor pode ser: o nome de uma tag, uma classe ou um id
  • tag: h1;
  • classe: .title;
  • id: #containerTitle.

b. em seguida, a abertura de chaves ( { );

c. a propriedade a ser modificada, dois pontos ( : ), o valor e ponto e vírgula ( ; )

  • ex. color : purple;

d. por fim, o fechamento de chaves ( } );

O resultado é o seguinte:

ex1.

h1{
  color: purple;
}
Enter fullscreen mode Exit fullscreen mode

ex2.

.title{
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

ex3.

#containerTitle{
  background-color: #dfdfdf;
}
Enter fullscreen mode Exit fullscreen mode

Formas inserir no HTML

Existem 3 formas simples de se utilizar o CSS no HTML

1a

Essa primeira é inserindo diretamente no elemento utilizando o atributo style:

ex.

<h1 style="font-size: 30px;">Olá Mundo!</h1>
Enter fullscreen mode Exit fullscreen mode

Perceba que a inserção da propriedade e valor seguem o padrão mencionado na seção anterior (propriedade:valor;)

2a

A segunda forma de estilizar um documento HTML é utilizando o elemento style dentro do elemento head:

<style>
   p{
       color:darkblue;
       font-size: 15px;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

Assim como temos um atributo style dentro de uma tag, temos o elemento style para estilizar, esse segundo segue o padrão de sintaxe citado na seção anterior:

  • seletor
  • abertura de chaves
  • propriedade:valor;
  • fechamento de chaves

3a

Essa terceira forma é a mais indicada para se trabalhar com o CSS. Ela consiste em:

  • criar um documento .css e adicionam-se os seletores e as modificações desejadas: ex.
.title{
  color: green;
}

p{
  color:darkblue;
  font-size: 15px;
}
Enter fullscreen mode Exit fullscreen mode
  • chamar esse documento .css no .html com o elemento link:
<link rel="stylesheet" href="css/styles.css">
Enter fullscreen mode Exit fullscreen mode

a. o link é um elemento utilizado para linkar, fazer uma ligação com outro documento ou arquivo que não se encontra dentro do documento HTML.
b. O atributo rel define a relação entre o que está sendo importado e o documento atual. Nesse caso, é uma relação de estilização.
o atributo href define o caminho a ser percorrido para importação. Nesse caso, o documento .css está na pasta css.

Para conhecer mais sobre estilização, clique aqui.


E ai, deu para aprender em 10 minutos?

Depende do seu nível de abstração, se a minha escrita foi coerente e coesa, se foi preciso ler mais de uma vez.

Aprender em 10 minutos não acontece, nem em 1 mês. Fica ai o conselho: para aprender é necessário constância, pratique todos os dias, desafie a si mesmo, porque conhecimento não aplicado de nada adianta. Ele se perde, se esquece.

Esse conteúdo exposto aqui é um pouquinho do mundo das linguagens de marcação e estilos. Tem muito mais.

Seja curioso, pesquise e aplique.

Valeu por estar até aqui.

Até a próxima!

Top comments (0)