Altın Konu CSS Nedir? (Ve Neden Önemlidir)

KERİM ERBAY · 24 Kas 2023

CSS, web geliştirme için önemli olan programlamada kural tabanlı bir sözdizimidir. CSS bilen web geliştiricileri işletmeler için yüksek talep görmektedir. Aslında Çalışma İstatistikleri Bürosu'na göre web geliştirmenin önümüzdeki on yılda ortalama mesleklerden çok daha hızlı büyümesi beklenen bir meslek olduğu belirtiliyor. Bu yazımızda CSS'nin ne olduğunu ve CSS'nin faydalarını bir örnekle açıklayıp, CSS hakkında sık sorulan soruları yanıtlıyorum.

CSS nedir?

CSS, kelimenin tam anlamıyla basamaklı stil sayfaları anlamına gelir ve web siteleri ve web uygulamaları oluşturmak için stilistik sözdizimi sunmak üzere tasarlanmış bir programlama dilini temsil eder.

CSS'den bahsederken HTML'den de bahsetmelisiniz. HTML, birçok web belgesi, web sitesi ve web uygulaması oluşturmak için kullanılan kodlama dilidir. HTML, yapı gibi şeyleri kendi başına belirler. Örneğin HTML, bir gezinme çubuğunun yerleşimini ve kullanıcının gezinme çubuğunda seçebileceği seçenekleri belirleyebilir.

Buna karşılık CSS, bir web sitesinin renkler, sayfa düzenleri ve yazı tipleri gibi stilistik özelliklerini belirler. Yani HTML işlevsel çerçevenizi sağlar, CSS ise tasarım ve estetik unsurları sağlar. Ancak CSS, stil öğeleri ekleme işlevini gerçekleştirmek için HTML ile etkileşime girer.

HTML kullandığınızı ve bir paragraf oluşturmak istediğinizi düşünün. Paragrafın gövdesi çevresinde açık ve kapalı paragraf etiketi kullanırsınız. Bir paragraf etiketi, ortasında p harfi bulunan, birbirine dışarı doğru bakan büyük ve küçük işaretine benzer:

< = HTML'de paragraf etiketini aç
> = HTML'de kapalı paragraf etiketi
= tamamlanmış etiket

Artık CSS devreye giriyor. Açık paragraf etiketinden önce, paragrafın izleyiciye görünmesini istediğiniz rengi ve diğer yazı tipi stili seçeneklerini belirlemek için CSS'yi kullanabilirsiniz. Bu örnekte paragrafın turuncu görünmesini istediğinizi söyleyeceğiz. Paragrafın turuncu görünmesini sağlayan kodu oluşturmak için CSS paragraf etiketi, küme parantezleri ve komutunuzu içeren CSS söz dizimini kullanın.

CSS'de paragraf etiketi, ek semboller ve noktalama işaretleri olmadan basitçe 'P' harfiyle temsil edilir. CSS yapısının tamamı şu şekilde görünür:

P { renk:turuncu }

Bu koda noktalı virgülle ayırarak ek stilistik öğeler ekleyebilirsiniz. Bir paragrafta, yazı tipi türünü, boyutunu veya kalın yazı tipiyle mi yoksa başka bir biçimlendirmeyle mi vurgulandığını belirlemek için kodu kullanabilirsiniz.

CSS örneği

CSS'nin HTML ile nasıl göründüğüne dair bir örnek:

< !DOCTYPE html > < html >

< stil > gövde {background-color

embe; text-align:left;} h1 {renk:kırmızı; yazı tipi boyutu:55x; } p {yazı tipi ailesi:arial; yazı tipi boyutu:35px;} < /stil >

< vücut >

< h1 > Başlık < /h1 > < p > Paragraf < /p > < /body >

< /html >

CSS'nin Faydaları

CSS, HTML web sitelerini stilize etmeye yönelik endüstri standardıdır. Bu durum uzun yıllardır değişmeden kaldı. Ancak bazı geliştiriciler web sitelerini stilize etmek için hâlâ yalnızca HTML'ye güvenebilirler. Bu çok daha karmaşık bir yaklaşımdır çünkü bir web sitesini HTML ile manuel olarak modülerleştirmeniz gerekirken CSS bunu sizin için yapar. HTML metodolojinizi basamaklı stil sayfalarını içerecek şekilde dönüştürmenize yardımcı olabilecek CSS'nin bazı faydaları şunlardır:

SEO

Birçok işletme ve birey için organik arama motoru optimizasyonunu (SEO) kullanmak, insanları içerikle buluşturmanın önemli bir yoludur. Stilize etmek için CSS kullanmak size kolay bir SEO desteği sağlar. Siteniz daha verimli çalıştığında Google sizi daha üst sıralara çıkarır.

Yalın kod

CSS kodu hafiftir ve hantal değildir. Hacimli HTML, web sayfası indirme sürelerini yavaşlatabilir.

Çeşitli biçimlendirme seçenekleri

CSS'de çok sayıda biçimlendirme seçeneği vardır; bu seçenekler yalnızca HTML'de mevcut olanlardan daha fazladır.

Tasarım tutarlılığı

Kullanıcı deneyiminin yönlendirdiği dijital çağda tasarım tutarlılığı önemlidir. CSS, geliştiricilere tasarım öğeleri ve bunların kullanıcılara nasıl göründükleri üzerinde daha fazla kontrol sağlar.

Bakım kolaylığı

CSS'nin bakımı, kullanımı ve izlenmesi HTML'den daha kolaydır; bu da onu bir web belgesini stilize etmenin daha etkili bir yolu haline getirir.

Dinamik stile izin verir

Geliştiriciler CSS'yi kimin görüntülediğine göre değişecek şekilde programlayabilir.

Daha fazla erişilebilirlik

Öğrenmesi daha kolay olduğundan CSS, temel teknik becerilere sahip hemen hemen herkes tarafından kullanılabilir.

CSS kullanmanın HTML'ye göre geliştiricilerin yararlandığı çeşitli avantajları vardır. CSS istisna değil standart olduğundan, alana giren geliştiricilerin CSS hakkında bilgi sahibi olması beklenecektir.

Sıkça Sorulan Sorular

CSS'deki modüller nelerdir?

Bir programlama dili olarak CSS modüllere ayrılmıştır. Modülerleştirilmiş bir dil, belirli bir özelliği çevreleyen verileri ve kodu, açılabilen, okunabilen veya düzenlenebilen bir modülde birleştirir. Arka planlar ve kenarlıklar gibi şeyler için modüller mevcuttur.
CSS harici mi, dahili mi yoksa satır içi mi?

CSS, harici, dahili veya satır içi kodlu stil sayfalarına uygulanabilir:

Harici CSS: Harici CSS, bir kelime işlemcide oluşturulur ve .css formatında kaydedilir. Bu dosyalar bir sitenin tamamının tasarımını kodlamak için kullanılabilir. HTML web sitenizin kodunda stil sayfasına bağlantı veren bir başlık bölümünün olması gerekir.
Dahili CSS: Bir CSS kodunun doğrudan bir HTML web sayfasının başlığına bir CMS düzenleyicide veya elle kodlanarak yazılması, dahili CSS kodu olarak kabul edilir.
Satır İçi CSS: Bir CSS kodunun doğrudan tanımladığı HTML kodu satırına yazılması durumunda buna Satır İçi CSS denir.

CSS'de tarayıcı varsayılanı nasıldır?

Bazı tarayıcılar, tarayıcıya bağlı olarak, tarayıcı başlatıldığında önceden biçimlendirilmiş web sitesi stilleri oluşturan belirlenmiş CSS kodu biçiminde, erişime hazır CSS desteği sağlar. Web geliştiricileri sitelerinin tarayıcı varsayılanında çalışmasını istemeyebilir ve bu geçersiz kılınabilir.
Stil sayfaları nedir?

Stil sayfaları, HTML'nin izleyicilere nasıl sunulması gerektiğine ilişkin bilgi ve bildirimleri içeren şablonlardır.
Kimlik seçici nedir?

Kimlik seçici, adından da anlaşılacağı gibi, bildirilen bir stile göre ayrı ayrı tanımlanan bir seçicidir. Bu, bir HTML belgesindeki HTML kodunun tek bir öğesinin diğerlerinden farklı biçimlendirilmesine olanak tanır. Kimlik seçiciler pound sembolünü (#) ve ardından seçiciye verilen adı kullanır.

Sıkça Sorulan Sorular

CSS'deki modüller nelerdir?

Bir programlama dili olarak CSS modüllere ayrılmıştır. Modülerleştirilmiş bir dil, belirli bir özelliği çevreleyen verileri ve kodu, açılabilen, okunabilen veya düzenlenebilen bir modülde birleştirir. Arka planlar ve kenarlıklar gibi şeyler için modüller mevcuttur.

CSS harici mi, dahili mi yoksa satır içi mi?

CSS, harici, dahili veya satır içi kodlu stil sayfalarına uygulanabilir:

Harici CSS: Harici CSS, bir kelime işlemcide oluşturulur ve .css formatında kaydedilir. Bu dosyalar bir sitenin tamamının tasarımını kodlamak için kullanılabilir. HTML web sitenizin kodunda stil sayfasına bağlantı veren bir başlık bölümünün olması gerekir.
Dahili CSS: Bir CSS kodunun doğrudan bir HTML web sayfasının başlığına bir CMS düzenleyicide veya elle kodlanarak yazılması, dahili CSS kodu olarak kabul edilir.
Satır İçi CSS: Bir CSS kodunun doğrudan tanımladığı HTML kodu satırına yazılması durumunda buna Satır İçi CSS denir.

CSS'de tarayıcı varsayılanı nasıldır?

Bazı tarayıcılar, tarayıcıya bağlı olarak, tarayıcı başlatıldığında önceden biçimlendirilmiş web sitesi stilleri oluşturan belirlenmiş CSS kodu biçiminde, erişime hazır CSS desteği sağlar. Web geliştiricileri sitelerinin tarayıcı varsayılanında çalışmasını istemeyebilir ve bu geçersiz kılınabilir.

Stil sayfaları nedir?

Stil sayfaları, HTML'nin izleyicilere nasıl sunulması gerektiğine ilişkin bilgi ve bildirimleri içeren şablonlardır.

Kimlik seçici nedir?

Kimlik seçici, adından da anlaşılacağı gibi, bildirilen bir stile göre ayrı ayrı tanımlanan bir seçicidir. Bu, bir HTML belgesindeki HTML kodunun tek bir öğesinin diğerlerinden farklı biçimlendirilmesine olanak tanır. Kimlik seçiciler pound sembolünü (#) ve ardından seçiciye verilen adı kullanır.