Três formas de se usar CSS
Conheça as três formas de se utilizar o CSS em páginas WEB, como inline, embebido e arquivo externo.
Como todos já estão cansados de saber, CSS não é uma linguagem de programação e sim de estilização (formatação de páginas) que é a linguagem de estilização da web, todos os sites atualmente usam CSS, se encontrar algum que não é, por favor, deixe o link nos comentários deste post, acredite, até pode existir, mas o layout deixa muito a desejar.
Como todo processo de desenvolvimento, sempre há situações na qual você se depara com qual solução aderir para o projeto, pensando nisto resolvi criar este POST para falar sobre as três formas de se usar CSS e quando usar cada uma delas.
Inline – Como o próprio nome já diz, é inserido o código CSS dentro de uma Tag, logo abaixo você vera um exemplo.
Este método não é recomendável para se estilizar algo que tem muita importância no site e muito menos algo que muito provável sofrerá mudanças, pois se for necessário efetuar uma manutenção no site, você terá muito mais dificuldades, pois estará misturado HTML com CSS, além de ter que ficar procurando em meio a várias Tags códigos CSS.
Este método só é recomendável em páginas pequenas, como por exemplo, páginas que não tem muita influência no uso do site ou sistema, sua sintaxe de uso é mostrada abaixo.
Código 01:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Três formar de se usar CSS</title>
</head>
<body>
<div id="dvCentro" style="width:200px; background-color:blue;">
<h1 style="font-family:courier; color:white;">Três formas de se usar CSS.</h1>
</div>
</body>
</html>
Usa-se o atributo style=”” e dentro dele todo código CSS, separado por ; (ponto e virgula).
Incorporado ao Documento/Embebido – Este método nada mais é do que usar o CSS dentro da mesma página onde contém o HTML, existem muitos sites e sistemas que aderem a esta tecnologia, pois dentro do cabeçalho, é usado as Tags <style type=”text/css”></style> ou apenas <style></style>, dentro das mesmas é usado os códigos CSS.
Este método é adequado para quando o CSS não será mais usado em nenhum outro lugar do site, ou seja, não haverá a necessidade de reaproveitamento de uma class ou id dentro do site, é muito popular encontrar este código em páginas que o desenvolvedor não se preocupa em abrir o código HTML para dar manutenção, diferente do Inline que fica perdido em meio as Tags, o Incorporado facilita mais a localização já que fica no cabeçalho.
Resumindo, este método você deve usar quando não há a necessidade de usar as mesmas class e id para outras páginas, este tipo de página é exclusivo em meio a um sistema.
Nada impede que você use Inline, Incorporado ao documento e externo há uma mesma página, isto vai de sua necessidade e não existe uma regra clara que diz para não usar, como já disse vai da sua necessidade.
Código 02:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Três formar de se usar CSS</title>
<style type="text/css">
#dvCentro{
width:200px;
padding:10px;
background-color:blue;
}
h1{
font-family:courier;
color:white;
}
</style>
</head>
<body>
<div id="dvCentro" style="">
<h1 style="">Três formas de se usar CSS.</h1>
</div>
</body>
</html>
Externo – Como disse no tópico anterior, não existe uma forma correta de se usar, pois vai de usa necessidade, o modo externo é recomendável se usar quando seu código CSS poderá ser reutilizado em outras páginas (Tags) dentro do site, e também para não ter que ficar dando manutenção em várias páginas, usa-se um único arquivo CSS externo que poderá ser encontrado e dado as devidas manutenções facilmente sem perder tempo na localização das páginas HTML.
Este método é mais comum e usado, pois facilita muito a vida do desenvolvedor Front-End, além do site ficar mais organizado e as páginas também, já que HTML e CSS não ficarão misturados.
Sua sintaxe de uso é mito simples, usamos o seguinte código, <link rel=”stylesheet” type=”text/css” href=”stilo.css” media=”all” />, abaixo a explicação da Tag link e seus atributos.
<link> - Referência uma ancora para arquivos externos.
rel – Relationship que é uma relação, no caso Stylesheet (CSS).
type – Tipo, que será atribuído o valor text/css.
href – HyperReference, deve ser passado o caminho exato do seu arquivo .css
media – Este aqui é opcional, coloquei apenas para complementar mais o código e tem relação com Media Queries, no final da página tem um link para quem quer se aprofundar mais no assunto.
Código 03 – HTML:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Três formar de se usar CSS</title>
<link rel="stylesheet" type="text/css" href="estilo.css" media="all" />
<style type="text/css"></style>
</head>
<body>
<div id="dvCentro" style="">
<h1 style="">Três formas de se usar CSS.</h1>
</div>
</body>
</html>
Código 04 – CSS:
#dvCentro{
width:200px;
padding:10px;
background-color:#111;
}
h1{
font-family:courier;
color:white;
}
Agora você já conhece as três formas que tem de se usar CSS, basta você escolher a melhor para se utilizar em seu sistema.
Se houverem dúvidas, deixe nos comentários.
Introdução sobre Media Queries- http://tableless.com.br/introducao-sobre-media-queries/