CSS (Basamaklı Stil Sayfaları), harika görünen web sayfaları oluşturmanıza olanak tanır. Bu makale CSS’nin ne olduğunu basit bir sözdizimi örneğiyle açıklar ve ayrıca dille ilgili bazı önemli terimleri kapsar.
HTML’e Giriş kılavuzunda HTML’in ne olduğunu ve sayfaları düzenlemek için nasıl kullanıldığını gördük. Bu sayfalar bir web tarayıcısında okunabilir hale geldiler. Başlıklar normal metinden daha büyük görünecek, paragraflar yeni bir satıra bölünecek ve aralarında boşluk olacak şekilde düzenlendiler Bağlantılar, metnin geri kalanından ayırt edilmek için renkli ve altı çizili yazıldı. Tüm bu düzenlemeler tarayıcının varsayılan stilini uygulamıştı – sayfanın yazarı tarafından açık bir stil belirtilmemiş olsa bile temelde okunabilir olmasını sağlamak için tarayıcının HTML’ye uyguladığı çok temel stiller bulunuyordu.
Ancak, tüm web siteleri böyle görünseydi web sıkıcı bir yer olurdu. CSS kullanarak HTML öğelerinin tarayıcıda tam olarak nasıl göründüğünü kontrol edebilir, istediğiniz tasarımı kullanarak ziyaretçilerinize sunabilirsiniz.
Ne için CSS?
Daha önce de belirttiğimiz gibi CSS, belgelerin kullanıcılara nasıl sunulduğunu – nasıl şekillendirildiğini, düzenlendiğini vb. belirten bir dildir.
Bir belge – genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. HTML en yaygın işaretleme dilidir, ama aynı zamanda SVG ya da XML gibi diğer biçimlendirme dilleride HTML ile kullanılabilir.
Bir belgeyi bir kullanıcıya sunmak, onu hedef kitleniz tarafından kullanılabilecek bir forma dönüştürmek anlamına gelir. Tarayıcılar, Firefox , Chrome veya Edge gibi, oluşturulan belgeleri bir bilgisayar ekranı, projektör veya yazıcıda görsel olarak sunmak için tasarlanmıştır.
Not: Bir tarayıcıya bazen kullanıcı aracısı da denir ; bu, temelde bir bilgisayar sistemi içindeki bir kişiyi temsil eden bir bilgisayar programı anlamına gelir. Tarayıcılar, CSS hakkında konuşurken aklımıza gelen ana kullanıcı aracı türüdür, ancak tek aracı değildir. HTML ve CSS belgelerini yazdırılacak PDF’lere dönüştüren başka kullanıcı aracıları da mevcuttur.
CSS, temelde belge metni stili için kullanılabilir – örneğin, başlıkların ve bağlantıların rengini ve boyutunu değiştirmek için. Düzen oluşturmak için kullanılabilir – örneğin tek bir metin sütununu, ana içerik alanı ve ilgili kenar çubuğu olan bir düzene dönüştürmek için. Animasyon gibi efektler için bile kullanılabilir.
CSS sözdizimi
CSS kural tabanlı bir dildir – web sayfanızdaki belirli öğelere veya öğe gruplarına uygulanması gereken stil gruplarını belirten kurallar tanımlarsınız. Örneğin, “Sayfamdaki ana başlığın büyük kırmızı metin olarak gösterilmesini istiyorum.” diyorsanız CSS size bunu kolayca sağlar.
Aşağıdaki kod, yukarıda açıklanan stili elde edecek çok basit bir CSS kuralını gösterir:
h1 {
color: red;
font-size: 5em;
}Kural bir seçici ile açılır. Seçici, stil vereceğimiz HTML öğesini seçer . Bu durumda, birinci seviye başlıkları (<h1>) şekillendiriyoruz .
Daha sonra küme parantezimiz gelir { }. Bunların içinde, özellik ve değer çiftleri veya daha fazla bildirim bulunur. Her bir çift, seçtiğimiz eleman(lar)ın bir özelliğini, ardından o özelliğe vermek istediğimiz bir değeri belirtir.
İki nokta üst üste işaretinden önce özelliğimiz ve iki nokta üst üste işaretinden sonra değerimiz bulunur. CSS özellikleri, hangi özelliğin belirtildiğine bağlı olarak farklı değerlere sahiptir. Örneğimizde color ile çeşitli renk değerleri alabilen bir özelliğimiz var. Ayrıca font-size özelliğimiz de bulunuyor. Bu özellik, çeşitli boyut birimlerini değer olarak alabilir.
Bir CSS stil sayfası, birbiri ardına yazılan bu tür birçok kural içerecektir.
h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}Bazı değerleri çabucak öğrendiğinizi göreceksiniz, bazılarını ise araştırmanız gerekecek.
Not: MDN CSS referansında listelenen tüm CSS özellik sayfalarına (diğer CSS özellikleriyle birlikte) bağlantılar bulabilirsiniz. Alternatif olarak, bir CSS özelliği hakkında daha fazla bilgi bulmanız gerektiğinde favori arama motorunuzda “mdn css-özellik-adı ” ile arama yapabilirsiniz. Örneğin, “mdn color” ve “mdn font-size” kelimelerini aramayı deneyin.
CSS Kılavuzları
CSS kullanarak stil oluşturabileceğiniz pek çok şey olduğundan, dil kılavuzlara ayrılmıştır. Yazılarımızda bu kılavuzlara referanslar göreceksiniz.
Bu aşamada, CSS’nin nasıl yapılandırıldığı konusunda çok fazla endişelenmenize gerek yok.
CSS Spesifikasyonları
Tüm web standartları teknolojileri (HTML, CSS, JavaScript, vb.), standart kuruluşları ( W3C , WHATWG , ECMA veya Khronos gibi ) tarafından yayınlanan ve spesifikasyonlar (veya “specs”) adı verilen dev belgelerde tanımlanır. Bu teknolojilerin nasıl davranması gerektiği bu şekilde belirlenir.
CSS de bu anlamda farklı değildir – W3C içinde bir grup tarafından geliştirilmiştir: CSS Çalışma Grubu. Bu grup, tarayıcı geliştiricilerinin ve CSS ile ilgilenen diğer şirketlerin temsilcilerinden oluşur. Davetli uzmanlar olarak bilinen ve bağımsız sesler olarak hareket eden başka insanlar da bulunur; bu üyeler bir kuruluşla bağlantılı değillerdir.
Yeni CSS özellikleri, CSS Çalışma Grubu tarafından geliştirilir veya belirlenir. Bazen belirli bir tarayıcı belirli bir yeteneğe sahip olmakla ilgilendiğinde, bazen web tasarımcıları ve geliştiricileri bir özellik istediğinde ve bazen de Çalışma Grubunun kendisi bir gereksinim belirlediğinde uygulanan yöntem budur. Dolayısıyla CSS sürekli gelişir ve yeni özellikler kullanıma sunulur. Bununla birlikte, CSS ile ilgili önemli bir şey de, herkesin eski web sitelerini bozacak şekilde bir şeyleri değiştirmemek için çok çalışmasıdır. 2000 yılında hazırlanan bir web sitesi bugün hala kullanılabilir olmalıdır!
CSS’ye yeni başlayan biri olarak, muhtemelen CSS spesifikasyonlarını bunaltıcı bulacaksınız – specs sayfaları web geliştiricilerinin CSS’yi anlamak için okuması amacıyla değil, kullanıcı aracılarındaki özelliklere destek uygulamak için mühendislerin kullanması amacıyla tasarlanmıştır. Birçok deneyimli geliştirici ise buradaki kılavuzlara veya diğer öğreticilere başvurmayı tercih eder.
Tarayıcı destek bilgileri
CSS spesifikasyonu bir kez belirlendikten sonra, yalnızca bir veya daha fazla tarayıcı tarafından uygulanmışsa, web sayfalarını geliştirmede bizim için yararlıdır. Bu, kodun, CSS dosyamızdaki talimatı ekrana yazdırılabilecek bir şeye dönüştürmek için yazıldığı anlamına gelir. Bu sürece daha çok CSS Nasıl Çalışır dersimizde bakacağız. Tüm tarayıcıların aynı anda bir özelliği uygulaması alışılmadık bir durumdur ve bu nedenle genellikle CSS’nin bir bölümünü bazı tarayıcılarda kullanabileceğiniz, diğerlerinde ise kullanamayacağınız bölümleri vardır. Bu nedenle, uygulama durumunu kontrol edebilmek faydalıdır.
Sırada ne var?
Artık CSS’nin ne olduğunu biraz anladığınıza göre, kendi kendinize biraz CSS yazmaya başlayabileceğiniz CSS’e Başlarken bölümüne geçelim.