Heading css

Heading css

Neste tutorial vamos criar um Heading css personalizado.

Hoje, vamos falar sobre cabeçalhos e títulos. Quando você coloca algum conteúdo na web (ou em um papel), você precisa configurar algum tipo de estrutura. E é aqui que você precisa de títulos: para dar sentido ao seu conteúdo.

Como desenhar um bom título?  Tentei criar um exemplo de título, básico.

Acho que não há muita necessidade de explicação sobre a marcação de texto o foco aqui é o design personalizado no titulo.

Por que não usamos h5 e h6? 

Simplesmente porque não é muito comum ter tanta profundidade para sites normais. Mas se você tiver um que exija esses níveis de títulos, certifique-se de incluir alguns estilos para eles também.

Vamos começar as tags e os códigos html e css.

Nesta seção, projetaremos uma estrutura simples na tag  <h1>, e a <p> para inserir o texto de descrição. 

Usaremos as classes (.heading e a class .description) para dar o formato e estilizar com css.

Essas é a tags e classes que usaremos para criar o nosso Heading com css e html.

Vamos Adicionar o HTML

     <h1 class="heading">Códigos Css</h1>
               
     <p class="description">

       Cascading Style Sheets é um mecanismo para adicionar estilos a uma página web, aplicado diretamente nas tags HTML<br>
       ou ficar contido dentro das tags style Também é possível, adicionar estilos adicionando um link para um arquivo CSS que contém os estilos.

     </p>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o  nosso Heading com html e css.

.heading {

  width: 100%;
  margin-left: 1rem;
  font-weight: 900;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  line-height: 1;
  padding-bottom: 0.5em;
  margin-bottom: 1rem;
  position: relative;

}

.heading:after {

  display: block;
  content: "";
  position: absolute;
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #1a9be6, #1a57e6);
  bottom: 0;

}

.description {

  width: 100%;
  margin-top: 0;
  margin-left: 1rem;
  margin-bottom: 3rem;

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando