CSS - Inclusão

Existem quatro maneiras de associar estilos ao seu documento HTML. Os métodos mais comumente usados são CSS inline e CSS externo.

CSS incorporado - o elemento <style>

Você pode colocar suas regras CSS em um documento HTML usando o elemento <style>. Esta tag é colocada dentro das tags <head> ... </head>. As regras definidas com esta sintaxe serão aplicadas a todos os elementos disponíveis no documento. Aqui está a sintaxe genérica -

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

Isso produzirá o seguinte resultado -

Atributos

Os atributos associados aos elementos <style> são -

Atributo	Valor	Descrição
tipo	texto / css	Especifica a linguagem da folha de estilo como um tipo de conteúdo (tipo MIME). Este é um atributo obrigatório.
meios de comunicação	tela tty televisão projeção portátil impressão braille auricular todos	Especifica o dispositivo em que o documento será exibido. O valor padrão é all . Este é um atributo opcional.

CSS Inline - O atributo de estilo

Você pode usar o atributo de estilo de qualquer elemento HTML para definir regras de estilo. Essas regras serão aplicadas apenas a esse elemento. Aqui está a sintaxe genérica -

<element style = "...style rules....">

Atributos

Atributo	Valor	Descrição
estilo	regras de estilo	O valor do atributo style é uma combinação de declarações de estilo separadas por ponto e vírgula (;).

Exemplo

A seguir está o exemplo de CSS embutido com base na sintaxe acima -

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

Isso produzirá o seguinte resultado -

CSS externo - o elemento <link>

O elemento <link> pode ser usado para incluir um arquivo de folha de estilo externo em seu documento HTML.

Uma folha de estilo externa é um arquivo de texto separado com .cssextensão. Você define todas as regras de estilo neste arquivo de texto e, em seguida, pode incluir esse arquivo em qualquer documento HTML usando o elemento <link>.

Aqui está a sintaxe genérica de inclusão de arquivo CSS externo -

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Atributos

Os atributos associados aos elementos <style> são -

Atributo	Valor	Descrição
tipo	texto css	Especifica a linguagem da folha de estilo como um tipo de conteúdo (tipo MIME). Este atributo é obrigatório.
href	URL	Especifica o arquivo de folha de estilo com regras de estilo. Este atributo é obrigatório.
meios de comunicação	tela tty televisão projeção portátil impressão braille auricular todos	Especifica o dispositivo em que o documento será exibido. O valor padrão é all . Este é um atributo opcional.

Exemplo

Considere um arquivo de folha de estilo simples com um nome mystyle.css tendo as seguintes regras -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Agora você pode incluir este arquivo mystyle.css em qualquer documento HTML da seguinte maneira -

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

CSS importado - regra @import

@import é usado para importar uma folha de estilo externa de maneira semelhante ao elemento <link>. Aqui está a sintaxe genérica da regra @import.

<head>
   @import "URL";
</head>

Aqui, URL é o URL do arquivo de folha de estilo com regras de estilo. Você também pode usar outra sintaxe -

<head>
   @import url("URL");
</head>

Exemplo

A seguir está o exemplo que mostra como importar um arquivo de folha de estilo para um documento HTML -

<head>
   @import "mystyle.css";
</head>

Substituição de regras CSS

Discutimos quatro maneiras de incluir regras de folha de estilo em um documento HTML. Aqui está a regra para substituir qualquer regra da folha de estilo.

Qualquer folha de estilo embutida tem a maior prioridade. Portanto, ele substituirá qualquer regra definida nas tags <style> ... </style> ou regras definidas em qualquer arquivo de folha de estilo externo.
Qualquer regra definida nas marcas <style> ... </style> substituirá as regras definidas em qualquer arquivo de folha de estilo externo.
Qualquer regra definida em um arquivo de folha de estilo externo tem a prioridade mais baixa e as regras definidas neste arquivo serão aplicadas apenas quando as duas regras acima não forem aplicáveis.

Lidar com navegadores antigos

Ainda existem muitos navegadores antigos que não suportam CSS. Portanto, devemos ter cuidado ao escrever nosso CSS incorporado em um documento HTML. O snippet a seguir mostra como você pode usar tags de comentário para ocultar CSS de navegadores mais antigos -

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

Comentários CSS

Muitas vezes, você pode precisar colocar comentários adicionais em seus blocos de folha de estilo. Portanto, é muito fácil comentar qualquer parte na folha de estilo. Você pode simplesmente colocar seus comentários dentro de /*..... este é um comentário na folha de estilo ..... * /.

Você pode usar / * .... * / para comentar blocos de várias linhas de maneira semelhante ao que faz nas linguagens de programação C e C ++.

Exemplo

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

Isso produzirá o seguinte resultado -