CSSCursos WebTutoriais

Inserindo o CSS

Podemos inserir um arquivo CSS no código HTML de 3 formas, são elas:

1 – Folha de estilo externa;

2 – Folha de estilo interna;

3 – Estilo inline (em linha);

Folha de estilo externa

Folha de estilo externa é a melhor maneira de inserir estilo em uma página da Web.

Cria-se um arquivo .css, separado do codigo HTML e apenas “chamamos” ele dentro do nosso codigo.

A principal vantagem de se fazer assim é que alterando somente o arquivo .css,ele mudará todas as  paginas em que for usado.

Vale tambem ressaltar que uma referência a um arquivo CSS externo é colocada na seção <head> da página:

Você pode inserir o arquivo css na página da web, conforme mostrado abaixo:

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

Logo após, defina as regras de estilo a serem usadas como no exemplo abaixo:

p{color:red;}

Vantagens de CSS Externo:

  • Página HTML fica menor e estrutura mais limpa.
  • A página carrega mais rápido.
  • O mesmo arquivo .css pode ser usado em várias páginas.

Desvantagens de CSS Externo:

  • Até que o CSS externo seja carregado, a página pode não ser processada corretamente.

Folhas de estilo interno

A folha de estilo interna é usada em um único documento. Você define estilos internos na seção principal de uma página HTML, dentro da tag <style>.

Vejamos no trecho a baixo:

<head>
<style>
p{color:blue;border:1px solid red;}
</style>
</head>

A tag <style> é aberta e fechada dentro do codigo e já são escolhidas as regras de estilo no mesmo momento, sabendo que essas regras só serão aproveitadas dentro do codigo em que estão sendo usadas.

Vantagens de CSS Interno:

  • Apenas uma página é afetada pela página de estilos.
  • Classes e IDs podem ser usados por stylesheet interno.
  • Não é necessário carregar vários arquivos. O código HTML e o CSS podem estar no mesmo arquivo.

Desvantagens de CSS Interno:

  • Aumento do tempo de carregamento da página.
  • Ela afeta apenas uma página – não é útil se você quiser usar o mesmo CSS em vários documentos.

Folha de estilo Inline

Inline Style Sheet é definida no início de qualquer elemento apenas adicionando o atributo style.

<p style = "color:blue;border:1px red solid;"> Este é o exemplo do estilo em linha. </p>

É simplesmente adicionado o atributo “style” ao inicio do elemento da tag, com isso você está dizendo que somente essa tag usará esse estilo, será seu “estilo particular”.

Usar CSS desta forma não é recomendado, pois cada tag HTML precisa ser denominada individualmente.

Vantagens do CSS Inline:

  • Útil para quem quer testar e visualizar alterações.
  • Ótimo para correções rápidas.

Desvantagens do CSS Inline:

  • CSS Inline deve ser aplicado a cada elemento especificadamente.

Wendell Rodrigues

Administrador e editor do site TecForest , estudante de sistemas de informação pela Estácio de Sá, apaixonado por tecnologia e inovação.

Artigos relacionados

Deixe um comentário

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

Botão Voltar ao topo