CSS ile sayfa boyamak: web tasarımının renk fırçası

CSS nasıl çalışır?

Bir HTML elemanını seçersin, sonra özelliklerini yazarsın. Örneğin "tüm paragrafların yazısı mavi ve 16 piksel olsun" diyebilirsin. Bu kural tüm paragraflara uygulanır. Tek satırı değiştirince yüzlerce yerdeki görünüm değişir; bu yüzden CSS çok güçlüdür.

Kutu modeli

Her HTML elemanı etrafında görünmez bir kutu vardır. İçerideki boşluk (padding), dışarıdaki boşluk (margin) ve kenarlık (border) bu kutuyu oluşturur. Neden şu düğme tam ortaya gelmiyor diye uğraşıyorsan kutu modelini anlamak çoğu sorunu çözer.

Renk ve font

Rengi ismiyle ("red"), hex koduyla (#FF5733) veya RGB sayılarıyla yazabilirsin. Yazı tipini Google Fonts’tan ücretsiz alabilirsin. Birkaç satır CSS, sayfayı tamamen farklı bir görünüme taşır.

Mini görev

HTML sayfana bir style etiketi ekle. Sayfa arka planını açık sarı yap: body { background-color: lightyellow; }. Tarayıcıyı yenile ve farkı gör. CSS, tek satırla dünyayı değiştirebilir.