Web sitesi tasarımı söz konusu olduğunda akla gelen ilk ilk sorular şunlardır: HTML ve CSS nedir? CSS yardımı ile neler yapılabilir? CSS’in kullanım alanları ve özellikleri nelerdir?

HTML sayfaları kendi başlarına güzel değildir, ancak web sitesi tasarımı için var olan yönergeleri ve farklı dilleri kullanarak dinamik bir web sayfası oluşturabilir ve sayfa formatını değiştirebilirsiniz. Bu dillerden biri de sitenize güzel efektler verebilen CSS’dir.

CSS Nedir?

CSS (Cascading Style Sheets), web içeriğine stil veren koddur. HTML gibi, CSS de bir programlama dili değildir. Bir biçimlendirme dili de değildir. CSS bir stil sayfası dilidir. CSS, HTML öğelerini seçerek stillendirmek için kullandığınız şeydir.

CSS, HTML veya XHTML ile yazılmış web sitesi sayfalarını tasarlamak için en yaygın ve popüler araçlardan biridir ve plain XML, SVG ve XUL gibi diğer betik dillerini de destekler.

CSS, farklı cihazlar ve ekran boyutları için tasarım, düzen ve ekran varyasyonları dahil olmak üzere web sayfalarınızın stillerini tanımlamak için kullanılır.CSS kullanarak kodlamada sitenin rengini, yazı tipini, arka plan resimlerini vb. stilini istediğiniz gibi değiştirebilirsiniz.

CSS’nin amacı nedir?

CSS’nin amacı aslında içerik bilgilerini (HTML gibi bir dille yazılmış bilgileri) sayfa düzeni, renk, boyut ve yazı tipi türü gibi görünüm bilgilerinden ayırmaktır. Bu ayrım, siteye erişim hızını artırırve görünüm özelliklerini kontrol etmek için daha fazla esnekliğin yanı sıra aynı formatta birkaç sayfa tasarlama becerisini artırır ve web sitesi tasarımında karmaşıklığı ve tekrarlayan görevleri önler.

CSS’nin kullanımlarından bazıları şunlardır:

• Yüksekliği ve genişliği belirlemek
• Duyarlı web sitesi tasarımı
• arka planı seçmek
• Metin veya fotoğraf gibi bir öğenin konumunu seçmek
• Yazıların dizilişinin belirlenmesi (sağa dayalı, sola dayalı vb.)
• Elemanlar arasındaki mesafenin belirlenmesi
• Yazı tipinde değişiklik (yazı tipi, renk vb.)

Neden CSS Kullanmalı? CSS’nin Avantajları

Bunlar, CSS’nin üç ana avantajıdır:

1) Büyük bir soruna çözüm oldu

CSS’den önce yazı tipi, renk, arka plan stili, öğe hizalamaları, kenarlık ve boyut gibi etiketlerin her web sayfasında tekrarlanması gerekiyordu. Bu çok uzun bir süreçti. Örneğin: Her sayfada yazı tipi ve renk bilgilerinin eklendiği büyük bir web sitesi geliştiriyorsanız, bu uzun ve pahalı bir süreç olacaktır. Bu sorunu çözmek için CSS oluşturuldu.

2) Zaman kazandırır

CSS stili tanımları harici CSS dosyalarına kaydedilir, böylece yalnızca bir dosyayı değiştirerek tüm web sitesini değiştirmek mümkündür.

3) Daha fazla özellik sağlar

CSS, web sitesinin görünümünü ve hissini tanımlamak için düz HTML’den daha ayrıntılı özellikler sağlar.

CSS kodlarının yapısı

Bir CSS kodunun yapısı iki bölümden oluşur:

Seçici (Selector)

Html’nin bir bölümüne belirli bir stil vermek istiyorsanız, üzerine CSS kodları uygulayabilmeniz için bir etiket seçmelisiniz. Seçilen öğe bir paragraf, resim veya başlık olabilir. CSS seçicileri birkaç kategoriye ayrılır:

Eleman Seçici

Bu seçiciyi kullanarak belirli bir etiketi seçebilir ve ona stil değişiklikleri uygulayabilirsiniz, örneğin bir web sayfasındaki <p> ​​etiketini seçip rengini kırmızıya çevirebilirsiniz.

kimlik seçici

CSS stillerinin bir etiket grubu üzerinde tanımlanmasını istiyorsanız, kimlik seçiciyi kullanmalısınız. Bunun için stilini değiştirmek istediğiniz etiketin HTML kodlarında bir ID tanımlamanız, ardından CSS bölümünde istediğiniz ID’yi seçip değişiklikleri ona uygulamanız gerekiyor.

Komutlar yalnızca başında # işaretiyle işaretlenmiş belirli bir kimliğe uygulanır.

Sınıf seçici

Bunun için bir sınıf içinde aynı görünüme sahip olmasını istediğiniz tüm etiketleri tanımlamalı ve ID gibi CSS bölümüne gitmeli ve o sınıf üzerinde istediğiniz stili tanımlamalısınız. Class özniteliğinin başlangıcında “ . “  ile tanınabileceğini unutmayın.

beyan bloğu (Declaration)

{…} arasına yerleştirilen bu bölümü kullanarak, seçilen etiketlere hangi stilin uygulanacağını belirleyebilirsiniz. Bu bölüm, seçilen öğenin hangi nitelik ve değere sahip olduğunu belirtmeniz gereken “öznitelik” ve “değer” olmak üzere iki kısımdan oluşur. Örneğin, h1 etiketinin mavi olması veya yazı tipi boyutunun 14 piksel olması gerektiğini belirtin.

Stil sayfası (stylesheet) nedir?

Stil sayfası, tarayıcıya bir HTML etiketini nasıl görüntüleyeceğini söyleyen bir dizi CSS kuralı ve kodudur.

CSS dosyası nedir?

CSS, Bir CSS dosyası oluşturarak , istediğiniz sayfayı monitörde görüntüleme modu, yazdırma sırasında görüntüleme modu, ses tanıma modu sırasında (ses tanıma tabanlı tarayıcılar için) ve tarayıcı sayfalarında görüntüleme gibi birkaç farklı oluşturma modunda görüntülemenizi sağlar.

HTML’ye CSS ekleyin

CSS dosyasının HTML dosyasına bağlanması aşağıdaki üç şekilde yapılır:

Harici CSS

CSS kullanmanın en yaygın yöntemi olan External CSS yöntemini kullanarak, önceden oluşturulmuş bir dosyayı değiştirerek bir sitenin görünümünü değiştirebilirsiniz. Harici yöntemdeki CSS kodlarının konumu öyledir ki, CSS kodlarını ayrı ayrı bir not defteri dosyasına yazmanız ve CSS uzantısıyla kaydetmeniz gerekir. Şimdi bu dosyayı html komutları ile ana dosyaya bağlamanız gerekiyor. Bunun için daha önce oluşturduğunuz dosyayı <head> bölümündeki <link> etiketi içerisinde tanıtabilirsiniz.

Dahili CSS

Dahili CSS, sitenin bir sayfasının belirli bir stile sahip olması gerektiğinde kullanılır. Bunun için <style> etiketi içindeki <head> bölümünde gerekli değişiklikleri uygularsınız.

Satır içi CSS

Belirli bir etikete stil uygulamak istediğinizde Inline CSS yöntemi kullanılır. Bu yöntemde, doğrudan değişiklikler aynı etikete uygulanır ve harici etiketleri etkilemez.

CSS dilinde sözdizimi (Syntax) nedir?

CSS dili, sayfa özelliklerini tasarlamak ve ayarlamak için kolay İngilizce anahtar kelimeler kullanan basit bir sözdizimine sahiptir. Stil sayfası (Style Sheet) bir kurallar (Rule) listesinden oluşur. Her kural bir veya daha fazla seçiciden (Selector) veya bildirim bloğundan (Declaration block) oluşur. Her bildirim bloğu, diğer değişken bildirim bloklarının bir listesinden oluşur.

Her değişken bildirimi bir klon (:) ve bir değer içerir. Ayrıca, bir satırda birkaç değişken bildirilecekse, her değişken noktalı virgülle (;) ayrılır.

CSS türleri

CSS türleri şunlardır:

CSS 1 dili

W3C standartları kuruluşu tarafından onaylanan CSS’nin ilk versiyonu Aralık 1996’da yayınlandı. CSS’nin bu sürümü aşağıdaki özellikleri destekledi:

• Fontface ve Vurgu gibi font özelliklerini ayarlayabilme.
• Metinlerin rengini değiştirme, görüntü veya arka plan rengini ve diğer görünüm özelliklerini belirleme imkanı.
• Sözcükler, harfler ve satırlar arasındaki boşlukları ayarlamak gibi metinlerin diğer özelliklerini değiştirebilme.
• Metinleri, resimleri ve tabloları hizalama.
• Kenarlıklar, çerçeveler ve katmanlama sayfaları ekleme yeteneği.
• Web sitesi özelliklerini ve tesislerini kategorize etme ve işaretleme yeteneği.

WC3’ün artık CSS 1’i önermediğini unutmayın.

CSS 2 dili

CSS’nin ikinci versiyonu da Mayıs 1998’de yayınlandı ve kullanıcılara sunuldu. CSS’nin bu sürümü, önceki sürüme kıyasla ek özelliklere sahipti. Bu özelliklerden bazıları şunlardır:

• Nesnelerin konumunu sabit, değişken veya diğer nesnelere bağlı olarak ayarlama yeteneği
• z-endeksi özelliği
• Multimedya dosyaları kavramı
• İşitsel tasarım destek sayfaları
• Metni düz bir çizgide ayarlama imkanı
• Gönderilere gölge gibi yeni özellikler eklemek.

CSS dilinin bu sürümü artık W3C tarafından önerilmemektedir.

CSS 2.1 dili

CSS 2.1 versiyonu yayınlandı ve çok sayıda CSS 2 problemini çözdüğü için kullanıcıların hizmetine sunuldu. CSS’nin bu sürümü, daha yeni sürümlerin yayınlanmasına rağmen, W3C tarafından web tasarım standartlarından biri olarak onaylanmakta ve önerilmektedir.

CSS3 dili

CSS 3 sürümü, tüm tanımların ve özelliklerin kullanıcı tarafından bir yazılım biçiminde kullanıldığı önceki sürümlerden farklı olarak modüler bir yapıya sahiptir. Her modül, yazılıma özel özellikler ekler. CSS’nin bu sürümü Haziran 1999’da yayınlandı.

Modüler bir yapının oluşturulması ile yazılıma farklı modüller ile çeşitli özellikler eklenebilmektedir. En son haberlere göre, Kasım 2011’de CSS tasarım ekibi tarafından 50’den fazla farklı özellikte modül kullanıcılara sunuldu.

Bazı modüller, arka plan olarak özel görseller ekleme, medya bilgilerini hesaplama ve web sitesi düzeninde çok sütunlu formlar ekleme gibi özelliklere sahiptir.

CSS 4 dili

WC3, Eylül 2009’da CSS dilinin dördüncü sürümünü tasarlamaya ve tamamlamaya başladı, ancak popüler tarayıcıların hiçbiri henüz tüm özelliklerini desteklemese de, CSS dilinin bu sürümünün gelecekte en yaygın olanlardan biri olacağı tahmin ediliyor.

CSS için tarayıcı desteği ne anlama geliyor?

Tüm tarayıcılar CSS kodlarını iyi ayrıştıramaz, bu nedenle belirli tarayıcıları filtrelemek için CSS HACK adlı özel bir kodlama tekniği oluşturulmuştur. Bu teknik, CSS kodlarının belirli bölümlerinin, onu tam olarak desteklemeyen tarayıcılarda görüntülenmesini engeller.

Daha profesyonel web sitesi tasarımcılarından bazıları, web sitelerinin herhangi bir tarayıcıda tam olarak görüntülenebilmesi için CSS Filter Hack de dahil olmak üzere CSS programlama dilinin farklı sürümlerini kullanır. İlk tarayıcıların çoğu CSS kodlarını çok yavaş ve çok düşük kalitede görüntülediğinden, hemen hemen tüm web sitesi tasarımcıları, ilgili tarayıcının kendisini düzgün şekilde desteklemeyen kodları yok sayması için CSS Filtreleri kullanmak zorundaıdılar.

Ünlü Internet Explorer tarayıcısı, 3. sürümünden itibaren CSS’yi desteklemeye başladı ve her sürümde desteğini daha eksiksiz hale getirdi. 2008 yılında, Internet Explorer 8’in deneysel sürümü, tüm standartlarına uygun olarak CSS 2.1’i desteklediğini duyurdu.

Bugün, çoğu tarayıcı css dilini tam olarak desteklediğini duyurmuş olsa da, web sitesi tasarımcıları hala CSS tasarımında sorunlarla karşılaşmaktadır. Birden çok tarayıcıya uygun web siteleri tasarlanırken (Cross-browser) yeni sürümlerin çıkmasıyla birlikte bu sorunlar daha da karmaşık hale geldi.

CSS dilinin bazı sınırlamaları nelerdir?

CSS dilinin bazı sınırlamaları şunlardır:

Esnek sayfalandırmanın zayıf kontrolü

CSS 3’ün yeni sürümü sayfalandırma, yazı tipleri, renkler, kenarlıklar ve diğer özellikler için yeni özellikler sağlamış olsa da, yine de bloklar, kenarlıklar, form boyutları ve yerleştirme gibi web sayfalarının tasarlanması alanında sınırlamalar vardır. Bu sınırlamalar, dinamik web sitesi sayfaları tasarlamak için bizi manuel olarak CSS dilinde kodlamaya zorladı.

ana seçenekleri seçme seçeneğini içermemesi

Ne yazık ki, CSS’de belirli bir öğeyle ilgili daha üst seçenekler veya ebeveynleri(Parent)seçmek mümkün değildir. Elbette Xpath gibi daha gelişmiş seçiciler kullanarak sayfa tasarımında daha gelişmiş özellikler kullanabilirsiniz. Ancak CSS dilinin ana seçenekleri seçme seçeneğini içermemesinin ana nedeni, sayfaları farklı tarayıcılarda görüntüleme verimliliğini artırmaktır.

Dikey formları kontrol etmedeki sınırlamalar

Yatay elemanların kontrolü ve yerleşimi kolaylıkla mümkünken, dikey elemanların yönetimi örneğin formun ortasına bir eleman yerleştirmek gibi basit bir işlem son derece karmaşık ve zaman alıcıdır.

CSS dilinde gerekli açıklamaların olmaması

Şu anda, CSS dilinde mevcut olan yeteneklerin sınırlamaları hakkında kısa bile olsa hiçbir açıklama yoktur. Aşağıdaki gibi açıklamalar: Sol kenar boşluğu: 10-3em + 4px. Bu tür açıklamalar, kullanıcının web sitesindeki sütunların ve satırların boyutunu hesaplamak istediği gibi çeşitli durumlarda kullanıcıya yardımcı olur. Microsoft’un tarayıcısı İnternet Explorer, 5’ten 7’ye kadar olan sürümlerinde bu konuyla ilgili kısa açıklamalara yer vermiş ancak bu tarayıcının 8 sürümünde söz konusu açıklamalar ondan kaldırılmış ve şirket güvenlik nedeniyle kaldırma gerekçesini belirtmişti.

Sütun yapımında problemler

Birden çok ve karmaşık sütunlarla web sitesi sayfalandırması için Sütun sayısı modülü de dahil olmak üzere CSS 3’teki birçok özelliğe rağmen, bazen bu sütunların farklı tarayıcı sürümlerinde veya farklı boyutlardaki monitörlerde görüntülenmesi sorunludur.

Son Söz

Bu yazımızda CSS hakkında konuştuk ve CSS’in en önemli kullanım alanlarının neler olduğunu ve bize ne gibi avantajlar sağladığını gördük. Ancak bir web sitesi tasarlamak için yalnızca CSS öğrenmenin yeterli olmadığını, HTML ve JavaScript öğrenmeniz gerektiğini de unutmayın. Proje tabanlı öğreticiler ve alıştırmalar kullanırsanız, öğrenme süreniz kesinlikle çok kısalacak ve birkaç hafta sonra kodlarınızda CSS özelliklerini kullanabileceksiniz.

Sıkça Sorulan Sorular

CSS ne anlama geliyor?

CSS (Cascading Style Sheets), “Basamaklı Stil Sayfaları”nın kısaltmasıdır. CSS, web sayfalarını (HTML veya XML) düzenlemek ve yapılandırmak için kullanılan bir bilgisayar dilidir.

CSS’de webkit nedir?

WebKit, web tarayıcılarının web sayfalarını işlemesine izin veren bir tasarım motorudur. Webkit, Apple’ın Safari tarayıcısında ve Chrome’da kullanılan html/css oluşturma motorudur.

SCSS nedir?

SCSS, CSS’nin söz dizimi uzantısıdır. Bu, herhangi bir geçerli CSS stil sayfasının aynı anlama sahip geçerli bir SCSS dosyası olduğu anlamına gelir. Ayrıca SCSS, eski IE filtresi gibi çoğu CSS korsanlığını ve satıcıya özgü sözdizimini anlar.