Quando falamos em desenvolvimento de sites, chamamos tipo de CSS a forma com que o documento HTML irá usar os estilos CSS. Existem três tipos de folha de estilo CSS possíveis para utilização em projetos WEB: estilos inline, incorporado e externo.
Estilo inline
Estilo inline é quando os estilos CSS são aplicados diretamente dentro da tag de abertura de um elemento HTML. No entanto, este tipo de uso das CSS não é recomendado e encontra-se em desuso pelos desenvolvedores WEB. Veja a seguir um exemplo de utilização deste tipo de estilo:
<div style=“background-color:blue; color: red; width:300px; height:200px;”>
<h1>...</h1>
<p>...</p>
<p>...</p>
</div>
Veja que para o elemento div acima existe uma formatação de estilo inline, ou seja, dentro da própria tag de abertura do elemento div.
Como dito anteriormente, isso não é recomendado pelo fato de que o código CSS do estilo acima não é reaproveitado nem usado em outras páginas do site. Além disso, a manutenção deste tipo de CSS é muito complicada e difícil, gerando altos custos para o projeto.
Estilo incorporado
O estilo incorporado também não é o mais indicado e recomendado, uma vez que estilos escritos desta forma ficam restritos a um único documento, não sendo possível a sua reutilização em outras páginas do projeto WEB.
Neste método, você declara a folha de estilo diretamente dentro da seção head do documento HTML, utilizando o elemento style. Veja um exemplo a seguir da utilização deste tipo de estilo:
<html>
<head>
<style type="text/css">
h2 {color:#000;}
</style>
</head>
<body>
<h2>Título Secundário da Página</h2>
</body>
</html>
Veja que no exemplo acima o elemento h2 está recebendo uma formatação de estilo. Perceba que esta formatação está embutida no próprio documento HTML, na seção head.
Estilo externo
Este tipo de uso de CSS em documentos HTML é o mais indicado e recomendado. Neste tipo, os códigos CSS ficam em um documento externo ao documento HTML, separando assim as camadas de estrutura e apresentação do projeto WEB.
Existem duas formas de incorporar folhas de estilos CSS externa ao documento WEB. Veja-as a seguir:
1. Linkadas
Para o tipo de estilo CSS externo linkado, usa-se o elemento link para incorporar o documento CSS externo ao documento HTML. O elemento link deve ser usado dentro da seção head do documento HTML.
Veja a seguir um exemplo da utilização do elemento link para incorporar uma folha de estilo CSS ao documento HTML. Neste exemplo, imagine que o documento CSS esteja dentro de uma pasta chamada “css” e o seu arquivo HTML, “index.html” esteja na raiz, como pode ser visto na ilustração abaixo:
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/estilos.css" />
</head>
Partindo do princípio que o documento CSS esteja nomeado como “estilos.css” e que esteja dentro de uma pasta chamada “css”, o atributo href deve ficar exatamente com esta informação: “css/estilos.css”, que é a forma com que o navegador entenderár onde se encontra o arquivo CSS a ser linkado.
2. Importadas
O tipo de estilo das CSS importadas funciona igualmente ao tipo de estilo das CSS linkadas. O que difere aqui é somente a forma com que isto é feito, uma vez que, neste caso, é usada a diretiva @import dentro do elemento style, na seção head do documento HTML, como pode ser visto no exemplo abaixo:
<head>
<style type=“text/css”>
@import url("css/estilos.css") screen, projection;
</style>
</head>
Se o desenvolvedor pretende ganhar velocidade, não é recomendável o uso do estilo importadas, pois o @import demora mais para carregar a folha de estilo.
Por Andréa Oliveira.
Este conteúdo pode ser publicado livremente, no todo ou em parte, em qualquer mídia, eletrônica ou impressa, desde que contenha um link remetendo para o site www.cpt.com.br.
Deixe seu comentário
Informamos que a resposta será publicada o mais breve possível, assim que passar pela moderação.
Obrigado pela sua participação.
