Profesyonel bir web sitesine sahip olmanın, para ve zaman gerektirdiği düşünülse de HTML, CSS, PHP gibi çeşitli kodlama dilleri ile son derece modern ve benzersiz web siteleri tasarlanabilir.
CSS, web sayfalarını biçimlendirmek için HTML’nin tamamlayıcısı olarak kullanılan bir dil olduğundan, CSS nedir? CSS kodları nelerdir? sorularını yanıtlamadan önce HTML’nin ne olduğunu netleştirmekte yarar var.
HTML (Hypertext Markup Language) web sitenizin tanımladığınız formatta ve istediğiniz gibi görünmesini sağlayan bir bilgisayar dilidir.
HTML hakkında detaylı bilgi almak için ” HTML Nedir ” makalemizi okuyabilirsiniz.
WordPress gibi birçok site oluşturucu, hazır şablonlar arasından seçim yapma ve ögeleri “sürükleyip bırakarak” web sayfalarını geliştirme olanağı sunar. Ancak daha fazla özelleştirme gerektiren web siteleri için HTML ve CSS’e ihtiyaç duyulur.
CSS Nedir?
CSS (Cascading Style Sheet) açılımı “Basamaklı Stil Sayfaları” anlamına gelen web sayfalarında “yazı tipi, renk, boyut, arka plan ve dokular” gibi ögelerde arzu edilen değişiklikleri tanımlamanızı sağlayan bir programlama dilidir.
CSS ile düşen karlar, uçan kuşlar, loading (yükleniyor) simgesi gibi animasyonlar yaparak web sitelerine şık detaylar eklemek mümkündür.
Dahası CSS kullanarak sitenizin cep telefonu, masaüstü ve tablet gibi farklı cihazların ekranlarında nasıl görüneceğini kontrol edebilirsiniz.
CSS, HTML’de kullanılan başlık, paragraf gibi elementlerin (tag) nasıl görüneceğini bildirir.
Web sayfanızın her bir öğesine ayrı bir stil vermek için CSS kullanabilirsiniz. CSS, web sayfanız üzerinde tümüyle kontrol sahibi olmanızı sağlar ve istediğiniz şekilde değişiklikler yapmanıza olanak verir.
CSS Kodları Nelerdir?
CSS ile bir web sayfasında görünmesini istediğiniz her tür öge için kod yazılabilir.
- Başlık (Heading)
- Arkaplan (Background)
- Yazı Tipi (Font Style)
- Paragraf (Paragraph)
- Kenarlık (Border)
- Pozisyon (Position)
- Bağlantı (Link)
- Liste (List)
- Tablo (Table)
- Metin (Text)
- Form
- Dış Çizgi (Outline)
- Çerçeve (Box) gibi çok sayıda CSS kodu bulunur.
Eğer bir web sayfasının belirli bir paragrafını italik ve mavi yapmayı tercih ederseniz; alttaki kodu sayfanıza eklemeniz gerekir. Tahmin edeceğiniz üzere burada, P; paragraf, Parantez: detayların tanımlandığı bölüm, font-weight: yazı tipine karşılık gelir.
P { color:blue; font-weight:italic; }
CSS Renk Kodları
CSS renk kodları “Head” bölümünde <style> etiketleri arasında, aşağıdaki tablodaki gibi; hex formatında (#RRGGBB), Desimal kod formatında (R, G, B) ya da renk ismiyle (aqua, turquoise…) yazılarak kullanılabilir.
Şimdi yukarıdaki renk kodlarının kullanıldığı CSS örneklerine göz atalım mı?
Bir metnin arka planını renklendirmek için yukarıdaki kodu kullandığınızda sonuç aşağıdaki gibi görünecektir.
Alt başlığınızın turkuaz görünmesini isterseniz aşağıdaki CSS kodunu yazabilirsiniz.
CSS Nasıl Kullanılır?
CSS stilleri HTML şablonunuzun her öğesine ayrı ayrı eklenebilir ama CSS birden çok stil bir öğeye ya da bir stil birden çok sayfaya uygulamak gibi daha pratik özellikleriyle ünlüdür . Örneğin; tüm H2 başlıklarının aynı renkte gösterilmesini sağlayabilirsiniz.
CSS kodları HTML’ye üç farklı şekilde eklenebilir:
- Satır İçi (inline) / Yerel CSS: Satır içi CSS ile sadece o etiketi etkileyecek biçimler verilebilir, <head> etiketleri arasındaki
<style> </style>etiketlerinin içine yazılır.
- Sayfa İçi / Genel CSS: Sayfa içinde belirli bir etiketi gördüğü her yerde, tanımlanmış özellikleri uygular. Genel CSS kodları,
<style> </style>etiketlerinin arasına yerleştirilir. Sayfalarınızın geç yüklenmesine neden olabilir. Alttaki gibi bir CSS koduyla sayfadaki tüm paragrafların ya da başlıkların aynı renk olmasını sağlayabilirsiniz.
- Harici (External) CSS: Head etiketleri içinde harici bir CSS dosyasına link vererek, bir CSS dosyasının HTML dosyasına eklenmesi yöntemidir. Birden fazla sayfada aynı .css dosyasının kullanılması mümkündür. Harici CSS dosyanız yüklenene kadar sayfanız düzgün görünmeyebilir.
Yukarıdaki CSS dosyası, aşağıdaki HTML dosyasına eklenen bir bağlantı ile dahil edilmiştir.
Harici CSS, HTML sayfalarının boyutunu küçülttüğü için ve sayfaların hızlı yüklenmesine neden olduğu için web sayfalarında sıklıkla kullanılan bir CSS ekleme yöntemidir.
HTML, JavaScript ve CSS gibi program dilleri dışında web sayfalarının geliştirilmesine yardımcı olan farklı teknolojileri de merak ediyorsanız; blogumuzdaki güncel içerikleri okuyabilirsiniz.
