CSS Nedir?
Açılımı “Cascading Style Sheets” olan CSS, “Basamaklanmış Stil Katmanları” anlamına gelir. HTML ve JavaScript ile birlikte en temel web teknolojileri arasında yer alan CSS, web sayfaları üzerinde oldukça fazla görsel denetim sunar.
CSS kullanarak, HTML öğelerinin tarayıcıda tam olarak nasıl göründüğünü kontrol edebilir, istediğiniz tasarımı kullanarak işaretlemenizi sunabilirsiniz.
CSS Nasıl Kullanılır?
Bir web sitesi oluşturuyorsanız, HTML ile başlamanız gerekiyor. Bu biçimlendirme dili ile başlıklar, paragraflar, resimler, tablolar, formlar, listeler ve çok daha fazlasını ekleyebilirsiniz. Ancak bu öğelerin sayfada nasıl sunulduğunu ya da düzenlendiğini kontrol edemezsiniz.
İşte burada CSS devreye giriyor. CSS, bir sayfanın tarayıcıya nasıl görünmesi gerektiğini açıklar ve tarayıcı da onu buna göre oluşturur. CSS, bir sayfadaki metin ve arka plan rengini değiştirmek, bağlantılardan alt çizgiyi kaldırmak ve resimleri, metni ve diğer HTML öğelerini canlandırmak gibi çok çeşitli biçimsel amaçlar için kullanılabilir.
Bunu gerçekleştirmenin ise 3 yolu vardır:
Satır İçi CSS : Bir HTML öğesinin içine yerleştirilmiş stil niteliğini gerektirir.
Dahili CSS : Bir HTML dosyasının head bölümüne yerleştirilmiş <style> öğesini gerektirir.
Harici CSS : Bir HTML dosyasının baş bölümünün içine yerleştirilmiş <link> öğesini gerektirir.
CSS Ne İşe Yarar?
Daha önce de belirttiğimiz gibi CSS, belgelerin kullanıcılara nasıl sunulduğunu, nasıl şekillendirildiğini ve düzenlendiğini belirten bir dildir.
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 ya da XML gibi başka biçimlendirme dilleriyle de karşılaşabilirsiniz.
Bir belgeyi bir kullanıcıya sunmak , onu hedef kitleniz tarafından kullanılabilecek bir forma dönüştürmek anlamına gelir. Firefox , Chrome ya da Edge gibi tarayıcılar, belgeleri örneğin bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak üzere tasarlanmıştır.
CSS, çok temel belge metni stili için kullanılabilir. Başlıkların ve bağlantıların rengini ve boyutunu değiştirebilir, bir düzen oluşturmak için kullanılabilir. Tek bir metin sütununu ana içerik alanı ve ilgili bilgiler için bir kenar çubuğu olan bir düzene dönüştürebilirsiniz ya da animasyon gibi efektler için bile kullanabilirsiniz.
CSS’in Sunduğu Avantajlar
CSS, biçimlendirmek için fazladan HTML olmadan, belgenizin yapısı çok daha okunabilir hale gelir ve belgeyi bozmadan güncellemeyi kolaylaştırır. Tüm CSS’leriniz ayrı bir dosyaya taşınabilir, bu da stillerinizi güncellemenizi kolaylaştırır.
Basamaklanmış Stil Katmanları kullanmak genellikle web sayfalarınızın arkasında daha az kod bulunmasına yol açar ve bu da sayfanın indirilme sürelerine yardımcı olur. Görüntüler genellikle bir sayfanın en ağır öğesidir ve genellikle sayfalarınızı yavaşlatan en büyük suçludur. Görüntülerin küçültülmesi için optimize edilebileceğinden emin olun.
CSS, web sayfalarınızın sunumu üzerinde daha fazla kontrol sağlar. Web tasarımcılarının bazen ne kadar az kontrole sahip olabileceği göz önüne alındığında, bir kısmını geri almanın bir yolu olduğunu bilmek güzel. CSS’nin, metnin aralığını ve satır aralığını kontrol etme seçenekleri gibi HTML’ye göre daha fazla biçimlendirme seçeneğine sahip olmasının yanı sıra, CSS ayrıca sayfanın hangi sırayla görüntüleneceğini de belirleyebilir. Bazı ağır grafikleriniz varsa, ziyaretçilerinizin en azından grafiklerinizin yüklenmesini beklerken okuyabilecekleri bir metin olmasını sağlamak için bunları kodunuza en son yerleştirebilirsiniz.
Genel olarak herkes tarafından kabul edilmese de, CSS’in sayfalarınızın bir arama motorunda bulunmasına yardımcı olması muhtemeldir. CSS siteniz daha az kod içerdiğinden ve daha basit bir yapıya sahip olduğundan, sadece sizin için değil arama motoru için de okunması daha kolaydır. Yani aslında CSS, SEO’ya da faydalıdır.
En Popüler CSS Kütüphaneleri
Animate.css, birden çok tarayıcıda uygulanabilen, kullanıma hazır bir CSS animasyonları kütüphanesi olmakla beraber, kurulumu oldukça kolaydır. Animasyonun uzunluğunu, gecikme süresini ve etkileşimlerini belirtir ve bunlar oldukça kolay komutlarla gerçekleştirilir.
Bootstrap ile geliştiricilerin, bir siteyi daha küçük ekran boyutları ayarlama konusunda ayrı projeler oluşturması gerekmez. Sadece gerekli Bootstrap sınıflarını birleştirmeleri gerekir ve tasarım kendini ayarlar.
UIkit size kapsamlı bir HTML, CSS ve JS bileşenleri koleksiyonu sunar. Temalarla genişletilebilir ve kendi görünümünüzü oluşturmak için özelleştirmesi kolaydır. Hızlı ve güçlü web arayüzleri geliştirmek için hafif ve modüler bir CSS kütüphanesidir.
CSS Kodları Nelerdir?
Birkaç basit CSS kodu öğrenerek web sitenizi istediğiniz gibi dizayn edebilirsiniz. Bunlardan bazıları şunlardır:
Kolay Paragraf Biçimlendirme için Temel CSS Kodu: CSS ile stil oluşturmak, her öğe oluşturduğunuzda bir stil belirtmeniz gerekmediği anlamına gelir. “ P { font-size: 120%; color: dimgray; } “ koduna sahiptir.
Karakter Büyüklüğünü Değiştirmek için CSS Örneği: Büyük harflerle olması gereken küçük harfli paragraflar için bir tanım oluşturmak için kullanılır. “ p.smallcaps { font-variant: small-caps; } “ koduna sahiptir. Ayrıca büyük haflerle yazılmış bir metni küçük harflerle kullanmak için ise “<p class=”smallcaps”>paragraf.</p> “ kodu kullanılır.
Bağlantı Renklerini Değiştirmek için Kolay CSS: Bir bağlantıya atanabilecek dört farklı renk vardır: standart rengi, ziyaret edilen rengi, üzerine gelinen rengi ve etkin rengi. Bunun için “ a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; } “ kodu kullanılır.
Alt Çizgileri Kaldırmak İçin CSS: Altı çizili metin bir bağlantıyı açıkça belirtirken, bazen bu altı çizgiyi silmek daha hoş görünür. Bu, “text-decoration” özniteliği ile gerçekleştirilir. “ a { text-decoration: none; } “ kodu kullanılır.
CSS Koduyla Bağlantı Düğmesi Yapmak: içeriğinize dikkat çekip bir bağlantı düğmesi koymak için “ a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; } “ kodu kullanılır.
Metin Kutusu Oluşturmak için CSS Örnek Kodu: Sayfanızda bir öğeyi vurgulamak istiyorsanız, kenarlık eklemek isteyebilirsiniz. Bunun için “ p.important { border-style: solid; border-width: 5px; border-color: purple; } “ kodu kullanılır.
