CSS Nedir?

CSS(Basamaklı Stil Sayfaları) harika görünen web sayfaları oluşturmanıza olanak tanır, ancak arka planda nasıl çalışır? Bu makale, basit bir sözdizimi örneğiyle CSS'in ne olduğunu açıklar ve ayrıca dil hakkında ki bazı temel terimleri ele alır.

Ön Koşullar: Gerekli yazılımların kurulumu dersinde ayrıntılı olarak açıklandığı gibi, gerekli yazılımların kurulu olduğu bir sistem; Dosyalarla çalışma dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceği hakkında bilgi, HTML'ye Giriş  konusunda anlatıldığı gibi temel HTML hakkında bilgi sahibi olmalısınız.
Amaç: CSS'in ne olduğunu öğrenmek

HTML'ye Giriş kısmında HTML'nin ne olduğu ve belgeleri oluşturmak için nasıl kullanıldığını ele aldık. Oluşturulan bu belgeler bir web tarayacısından okunabilir olacaktır. Başlıklar normal metinden daha büyük görünecek, parafraflar yeni bir satıra bölünecek ve aralarında boşluk olacaktır. Bağlantılar, onları diğer metinlerden ayırmak için renkli ve altı çizilmiş olacaktır. Sayfa üzerinde ki gördüğünüz farklılıklar,  sayfanın yazarı tarafından açık bir stil belirtilmemiş olsa bile sayfanın okunabilir olması için HTML'ye tarayıcının uyguladığı varsayılan stillerdir.

The default styles used by a browser

Ancak, tüm web siteleri böyle görünseydi web gerçekten 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 sayfanızı oluşturabilirisiniz.

Tarayıcının varsayılan stilleri hakkında daha fazla bilgi için aşağıdaki videoyu izleyin.

CSS ne içindir?

Daha öncede bahsettiğimiz gibi, CSS belgelerin kullanıcılara nasıl sunulacağını, nasıl biçimlendirileceğini, nasıl yerleştirileceklerini vb. gibi şeyleri belirleyen bir dildir.

Bir belge genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. — HTML en yaygın biçimlendirme dilidir, ancak SVG veya XML gibi başka biçimlendirme dilleriyle de karşılaşabilirsiniz.

Bir dökümanı bir kullanıcıya sunmak, onu ziyaretçinin anlayabileceği bir forma dönüştürmek anlamana gelir. Tarayıcılar, sevdiğim Firefox, Chrome veya Edge, belgeleri bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak için tasarlanmıştır.

Note: Tarayıcıya bazen kullanıcı aracı denir ve bu temelde bir bilgisayar sistemi içerisindeki 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ı arayüzüdür, fakat sadece bunlar değildir. Kullanılabilir başka kullanıcı aracıları da vardır - HTML ve CSS belgelerini yazdırılabilen PDF'lere dönüştüren programlar gibi.

CSS, en basit şekilde belge metninin şekillendirimesi için kullanılabilir — örn; başlıkların ve bağlantıların rengi ve boyutunu değiştirmek ve düzen oluşturmak için de kullanılabilinir — örn; tek bir metin sütununu bir düzene dönüştürmekAnimasyon gibi efektler için bile kullanılabilir. Belirli örnekler için bu paragraftaki bağlantılara bir göz atın.

CSS sözdizimi

CSS kural tabanlı bir dildir — web sayfanızdaki belirli öğelere veya öğe gruplarına uygulanmasını istediğiniz stilleri belirleyen kurallar tanımlarsınız. Örn; "Sayfamdaki ana başlığın büyük ve kırmızı bir metin olarak gösterilmesini istiyorum".

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 öğe seçici ile başlar. Bu, biçimlendireceğimiz HTML öğesini seçer. Bu başlangıç ile birinci seviye başlıkların stilini belirleyeceğimizi <h1> belirtiyoruz.

Daha sonra bir dizi süslü parantezimiz { }var. Bunların içinde, nitelik ve değer  çifti biçimini alan bir veya daha fazla beyan olacaktır. Her bir çift, seçtiğimiz öğelerin bir niteliğini ve ardından niteliğe vermek istediğimiz bir değeri belirtir.

İlk önce niteliğimiz ve niteliğe atayacağımız değerimiz var. CSS niteliğinin kendisine bağlı olarak, atayabileceğiniz farklı değerlere sahip olabilir. Örneğimizde, çeşitli renk değeri alabilen color niteliğine sahibiz. Ayrıca font-size niteliğinede sahibiz. Bu nitelik, çeşitli boyut birimlerini değer olarak alabilir. Fakat color niteliğine biri uzunluk birimi atamanıza izin verilmez.

Bir CSS stil sayfası, birbiri ardına yazılmış birçok kuralı içerecektir.

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

Bazı değerleri hızlı bir şekilde öğrendiğinizi, bazılarını ise araştırmanız gerektiğini göreceksiniz. MDN'deki nitelik referans sayfaları, unuttuğunuzda veya bir değer olarak başka neleri kullanabileceğinizi bilmek istediğinizde, nitelikler ve değerleri hakkında bulabileceğiniz kapsamlı bilgiler sunar.

Not: MDN CSS referans'da listelenen tüm CSS niteliklerinin açıklama sayfalarına bağlantılar bulabilirsiniz. Alternatif olarak, bir CSS niteliği hakkında daha fazla bilgi edinmeniz gerektiğinde, favori arama motorunuzda "mdn css-feature-name" diye aramaya alışmalısınız. Örn; "mdn color" ve "mdn font-size"!

CSS modülleri

CSS kullanarak stil verebilceğiniz pek çok şey olduğundan, dil modüllere bölünmüştür. MDN'yi keşfederken bu modüllere atıfta bulunacağımızı göreceksiniz ve belge sayfalarının çoğu belirli bir modül için düzenlenmiştir. Örn; ne için kullanıldığı ve alabileceği farklı nitelikleri görebilmek için Arka Palanlar ve Kenarlıklar modüllerine MDN refaransından bakabilirsiniz. Ayrıca, teknolojiyi tanımlayan CSS Spesifikasyonuna bağlantılar da bulacaksınız (aşağıya bakınız).

Bu aşamada CSS'in nasıl yapılandırıldığı konusunda çok fazla endişelenmenize gerek yok, ayrıca bir niteleğin diğer öğelerde de kullanılabildiğinin farkındaysanız bu aradığınız bilgiye ulaşmanızı kolaylaştırabilir, bir öğe için öğrendiğiniz nitelik bigileri, kullanılabildiği diğer öğe içinde aynı kural düzenine sahiptir.

Kesin bir örnek vermek gerekirse, Arka Planlar ve Kenarlıklar modülüne geri dönelim — bu modülde tanımlacak background-color ve border-color nitelik değerlerinin aynı değerleri alabileceğini düşünebilirsiniz. Haklısınızda!

CSS özellikleri

Tüm web teknolojileri (HTML, CSS, JavaScript, vb.), Standardizasyon konsorsiyumları (W3C, WHATWG, ECMA veya Khronos gibi) tarafından yayınlanan standartlar adı verilen dev dokümanlarda tanımlanır.

CSS'de farklı değildir — W3C içindeki CSS Working Group adı verilen bir grup tarafından geliştirilmiştir. Bu grup; tarayıcı sağlayıcılarının, CSS ile ilgilenen diğer şirketlerin temsilcileri ve bağımsız olarak hareket eden, davetli uzmanlar olarak bilinen ve üye bir kuruluşa bağlı olmayan kişilerden oluşmaktadır.

Yeni bir CSS özelliği, CSS Working Group tarafından belirlenir veya geliştirilir. Bu yenilik için bir tarayıcı bir yeteğene sahip olmak istemiş olabilir, web tasaraımcıları ve geliştiricileri bir nitelik isteğinde bulunmuş olabilirler veya çalışma grubunun kendisi bir gereksinim olduğunu düşünmüş olabilir. Bunlar gibi durumlarda organizasyondan yeni CSS niteliği için çalışma başlatır ve yeni niteliğin eski web sitelerini bozacak bir şekilde tanımlama yapılmaması için grub çok çalışmaktadır. 2000 yılında yayınlanan ve o zamanki sınırlı CSS niteliklerini kullanan bir web sayfası bugün hala kullanılabiliyor olması gerekir.

CSS'e yeni başlayan biri olarak, CSS niteliklerini ezici bulmanız olasıdır. Bir çok deneyimli geliştirici, MDN belgelerine veya diğer eğitimlere başvurmayı tercih eder. Bu sayede, her zaman bir kaynak bulabileceğinizi bildiğinizde, kullandığınız CSS'i, tarayıcı desteğini(aşağıya bakın) ve nitelikler arasındaki ilişkiyi anlamak için zaman harcamaya değer.

Tarayıcı desteği

CSS belirlendikten sonra, sadece bir veya daha fazla tarayıcı tarafından desteklenmiş ise web sayfalarının geliştirilmesinde kullanılabilir. Bu, CSS dosyamızdaki talimatın ekrana çıktısı alınabilecek bir kurala dönüştürmek için desteklendiği anlamına gelir. CSS Nasıl Çalışır dersinde bu sürece daha fazla bakacağız. Tüm tarayıcıların bir niteliği aynı anda uygulaması alışılmadık bir durumdur ve bu nedenle genellikle bazı tarayıcılarda CSS'in bir kısmını kullanıp, bir kısmını da kullanamayacağız. Bu nedenle, tarayıcıların CSS'in hangi niteliklerini desteklediğini kontrol etmek faydalıdır. MDN'deki her nitelik sayfasında, ilgilendiğimiz niteliğin desteklenme durumunu görebilir ve onun her tarayıcıda çalışıp çalışmayacağını anlayabiliriz.

Aşağıda, CSS  font-family niteliği için destek tablosu yer almaktadır.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-familyChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Not supported on option elements. See bug 1536148.
IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
system-uiChrome Full support 56Edge Full support 79Firefox No support No
No support No
Full support 43
Notes Alternate Name
Notes Supported on macOS only.
Alternate Name Uses the non-standard name: -apple-system
IE No support NoOpera Full support 43Safari Full support 9
Notes Alternate Name
Full support 9
Notes Alternate Name
Notes Supported since macOS 10.11.
Alternate Name Uses the non-standard name: -apple-system
WebView Android Full support 56Chrome Android Full support 56Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 9
Alternate Name
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: -apple-system
Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

Sırada ne var?

Artık CSS'in ne olduğunu biraz anladığınıza göre, CSS'i kendiniz yazmaya başlabileceğiniz CSS ile Başlarken bölümüne geçebiliriz.

Bu kısımda

  1. CSS nedir?
  2. CSS'ye başlarken
  3. CSS nasıl yapılandırılır
  4. CSS nasıl çalışır
  5. Öğrendiklerimizi uygulamak