Dokumentový CSS styl

Jak již samotné označení napovídá, jde o kaskádový styl, který slouží pro nastavení a ovlivňování určeného HTML tágu v celém dokumentu. Tento kaskádový styl se většinou používá pokud potřebujeme definovat pouze HTML tágy, které se vyskytují pouze v uvedeném dokumentu. Nastavení a ovlivňování pomoci dokumentových kaskádových stylů je nepřenosné na jiné dokumenty.

Definování dokumentového kaskádového stylu se zadává mezi HTML tág <STYLE>, který je zadán do hlavičky dokumentu mezi HTML tág <HEAD>. Dokumentový kaskádový styl vytvoříme pomoci selektorů a CSS tříd, na které se poté odkazujeme pomoci atributu CLASS="jméno_třídy" v HTML tágu.

V příkladu níže naleznete kompletní ukázku jak nejlépe používat dokumentový kaskádový styl.

Příklad:

<HTML>
<HEAD>
   <TITLE> Ukázka dokumentového kaskádového stylu </TITLE>
<STYLE TYPE="text/css"><!-- 
/* nastavení HTML elementu SPAN */ 
span { 
   background-color: #000000; 
   color: #FFFF00; 
} 

/* nastavení HTML tágu pomoci třídy, 
   umožňuje nastavení jakéhokoliv HTML tágu */ 
.new { 
   background-color: #000000; 
   color: #FFFF00; 
} 

/* nastavení jen pro DIV tág se zadáním třídy */ 
div.abc { 
   background-color: #000000; 
   color: #FFFF00; 
} 
--></STYLE>
</HEAD> 
<BODY>

   <SPAN> 
      Text nastavený dokumentovým stylem pro tág SPAN. 
   </SPAN>

   <P CLASS="new"> 
      Text nastavený vlastním dokumentovým stylem, 
      a to po zadání jména_třídy (.new), 
      lze použít v různých tágech. 
   </P>

   <DIV CLASS="abc"> 
      Text nastavený dokumentovým style pro tág DIV. Tento text bude nastaven 
      jen po zadání jména_třídy (abc), jméno_třídy je platné pouze pro tág DIV. 
   </DIV>

   <DIV>
      Text není změněn, není zadána třída (CLASS="abc"). 
   </DIV>

   ... 

</BODY>
</HTML>