CSS Nedir? CSS Kodları Nelerdir?

CSS Nedir ve Ne İşe Yarar?

CSS (Cascading Style Sheets), 1996 yılında World Wide Web Consortium (W3C) tarafından geliştirilmiş ve web geliştiricilerine HTML belgelerinin görsel tasarımını yönetme imkânı sağlayan stil dilidir. HTML’in yapısal içeriğini sunum katmanından ayırarak, web sayfalarının daha esnek, tutarlı ve kullanıcı dostu olarak tasarlanmasına olanak tanır. CSS kodları ile renkler, yazı tipleri, sayfa düzenleri, boşluklar, kenarlıklar ve diğer görsel özellikler kontrol edilebilir.

CSS örnekleri, seçiciler (selectors) ve bildirim blokları (declaration blocks) kullanılarak tanımlanır. Seçiciler, stil uygulanacak HTML öğelerini belirlerken; bildirim blokları, bu öğelere uygulanacak görsel özellikleri içerir.

CSS’in Web Geliştirmedeki Rolü

CSS’nin temel işlevi, web sayfalarına renk, yazı tipi, hizalama ve düzen kazandırmaktır. Görseller, simgeler, başlıklar, paragraflar ve diğer HTML öğeleri CSS sayesinde düzenlenebilir. CSS kullanılmadığında web sayfaları, yalnızca düz metin ve görsellerden oluşan, görsel açıdan zayıf yapı şeklinde görüntülenir.

Web projelerinde CSS, satır içi (inline) olarak HTML etiketlerinde kullanılabileceği gibi, harici stil dosyaları (.css) şeklinde de eklenebilir. En iyi yöntem, tüm stilleri tek harici stil dosyasında toplamak ve bu dosyayı HTML sayfasına bağlamaktır. Böylece tasarım yönetimi kolaylaşır ve tüm sayfalar tutarlı görünüme kavuşur. CSS ile yazı boyutları değiştirilebilir, renkler uygulanabilir, arka plan efektleri eklenebilir, hatta animasyonlar ve geçiş efektleri oluşturulabilir.

CSS Nasıl Çalışır?

CSS, kolay anlaşılır sözdizimine sahiptir ve HTML içeriğini biçimlendirmek için belirli kurallar kullanır. HTML’nin amacı yalnızca içerik yapısını tanımlamaktır; görsel biçimlendirme için CSS devreye girer.

CSS kodları iki ana bölümden oluşur:

• Seçici (Selector): Stil uygulanacak HTML öğesini belirtir.
• Bildirim Bloğu (Declaration Block): Süslü parantezler içinde yer alan, noktalı virgülle ayrılmış bir veya daha fazla bildirimden oluşur.

Her bildirim, iki nokta üst üste ile ayrılmış özellik adı (property) ve değer (value) içerir. Bildirimler noktalı virgülle sonlandırılır.

Örnek:

CSS ile HTML Arasındaki Fark Nedir?

HTML (Köprü Metni İşaretleme Dili) ile CSS (Basamaklı Stil Sayfaları), web sayfalarının oluşturulması ve biçimlendirilmesinde birlikte kullanılan temel teknolojilerdir. Ancak ikisi farklı amaçlara hizmet eder ve web geliştirme sürecinde farklı roller üstlenir. Türkiye’nin en güvenilir hosting sağlayıcılarından olan MarkaHost adresi olarak html css arasındaki temel farkları sizler için aşağıdaki şekildedir:

Amaç ve İşlev

HTML ile CSS arasındaki en temel fark, kullanım amaçlarında ortaya çıkar. HTML, internet üzerindeki içeriğin yapılandırılması ve düzenlenmesi için kullanılan işaretleme dilidir. Başlıklar, paragraflar, resimler, bağlantılar ve listeler gibi web sayfası öğelerini tanımlar ve içeriğin tarayıcıda nasıl görüneceğine dair iskeleti oluşturur.

CSS ise HTML ile tanımlanmış öğelerin görsel görünümünü ve düzenini belirlemek amacıyla kullanılan stil dili olarak görev yapar. Renkler, yazı tipleri, boşluklar, hizalama ve konumlandırma gibi tasarım unsurlarını tanımlar. Bu sayede içerik ile tasarım birbirinden ayrılır ve yönetim kolaylaşır.

Sözdizimi ve Yapısal Farklar

HTML ile CSS, yazım biçimleri ve yapıları bakımından da ayrışır. HTML, öğelerin açılı parantezler içinde tanımlandığı (ör. <h1>, <p>, <div>) ve genellikle açılış ile kapanış etiketleri (ör. <p>…</p>) ile kullanılan etiket tabanlı sözdizimine sahiptir. Bu etiketler, tarayıcıya içeriğin nasıl görüntüleneceğini bildirir.

CSS ise kural tabanlı sözdizimi kullanır. Her kural, HTML öğelerini hedefleyen seçici (ör. p, .class, #id) ve bu öğelerin görünümünü belirleyen özellik-bilgi çiftlerinden oluşan bildirim bloğu içerir (ör. color: blue; font-size: 16px;). Bu yapı sayesinde tek CSS dosyası birden fazla HTML sayfasına uygulanabilir ve tasarım yönetimi daha esnek hale gelir.

Bağımlılık ve Birlikte Çalışma

HTML ile CSS birbirinden bağımsız çalışabilse de birbirini tamamlayan teknolojilerdir. HTML, CSS olmadan da kullanılabilir; ancak yalnızca HTML ile oluşturulan sayfalar görsel olarak sade kalır. CSS ise işlevini yerine getirebilmek için HTML öğelerine ihtiyaç duyar.

İkisinin bir arada kullanılmasıyla tam, tutarlı ve estetik bir web sayfası ortaya çıkar: HTML, yapıyı ve içeriği oluştururken; CSS, stil ve görsel zenginlik kazandırır. Bu görev ayrımı, modern web geliştirmede sürdürülebilir ve ölçeklenebilir kodun temelini oluşturur.

Uygulama ve Yönetim

İki teknoloji arasındaki bir diğer fark, uygulanma ve yönetilme şekilleridir. HTML, doğrudan web sayfasının kendi dosyasında yazılır ve içeriğin ayrılmaz parçası olur. CSS ise üç şekilde eklenebilir: satır içi (HTML etiketi içinde), dahili (HTML dosyasında <style> etiketiyle) veya harici (ayrı CSS dosyasına bağlanarak).

Harici CSS kullanımı, özellikle büyük projelerde en verimli yöntemdir. Çünkü tek bir CSS dosyasında yapılan değişiklikler, bu dosyayı kullanan tüm sayfalara anında yansır. Bu durum, site genelinde tasarım tutarlılığını sağlar ve bakım sürecini kolaylaştırır.

Kullanıcı Deneyimi ve SEO Etkisi

HTML ile CSS, kullanıcı deneyimi ve arama motoru optimizasyonu (SEO) bakımından da farklı roller üstlenir. Düzenli ve anlamsal HTML yapısı, arama motorlarının sayfa içeriğini doğru şekilde algılamasına ve dizine eklemesine yardımcı olur. <header>, <article>, <footer> gibi etiketlerin doğru kullanımı, ekran okuyucu uyumluluğunu artırır ve SEO açısından avantaj sağlar.

CSS, doğrudan SEO puanını etkilemez; ancak web sayfasının görsel çekiciliğini, mobil uyumluluğunu ve sayfa düzenini iyileştirerek kullanıcı deneyimini güçlendirir. Bu da dolaylı olarak ziyaretçilerin sayfada kalma süresini artırır ve hemen çıkma oranını düşürür.

CSS Kodları Nasıl Yazılır?

CSS stilleri, HTML şablonundaki her öğeye ayrı ayrı eklenebilir. Ancak CSS’nin en önemli avantajlarından biri, tek stili birden fazla öğeye uygulayabilmesi veya tek bir öğeye birden fazla stili atayabilmesidir. Örneğin, tüm <h2> başlıklarını aynı renkte gösterecek tanım yapabilirsiniz.

CSS kodlarını HTML’ye eklemenin üç ana yöntemi vardır:

1. Satır İçi (Inline) / Yerel CSS:

Satır içi CSS, yalnızca belirli etiketi etkileyen biçimlendirmeler yapar. Kodlar, doğrudan <style>…</style> etiketleri arasına yazılır. Bu yöntem, yalnızca tek öğeye özel stil verilmesi gereken durumlarda tercih edilir.

2. Sayfa İçi (Internal) / Genel CSS:

Sayfa içi CSS, HTML belgesinde belirli etiketler için tanımlanan stilleri, bu etiketlerin bulunduğu her yerde uygular. Kodlar yine <style>…</style> etiketleri arasında yer alır. Ancak bu yöntem, kodların doğrudan HTML içinde yer alması nedeniyle sayfaların yüklenme hızını olumsuz etkileyebilir.

3. Harici (External) CSS:

Harici CSS’de, html css hazır site kodları ayrı .css dosyasında tutulur ve HTML belgesine <head> etiketi içinde link verilerek bağlanır. Bu sayede aynı CSS dosyası birden fazla sayfada kullanılabilir. Fakat CSS dosyası yüklenene kadar sayfanın görünümü bozuk olabilir.

CSS Söz Dizimi (Syntax) Temelleri

CSS’in temel söz dizimi üç ana bileşenden oluşur:

• Seçici (selector): Stilin uygulanacağı HTML öğesini belirtir.
• Özellik (property): HTML öğesinin değiştirilecek niteliğini ifade eder (örneğin, renk, arka plan, yazı tipi).
• Değer (value): Özelliğe atanacak yeni değeri belirtir (örneğin, color: red; metni kırmızı yapar, background: gray; arka planı gri yapar).

Bu yapı sayesinde, belirli HTML öğesine istenen görsel özellikler kolayca uygulanabilir.

CSS Türleri: Inline, Internal, External

Web tasarımında kullanılan üç temel CSS türü vardır: satır içi (inline) CSS, dahili (internal) CSS ve harici (external) CSS. Her biri HTML kodunu biçimlendirmek için kullanılır, ancak bunu farklı yöntemlerle gerçekleştirir.

1. Satır İçi CSS

Satır içi CSS, yalnızca tek bir HTML öğesinin görünümünü düzenler. Seçici kullanılmaz; bunun yerine stil doğrudan ilgili HTML etiketinin style özniteliğine yazılır. Bu yöntem, her öğenin ayrı ayrı biçimlendirilmesini gerektirdiğinden büyük projelerde tercih edilmez.

Satır içi CSS’nin tercih edilebileceği başlıca durumlar:

• Tek öğeye özel stil uygulanması gerektiğinde,
• CSS dosyalarına erişimin mümkün olmadığı senaryolarda.
• Ayrıca, hızlı düzeltmeler veya yapılan değişiklikleri anında önizlemek için de idealdir.

2. Dahili (Internal) veya Gömülü CSS

Dahili CSS, yalnızca tek HTML sayfasının stilini belirlemek için kullanılır. Kodlar, sayfanın <head> bölümünde <style>…</style> etiketleri arasında yer alır. Ancak her sayfaya ayrı ayrı stil eklemek gerektiğinden, birden fazla sayfa üzerinde çalışırken verimsiz hale gelir.

3. Harici (External) CSS

Harici CSS’de stil kodları, .css uzantılı ayrı dosyada tutulur. HTML belgesine <link> etiketi ile bağlanır. Bu yöntem, HTML yapısı ile CSS stillerini tamamen ayırarak yönetimi kolaylaştırır ve sitenin tamamında tutarlı tasarım sağlar.

Tasarımda yapılacak her türlü değişiklik, yalnızca bu harici dosyada düzenleme yapılarak tüm sayfalara uygulanabilir. Ayrıca, CSS dosyalarını düzenlemek ve projeleri yönetmek için farklı CSS düzenleme araçları kullanılabilir.

En Sık Kullanılan CSS Kodları ve Örnekleri

Günümüzde kullanıcılar arasında popüler ve yaygın şekilde kullanılan CSS html kodları ve anlamları aşağıdaki başlıklar altında açıklanmaktadır.

Renk (Color) Kodları

CSS’te yer alan color özelliği, temel olarak metin rengini tanımlamak amacıyla kullanılır. Kenarlık renklerinde olduğu gibi color özelliği de #hex, rgb() veya rgba() formatlarında değer alabilir. Metin rengini belirlemek, web sitesinin genel tasarımı ve tematik uyumu açısından kritik önem taşır. Ana renklerin arka plan renkleri ile dengeli biçimde kullanılması ve kontrast oranlarının doğru ayarlanması, doğrudan color özelliği üzerinden yönetilebilir. Eğer CSS dosyasında color değeri tanımlanmazsa, tarayıcı varsayılan renk ayarını uygular.

Örnek:

color: red;

color: rgb(210, 85, 84);

color: hsl(10deg 55% 17%);

Yazı Tipi ve Stil Kodları

Font özellikleri, web sayfasındaki metinlerin görsel şeklini belirleyen CSS tanımlamalarıdır. Yazı tipi, stili ve çeşitli nitelikleri font kodları ile düzenlenir. Font ile ilişkili beş ana özellik ise aşağıdaki şekildedir:

• font-style: Yazının biçimini belirler; örneğin normal veya italik gibi seçenekler sunar.
• font-variant: Yazı tipinin küçük büyük harf varyasyonlarını veya özel biçimlerini ayarlamaya imkân verir.
• font-weight: Metin kalınlığını ayarlamak için kullanılır.
• font-size: Yazı boyutunu belirler.
• font-family: Metnin hangi font ailesi ile görüntüleneceğini tanımlar.

Örnek:

h2 {

font-style: italic;

font-variant: normal;

font-weight: bold;

font-size: 1.2rem;

font-family: sans-serif;

}

Kutu Modeli (Box Model) Kullanımı

CSS’te web sayfası düzeni anlatılırken “kutu modeli” terimi kullanılır. Bu model, her HTML öğesini saran görünmez kutu yapısını ifade eder. Kutu modeli; içerik, dolgu (padding), kenarlık (border) ve kenar boşluğu (margin) bölümlerinden oluşur.

En içten dışa doğru bölümler:

• İçerik (content): Metin ve görsellerin bulunduğu alan.
• Dolgu (padding): İçeriğin çevresindeki şeffaf boşluk.
• Kenarlık (border): Dolgunun etrafındaki çerçeve.
• Kenar Boşluğu (margin): Kenarlığın dışındaki şeffaf boşluk.

Margin ve Padding Kullanımı

Margin (kenar boşluğu) ve padding (dolgu), HTML öğeleri arasındaki mesafeyi kontrol etmek için kullanılan temel CSS özellikleridir. Her ikisi de öğeler arasında boşluk bırakır; ancak padding iç taraftan, margin dış taraftan boşluk oluşturur. Varsayılan olarak dört kenardan boşluk tanımlarlar. Spesifik yönlere boşluk vermek için margin-bottom veya padding-left gibi alt özellikler kullanılabilir.

Örnek:

div {

  margin-top: 2rem;

  margin-bottom: 2rem;

  padding-right: 1rem;

  padding-left: 1rem;

}

Arka Plan (Background) Kodları

CSS’te background özellikleri, öğelerin arka planını tanımlamak için kullanılır. Bu özellikler kullanılarak yazıların okunabilirliğini artırabilir ve sayfanın estetik görünümünü geliştirebilir. HTML öğesinde bulunan beş ana background özelliği aşağıdakilerdir:

• background-color: Arka plan rengini belirler.
• background-image: Arka planda resim, fotoğraf veya vektör kullanmaya olanak tanır.
• background-repeat: Arka plan görselinin tekrarlama biçimini ayarlar.
• background-attachment: Arka plan görselinin sayfa kaydırıldığında hareket edip etmeyeceğini belirler.
• background-position: Arka plan görselinin başlangıç konumunu tanımlar.

Örnek:

h3 {

background-color: #b0e4fe;

background-image: url(“photo.jpg”);

background-repeat: round;

background-attachment: scroll;

background-position: top;

}

Buton ve Link Stilleri

Butonlar ve Link stilleri, kullanıcı etkileşiminin görsel tasarımla doğrudan ilişkili olan en önemli parçalarıdır. CSS, buton ve linklerin görünümünü biçimlendirmek için kullanılır. Renk, yazı tipi, arka plan, kenarlık ve hover efektleri gibi stiller ekleyerek hem estetik hem de işlevsel açıdan etkili butonlar ve bağlantılar oluşturulabilir.

Responsive Tasarımda CSS Kullanımı

Duyarlı web tasarımı, ekran boyutu, platform ve cihaz yönelimine göre kullanıcı davranışına ve bulunduğu ortama uyum sağlayan bir yaklaşımı ifade eder. Responsive tasarımda CSS, web sitelerinin farklı ekran boyutlarına ve cihaz tiplerine sorunsuz biçimde uyum göstermesini sağlar. CSS, sayfanın görsel düzenini ve tasarımını tanımlayarak, içeriğin her ekranda doğru biçimde konumlanmasına ve okunabilirliğinin korunmasına katkıda bulunur. Bu sayede masaüstü, tablet ve mobil cihazlarda tutarlı kullanıcı deneyimi sunulur.

CSS Framework’leri: Bootstrap, Tailwind vs.

CSS framework’leri, web geliştirme sürecini hem hızlandıran hem de standartlaştıran güçlü araçlardır. Bu yapılar, önceden hazırlanmış ve test edilmiş CSS kodları sayesinde, geliştiricilerin projelerini daha hızlı ve uyumlu şekilde tamamlamasına imkân verir. Bootstrap,

Foundation, Bulma, Tailwind CSS ve Materialize, yaygın olarak tercih edilen framework’ler arasında yer alır. Her framework, kendine özgü özellikler ve avantajlar barındırdığı için, proje gereksinimlerine en uygun olanın seçilmesi önemlidir.

Bootstrap

Responsive web tasarım için etkili çözüm sunan Bootstrap, en popüler CSS framework’lerinden biridir ve Twitter tarafından açık kaynaklı olarak geliştirilmiştir. Güçlü grid sistemi, geniş kullanıcı arayüzü bileşenleri ve JavaScript eklentileri ile hızlı ve tutarlı sayfa geliştirmeyi mümkün kılar.

Özellikle Bootsrap grid sistemi, farklı ekran boyutlarına uygun düzenlemeler yapmayı da kolaylaştırır. Butonlar, kartlar, formlar ve menü çubukları gibi bileşenler projelerde tekrar kullanılabilir ve kolayca özelleştirilebilir.

Foundation

Zurb tarafından geliştirilen Foundation, esnek yapısı ve güçlü özellikleriyle öne çıkar. Mobil öncelikli yaklaşımı sayesinde responsive tasarımda etkili sonuçlar verir. Foundation’ın grid sistemi, yüksek özelleştirme imkânı sunar ve geniş kontrol alanı sağlar.

Foundation framework, butonlar, kartlar, tablolar ve formlar gibi zengin bileşenlerin yanı sıra, interaktif öğeler için JavaScript eklentileri de içerir. Sass ile tam uyumlu çalışması, projelerin özelleştirme ve bakım süreçlerini kolaylaştırır. Büyük ölçekli ve kurumsal projeler için ideal tercihtir.

Bulma

Bulma, açık kaynaklı ve Sass tabanlı modern CSS framework’üdür. Temiz kod yapısı ve anlaşılır sözdizimi ile dikkat çeker. Flexbox tabanlı grid sistemi kullanır ve esnek, uyumlu düzenler oluşturmayı kolaylaştırır.

Modüler yapısı sayesinde yalnızca ihtiyaç duyulan bileşenler eklenebilir, bu da yükleme hızını artırır. Buton, kart, tablo ve form gibi temel bileşenleri içeren Bulma, minimalist ve modern tasarımlar için oldukça uygundur ve kapsamlı dokümantasyonla öğrenme sürecini hızlandırır.

Tailwind CSS

Tailwind CSS, “utility-first” (yardımcı sınıf öncelikli) yaklaşımı ile tasarım sürecine farklı boyut kazandırır. CSS sınıflarını doğrudan HTML öğelerine ekleyerek hızlı ve esnek stil yönetimi sağlar. Bu yöntem, bileşenlerin tek tek özelleştirilmesine olanak tanır ve tasarım süresini önemli ölçüde kısaltır.

Tailwind, ayrıca responsive tasarım için hazır sınıflar içerir ve yalnızca gerekli stillerin eklenmesi sayesinde hafif ve performanslı sayfalar oluşturulabilir. Yüksek derecede özelleştirilebilir yapısı, farklı proje ihtiyaçlarına kolayca uyum sağlar.

Materialize

Materialize CSS, Google’ın Material Design ilkelerine dayalı olarak geliştirilmiş modern framework’tür. Görsel açıdan estetik ve işlevsel arayüzler oluşturmayı hedefler. Kullanıcı deneyimini ön planda tutarak sezgisel, etkileşimli ve düzenli tasarımlar sunar.

Ek olarak, Materialize, duyarlı grid sistemi, kapsamlı bileşenleri ve güçlü JavaScript desteği ile öne çıkar. Bu sayede modern, mobil uyumlu ve etkileşimli web uygulamalarını hızlıca geliştirmek mümkün olur.

Başlangıç Seviyesi İçin CSS Öğrenme Kaynakları

CSS öğrenmeye yeni başlayanlar için pek çok erişilebilir kaynak mevcuttur. En popüler seçenekler arasında YouTube videoları, Udemy ve Coursera gibi çevrimiçi eğitim platformları yer alır. Bunların yanı sıra bloglar, interaktif eğitim siteleri ve dokümantasyon kaynakları da başlangıç seviyesindeki kullanıcılar için faydalıdır. Kısa süreli araştırma ile ihtiyaçlarınıza ve öğrenme tarzınıza en uygun içerik ve platformları kolayca bulabilirsiniz.

SEO Uyumlu CSS Kullanımı İçin İpuçları

CSS, web sitelerinin görsel “giysisi” olarak düşünülebilir ve ziyaretçiler üzerinde ilk izlenim bırakmada oldukça önemlidir. Doğru CSS kullanımı, kullanıcı deneyimini (UX) iyileştirir ve ziyaretçilerin sitede daha uzun süre kalmasını sağlar. Mobil uyumluluk, hızlı sayfa yükleme ve görsel düzen avantajı ise, hem kullanıcı memnuniyetini artırır hem de arama motoru sıralamalarını olumlu yönde etkiler.

Özellikle responsive tasarım, sitenin farklı cihaz ve ekran boyutlarına uyum göstermesini sağlar. Google’ın mobil öncelikli indeksleme yaklaşımı göz önünde bulundurulduğunda, mobil uyumlu web sitesi SEO açısından oldukça avantajlıdır. CSS’in doğru kullanımı, hem kullanıcılar için sorunsuz bir deneyim yaratır hem de sayfanın arama motorları tarafından daha iyi değerlendirilmesini destekler.