Como inserir css no html ?

Postado: 13 de janeiro de 2022

Como inserir css no html ?

Neste artigo veremos a maneira correta de adicionar CSS no html.

Como adicionar CSS no arquivo Html ?

Temos três maneiras de adicionar o CSS:

1. CSS Inline

O grande problema de utilizar CSS no meio das tags do HTML é a manutenção do código

Sempre que o elemento que aplicamos estilo inline for modificado, temos que lembrar de mudar este CSS em todas as páginas que ele está e nas tags Html.

Isso gera um grande problema no futuro, imagina você ter que correr página por página e ir alterando o Css

Pode acarretar em várias revisões, por causa de um ajuste em CSS inline eo trabalho vai ser redobrado.

Veja o exemplo do Css Inline:

<h1 style="font-size:30px; color:blue">Css Online </h1> 
<p style="font-size:16px;">Somente um teste com css Inline </p>

2. CSS no <head>

Diferente do inline é adicionar o CSS no <head>, porém ainda não é o correto de se fazer.

Um dos problemas é que esse código é adicionado no HTML, no entanto temos que alterá-lo em todos os arquivos que precisam das modificações também.

Acarretando os problemas de manutenção do código, Um pouco melhor que o css no inline. é que ele fica sempre no <head> da página, ou seja no “Topo”.

Frisando aqui isso gera um outro problema, é o excesso de códigos CSS que pode deixar seu documento HTML muito GRANDE, tornando um arquivo excessivamente grande para ser alterado.

Veja o exemplo do Css no <head>:

<!DOCTYPE html>
<html>

  <head>
  <title>Códigos Html e Css Prontos</title>

  <style type=”text/css”>
     
    h1 {color:blue; font-size:2em;}
     a {color:black; font-size:1em; text-decoration:none;}
    
    .title      { color:green; font-size:2em;}
    .link       { color:black; font-size:1em; text-decoration:none; }
    .link:hover { color:green; text-decoration:underline; }

</style>

</head>
<body>

  <h1>Códigos Html e Css</h1>
  <a href=”#”>Veja mais artigos sobre Html</a>

  <h2 class="title">Usando Classes</h2>
  <a href=”#” class="link">Link Personalizado com css</a>

</body>
</html>

3. Como inserir css no html de maneira correta ?

Veja a maneira correta de inserir o CSS arquivo separado externo.

A melhor maneira e separar seu código de CSS do HTML.

Uma boa prática pode ser criar um arquivo chamado style.css com todas as regras e importar ele no HTML.

Veja o Exemplo na prática.

Vamos Adicionar o Html:

<!DOCTYPE html>
<html>

  <head>
  <title>Códigos Html e Css Prontos</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

  <h1>Códigos Html e Css</h1>
  <a href=”#”>Veja mais artigos sobre Html</a>

  <h2 class="title">Usando Classes</h2>
  <a href=”#” class="link">Link Personalizado com css</a>

</body>
</html>

Observação

<link rel="stylesheet" type="text/css" href="css/style.css">

Crie uma pastinha chamada Css/ e bote seus styles.css dentro dela.

Agora vamos Adicionar o Css:

*{
  
  /*Resetando as configurações do navegador*/
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

/*Aqui você começa a estilizar criar classes etc.*/

    h1 {color:blue; font-size:2em;}
     a {color:black; font-size:1em; text-decoration:none;}
    
    .title      { color:green; font-size:2em;}
    .link       { color:black; font-size:1em; text-decoration:none; }
    .link:hover { color:green; text-decoration:underline; }

Aproveitando Agora que você já viu como inserir o css de forma correta no html.

Veja neste artigo !

Como usar Classe no Html e Css de uma forma mais prática ?

Baixe o Exemplo

Publicado por: loopnerd

961 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado.