Téměř každá webová stránka dnes používá kaskádové styly (CSS) pro určení svého vzhledu. Tradičně se CSS soubory vkládají do statických HTML dokumentů tagem link umístěným v hlavičce stránky.
Například:

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

Také Drupal tímto způsoben oznamuje, jaké soubory vedou k určení vzhledu stránky. Je tu ale jeden rozdíl, a tím je, že Drupal do hlavičky vkládá kaskádové styly automaticky. V Drupalu totiž neexistuje jeden kaskádový styl pro všechno, nýbrž každé téma vzhledu nebo dokonce modul může mít svůj vlastní. Navíc Drupal tvůrci vzhledu nabízí hned několik možností, jak vkládat nové nebo přepisovat staré kaskádové styly a určit tak, jak bude výsledný web vypadat.

Vkládání kaskádových stylů pomocí souboru .info

Vytváříme-li nové téma vzhledu pro Drupal, jsou kaskádové styly první a nejdůležitější věcí, která nás zajímá. Základní styl tématu vzhledu je dobré definovat v souboru .info našeho tématu.

Pokud v souboru .info nenastavíme nic, použije se jako výchozí soubor style.css. Chceme-li používat jiný soubor pro všechny druhy médii, stačí do souboru .info vložit řádek se jménem souboru kaskádového stylu následujícím způsobem.

stylesheets[all][] = css/mujStyl.css

stylesheets[screen,projector][] = css/mujScreenProjektorStyl.css

stylesheets[print][] = mujStylProTisk.css

Při vytváření tématu vzhledu je také nutné vypnout všechny druhy CSS optimalizace, kterou Drupal nabízí tamtéž.

Vkládání stylů skrz funkce z Drupal API

Většinou je vložení stylu pomocí souboru .info naprosto dostačující, ale protože je soubor .info statický, vzniká zde potřeba vkládat kaskádové styly také dynamicky, tedy jen za určitých podmínek.

V Drupalu pro to existují hned dvě funkce, drupal_add_css a drupal_get_css. První zmíněná funkce přidá CSS soubor do řady k ostatním, kde bude čekat než se všechny společně spracují a vypíší na své místo do tagu head, což udělá druhá funkce, která vrací řetězec tagů link ukazujících na jednotlivé CSS soubory.

Následující kód vloží kaskádový styl front-page.css vždy na úvodní stránku a nebo, není-li stránka úvodní, vloží styl pojmenovaný podle aktuální adresy stránky. Například na stránku http://example.com/admin vloží kaskádový styl „path-admin.css“.

<?php
# nahradte hook jmenem tematu vzhledu
function hook_preprocess_page(&$variables) {
  $front_style = path_to_theme() .'/front-page.css';
  $path_style = path_to_theme() .'/path-'. arg(0) .'.css';
 
  if (file_exists($front_style) && $variables['is_front']) {
    $include_style = $front_style;
  }
  elseif (file_exists($path_style)) {
    $include_style = $path_style;
  }
 
  if (isset($include_style)) {
    drupal_add_css($include_style, 'theme', 'all', FALSE);
    $variables['styles'] = drupal_get_css();
  }
}
?>

Funkce drupal_add_css má parametr, jenž nastavuje, zda se má CSS soubor spojit s ostatními soubory do jednoho velkého CSS souboru. Pokud se takovým způsobem dynamicky spojuje více větších souborů, může to značně zpomalit načítání stránek. Zvažte používání tohoto parametru!

Přepisování stylů modulů

Každý modul, ať už dodatečný nebo modul jádra, může ovládat vzhled svého výstupu pomocí kaskádových stylů. Aby se tvůrci témat vzhledu nemuseli starat o vizuální stránku všech modulů, mají všechny moduly svůj výchozí styl, který může být podle uvážení tvůrce tématu změněn, podobně jako se mění chování funkcí uvnitř šablon. Všechny provedené zásahy do výchozích stylů by měly být umístěny ve složce s tématem vzhledu.

Přepsání CSS souboru konkrétního modulu je tak jednoduché, jako redefinování jména souboru uvnitř souboru .info. Jako příklad vezměme kaskádový styl system-menus.css, původně umístěný ve složce „/modules/system“. Následující řádek souboru .info zařídí, že se původní soubor bude ignorovat a že se použije soubor umístěný ve složce s tématem vzhledu.

stylesheets[all][] = system-menus.css

Pozor také na:
• cesty uvnitř kaskádového stylu při používání CSS pravidel url() a @import.
• změnu pořadí jednolivých stylů v hlavičce stránky
• dynamickou změnu CSS souborů

Standardní názvosloví kaskádových stylů v Drupalu

Většina témat vzhledu používá stejné názvy CSS tříd pro nejběžnější prvky stránky. Tady je u jejich názvu i krátký popis.

Prvky stránky

.menu
Pro všechny stromy nabídek, jako třeba navigační menu
.block
pro jednotlivé bloky
.links
Odrážky s odkazy, tedy například primární a sekundární odkazy nebo termíny kategorií

Prvky uzlu

.node
Obal (wrapper) všech uzlů, včetně titulku
.node-title
nadpis uzlu
.content
tělo uzlu, ale i třeba bloku
.inline
mění vzhled prvků UL tagu do vodorovného zobrazení
.feed-icon
styl RSS feed ikony, obvykle je umístěná v patičce stránky