Desenvolvimento de sites: CSS - estilos inline, incorporado e externo

Existem três tipos de folha de estilo CSS possíveis para utilização em projetos WEB: estilos inline, incorporado e externo

Desenvolvimento de sites: CSS - estilos inline, incorporado e externo

 

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.

Aprimore seus conhecimentos, acessando os Cursos CPT, da área Desenvolvimento de Sites e Softwares, elaborados pelo Centro de Produções Técnicas.

Entre os cursos, temos:

Curso CPT Desenvolvimento de Sites – Parte 2 – CSS

Curso CPT Desenvolvimento de Sites – Parte 1 – HTML

Curso CPT Desenvolvimento de Sites – Parte 3 – JavaScript

Curso CPT de Programação Java

Curso CPT Programação PHP

Curso CPT Avançado de Programação PHP

Curso CPT Lógica de Programação

Cursos Relacionados

Curso de Programação Java Curso de Programação Java

Com Prof. Allan Guerreiro Carneiro

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Lógica de Programação Curso Lógica de Programação

Com Prof. Allan Guerreiro Carneiro

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Programação PHP Curso Programação PHP

Com Prof. Allan Guerreiro Carneiro

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Desenvolvimento de Sites - Parte 1 - HTML Curso Desenvolvimento de Sites - Parte 1 - HTML

Com Prof. Sérgio dos Santos

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Desenvolvimento de Sites - Parte 2 - CSS Curso Desenvolvimento de Sites - Parte 2 - CSS

Com Prof. Sérgio dos Santos

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Desenvolvimento de Sites - Parte 3 - JavaScript Curso Desenvolvimento de Sites - Parte 3 - JavaScript

Com Prof. Sérgio dos Santos

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais

Deixe seu comentário

Avise-me, por e-mail, a respeito de novos comentários sobre esta matéria.

O CPT garante a você 100% de segurança e confidencialidade em seus dados pessoais e e-mail.
Seu comentário foi enviado com sucesso!

Informamos que a resposta será publicada o mais breve possível, assim que passar pela moderação.

Obrigado pela sua participação.

Outros artigos relacionados à área Desenvolvimento de Softwares

Últimos

Mais Lidos

Atendimento Online
Quer Facilidade