CSS, Cascading Style Sheets (Basamaklı Stil Sayfaları) kelimelerinin baş harflerinin kısaltmasıdır. Web sayfalarının görsel görünümünü kontrol etmek, basit animasyonlar için kullanılır. CSS, HTML etiketlerine (tag) stil özellikleri ekleyerek web sayfalarının renklerini, yazı tiplerini, boyutlarını, konumlarını ve diğer özelliklerini değiştirmenizi sağlar. CSS, web geliştirmenin temelini oluşturur. Web tasarımı, web geliştirme ve web programlama gibi alanlarda kullanılan temel bir beceridir. CSS nedir ne değildir anlamak için sadece bu makaleyi okumanız yetmez. Ayrıca basit bir editörde elle kod yazmanızı tavsiye ediyoruz. Özellikle elde yazmanız kopyala yapıştır yamamanızı öneriyoruz.
CSS nedir, ne değildir? CSS aslında bir programlama dili değildir. Tıpkı HTML gibi bu teknolojiyi de “İşaretleme Dili” olarak tanımlayabiliriz. Zaten CSS, HTML yayımlandıktan çok sonra ortaya çıktı. Şu anda web geliştirme alanındaki başat teknolojidir ve bu alandaki herkesin temel olarak bilmesi, anlaması gerekiyor. Temel olarak CSS ile sayfanızın tüm görsel, UX(Kullanıcı Deneyimi) işlerini yapabilirsiniz. Bu işler font büyüklüğü ve font renginden başlar ve basitten karmaşığa animasyonlara kadar geniş bir alana yayılır. Öyle ki eğer doğru kullanabilirseniz tek bir kodla tüm cihazlarda çalışabilen bir web sitesi yapabilirsiniz.
CSS Nasıl Kullanılır?
HTML sadece bir dökümanı işaretler ve onu web ortamında dağıtır. O dökümanın nasıl görüneceğine ise CSS karar verir. Bunu yaparken de CSS dosyasını bir şekilde HTML içerisine dahil etmeniz gerekir. CSS kodlarını üç farklı şekilde HTML içerisine aktarabilirsiniz.
- External CSS : Bir link yoluyla stil dosyanınızı html sayfanıza ekleyebilirisiniz.
- Internal CSS: Sayfanızın
<head>...</head>ekiteleri arasına CSS Kodunuzu yazabilirsiniz. - Inline CSS: doğrudan bir HTML elementi içerisine CSS kodunuzu yazabilirsiniz.
Bu 3 kullanım şeklinin kendine göre artıları ve eksilerini başka bir yazıda yeniden ele alacağız. Ancak SEO açısından inline CSS kullanımı önerilmez. Bunun yerine external yanı başka bir sayfadan aktarmak genel bir uygulamadır. Bu şekilde kodları daha kolay kontrol edip daha kolay ve hızlı bir şekildee güncelleyebiliriz.
Neden HTML ve CSS Ayrı Dosyalarda?
Diğer bazı programlama dillerinde durum farklıdır. Örneğin Flutter stilleri ve göresel tasarımları ayrı bir dosyada tutmaz. Bunun yerine kod bloğunda diğer öğelerle birlikte yazmanızı ister. Ancak HTML ilk çıktığı zamanda böyle bir şeye ihtiyaç duymuyordu. Sadece tek bir şeye odaklanmıştı o da belgeleri hızlıca iletmek. Bu yüzden CSS ve hatta javaScript ayrı ayrı dosyalarda tutulur. Ancak bazı javaScript framework ya da kütüphaneleri (Uygulama Çatısı) JSX denilen ve HTML ile javascript hatta CSS dosyalarını tek bir kod bloğuna yazmayı tavsiye eder. ReactJs buna bir örnek olarak verilebilir.
CSS Nedir? Stil Dosyaları Kodu Nasıl Yazılır?
CSS Syntax nasıl yazılır? Stil dosyaları için için 3 temel bileşenden bahsetmek mümkündür. Herhangi bir CSS kod bloğu için bu 3 temel bileşem mutlaka bulunur. Aşağıdaki kod örneği ile bir yazının rengini kırmızıya çevirebilirisiniz.
h1 {color: red;}CSS Nedir anlamak için bu kodu anlamak gerekir. Kodu açıklamak gerekirse: temel HTML bileşnlerinden biri olan H1 etiketi için yazı rengini kırmızı yapıyoruz.
Selector (Seçici): Bir css kodunda hangi elemenin etkileneceğini seçer. Bu örnekte selector(Seçici) “h1” olarak karşımıza çıkar.
Property (Özellik): Her css kod bloğu bir özellik – değer çiftinden oluşur. Burada özellik(property), “color” yani renk olarak karşımıza çıkar.
Value(Değer): Son olarak seçtiğimiz bir elementin belirtilen özelliğine istediğimiz değeri atıyoruz. Bu örneğimizde h1 etiketi için renk özelliğinin değerini kırmızı olarak ayarladık. Ancak seçici konusu daha detaylı anlatılmalı. Çünkü bu örnekte tüm site içindeki h1 özelliğindeki elemetleri etkiler. Bunun için “class” ya da “id” özelliği ile seçim yapmak daha mantıklı olur.