Tipos de CSS: Inline, incorporado e Linkado

Definição de tipos de CSS e o uso de tags seletores, classes e identificadores. Veja as várias formas de usar CSS.

Home Tecnologia

CSS - Cascading Style Sheets (Folha de Estilos em Cascata), é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

O CSS deve ser usado em conjunto e em conformidade com o HTML, deve ser parte obrigatória de todo projeto web. Abaixo mostrei as diversas formas de usar a linguagem de estilo em um website qualquer. Vamos lá:

Declarações

As declarações CSS são escritas da seguinte forma:

color: #ff0000;

  • color - nome da propriedade
  • (:)  separa a propriedade do seu valor
  • #ff0000 - valor da propriedade
  • (;) finaliza uma instrução CSS

Tipos de CSS

Tipos de CSS não se refere a forma de escrever as declarações e sim o local onde ele é inserido. Se ele estiver junto ao código HTML, chamamos de CSS inline, no início da página HTML ele é incorporado e quando colocado em um arquivo externo, ele é CSS linkado.

Se analisarmos desta forma, podemos dizer que há três tipos de CSS: Inline, incorporado e linkado. Vejamos cada um deles.

CSS Inline

O CSS Inline é aquele que é inserido junto ao código HTML, através do atributo style. Sua aplicação é bastante questionada já que o modelo fica bastante parecido com a antiga formatação via HTML.

<p style="color: #ffff00; font-size: 11px ">

CSS Incorporado

CSS incorporado é aquele que é inserido no início do código HTML dentro da tag. o modelo incorporado é melhor que o inline, mas ainda apresenta deficiências, já que ele terá efeito apenas sobre a página e não poderá ser reaproveitado para outras páginas.

<style type="text/css">

p {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

color: #FF0000;

}

</style>

CSS Linkado

CSS linkado é o modelo recomendado, pois neste modelo todo o código CSS fica em um arquivo separado, podendo ser linkado a várias páginas do site. Este é o melhor modelo para promover o reaproveitamento do código.

<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />

Tipos de aplicação

Quanto a aplicação é possível usar o CSS em quatro tipos de elementos HTML, seletores, tags, classes e identificadores.

Seletores

Seletores são os elementos que o CSS pode formatar. São eles: Tags do HTML, classes (class) e identificadores (ID´s)

As tags são todas aquelas que usamos no HTML para criar uma página, como: body, div, h1, h2, p, strong, table, ul, entre outras. As classes são criadas usando o atributo class e pode ser aplicado em praticamente qualquer tag HTML. Já o id é criado com o atributo id e também pode ser aplicado a quase todas as tags.

Tags

Qualquer tag do HTML poderá ser formatada em CSS, porém, algus recursos não provocarão efeito nenhum. Por exemplo: aplicar cor em uma tag .

Para formatar tags, basta colocar o nome da tag como seletor. Exemplo:

body{

font-family: Verdana, Arial, Tahoma;

font-size: 12px;

background-color: #E3E3E3;

}

Todas as demais tags que forem usadas dentro do body são passíveis de formatação, já as tags dentro do head não podem ser formatadas, pois não aparecem dentro do corpo do documento visível ao usuário.

Classes

Diferente das tags, as classes não são aplicadas automaticamente no HTML. Uma vez criada, uma classe deverá ser aplicada manualmente no HTML.

A função das classes é fazer formatações específicas onde as definições de tags não são atendidas.

.recuo {

font-size: 10px;

color: #ff0000;

}

Identificadores

Os identificadores em CSS correspondem ao ID no HTML, ou seja, quando você criar um ID no HTML significa que ele poderá ser formatado no CSS.

#site{

width: 500px;

background-color: #ffffff;

}

 

Gostou? Compartilhe



 

Leia também:



© 2008-2019 | Professor Digital | Política de Privacidade | Em Jesus Cristo eu confio