Birçoğumuz, CSS bilmeden de Drupal'i kullanabileceğimizi düşünüyor. Ancak Drupal ve hazır temaların sağladığı görünümün dışına çok az dahi olsa çıkmak istediğimizde yolumuz muhakkak CSS'den geçecektir.

Aslında CSS öğrenmek, bir programlama dili öğrenmekten çok daha basit. Öncelikle CSS'in Drupal ile ilişkisine bakalım:

Drupal bir sayfanın içeriğini oluşturmak için PHP kullanıyor. PHP sayesinde ziyaretçinin önüne gelen HTML kodu oluşturuluyor. HTML çıktısının görünümünü ise o sayfaya bağlı olan CSS kodları belirliyor. Yani bir sayfanın içeriğini (yazı, resim, dosya vs.) HTML kodu sağlarken, bu içeriğin yerleşimini, renklerini, boyutlarını CSS kodları belirliyor. CSS kodlarını 3 yerde bulabiliriz:

1. HTML kodunun içinde, ilgili yerlerde
2. HTML kodunda HEAD bölgesinin içinde
3. Ayrı bir CSS uzantılı dosyada (bu dosya HTML kodunun başında tanımlanıyor)

Drupal için konuşacak olursak, genellikle 3. yol kullanılıyor. Bir temanın kullanacağı CSS dosyaları ise tema klasöründeki info dosyasında belirtiliyor. Genellikle her tema dosyası style.css adında bir dosya kullanıyor. Bunun dışında site yerleşimi için ayrıca layout.css, yazıcıdan çıktı görünümünü belirlemek için print.css veya farklı tarayıcılara etki edebilecek ie6.css, ie7.css gibi dosyalar da bulunabiliyor.

Ortak içeriğe etki eden birden fazla CSS kodu varsa bu kodlardan birinin seçilmesi gerekiyor. Tarayıcının belirlediği önem sırası şöyle:
1. Tarayıcının kendi CSS kodları
2. Dışarıdan alınan CSS dosyası
3. HEAD kısmında tanımlı CSS kodları
4. HTML kodu içindeki CSS kodları

Ancak bir içeriğin bazı özellikleri bir yerde, diğer özellikleri farklı bir yerdeyse bu iki bilgi birleştiriliyor. Örneğin:
Dış CSS dosyasında:

• color: red;
• font-size: 12px;
• font-weight: bold;

oluyor; yani h1 başlıkları 12 piksel büyüklüğünde, kalın ve kırmızı renkli oluyor.

Serinin bir sonraki dersi olan CSS: class ve id kavramları'nda, CSS dosyalarında kullanılan "class" ve "id" kavramlarına bakacağız.

NOT: İngilizce olarak sunulan en başarılı CSS derslerinden birini bu adreste bulabilirsiniz.