Como inserir css no html ?
Animação Loading css – Estrelas
Botão de Download com Css
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 !
Deixe um comentário