CSS nedir? Yerel, Genel ve Harici CSS

Kendi sitenizi kuruyorsanız veya ufak tefek düzenlemeler yapmak istiyorsanız CSS nedir diye kesinlikle merak etmişsinizdir. Bu yazımızda hem CSS nedir, hem de nasıl uygulanır ayrıntılı biçimde size açıklamaya çalışacağız. Umarız HTML ve CSS’i anlamanıza katkı sağlayabiliriz.

CSS nedir?

CSS, İngilizce adıyla Cascading Style Sheet (Basamaklı Stil Şablonu) temelde web sitenizdeki HTML elementlerinin renk, boyut, yazı karakteri gibi her türlü görsel özelliklerini değiştirmenizi sağlar. Yani web sitesinin görsel sunumunu içerikten ayırır.

CCS, 1996 yılında basit bir amaçla W3C (World Wide Web Consortium) tarafından geliştirilmiştir. Bunun nedeni HTML’in, sayfayı biçimlendirmeye yardımcı olacak etiketlere sahip olacak şekilde tasarlanmamış olmasıydı. Sadece web sitesinin temelini yazmanız gerekiyordu.

<font> gibi etiketler HTML 3.2 sürümü ile tanıtıldı ve geliştiriciler için oldukça fazla soruna neden oldu. Web sitelerinin farklı yazı tipleri, renkli arka planları ve stilleri olduğundan, kodu yeniden yazmak uzun, zahmetli ve pahalı bir süreçti. Böylece, CSS, W3C tarafından bu sorunu çözmek için oluşturuldu.

HTML ve CSS arasındaki ilişki güçlü bir şekilde birbirine bağlıdır. HTML bir biçimlendirme dili (bir sitenin temeli) olduğundan ve CSS stili (bir web sitesinin tüm estetiğini) vurguladığından, biri diğerinden ayrı olamaz.

CSS teknik olarak bir zorunluluk değildir ancak CSS olmadığında siteniz tamamen çıplak görünür. Sonuçta kimse çıplak bir siteye bakmak istemez.

CSS Avantajları

CSS uygulayan bir web sitesi ile uygulamayan bir web sitesi arasındaki fark çok büyüktür ve kesinlikle  dikkat çeker.

Tamamen yüklenmeyen ve metnin çoğu mavi ve siyah olan beyaz bir arka plana sahip bir web sitesi görmüş olabilirsiniz, gerçi günümüzde CSS kullanmayan siteleri görmek gerçekten zordur. Bu, sitenin CSS bölümünün doğru yüklenmediği veya tamamen var olmadığı anlamına gelir.

Yalnızca HTML içeren bir site böyle görünür ve bence bunun pek çekici olmadığını bir gerçek.
CSS’yi kullanmadan önce, tüm stillendirmenin HTML işaretlemesine dahil edilmesi gerekiyordu. Bu, tüm arka planı, yazı tipi renklerini, hizalamaları vb. ayrı ayrı tanımlamanız demekti.

CSS, her şeyi farklı bir dosyada stilize etmenize, böylece stili orada oluşturmanıza ve daha sonra CSS dosyasını HTML işaretlemesinin üzerine entegre etmenize olanak tanır. Bu, gerçek HTML biçimlendirmesini çok daha temiz ve bakımı daha kolay hale getirir.

Kısacası, CSS ile tek tek öğelerin nasıl göründüğünü tekrar tekrar tanımlamanız gerekmez. Bu zaman kazandırır, kodu kısaltır ve hataya açık hale getirir.

CSS, bir HTML sayfasında birden fazla stile sahip olmanızı sağlar, bu nedenle kişiselleştirme olanaklarını neredeyse sınırsız hale getirir. Günümüzde resmen bir zorunluluk.

CSS Nasıl Çalışır?

CSS, bir dizi kural içeren basit bir İngilizce tabanlı sözdizimi kullanır. Daha önce bahsettiğimiz gibi, HTML hiçbir zaman stil öğelerini kullanmak için tasarlanmamıştır, yalnızca sayfanın biçimlendirmesi içindir. Sadece içeriği tanımlamak için geliştirilmiştir.

Örneğin: <p>Bu bir paragraftır.</p>.

Peki o zaman paragraf nasıl şekillendirilir? CSS sözdizimi yapısı oldukça basittir. Bir seçiciye ve bir bildirim bloğuna sahiptir. Bir öğe seçer ve onunla ne yapmak istediğinizi bildirirsiniz. Oldukça basit, değil mi?

Ancak, hatırlamanız gereken kurallar var. Hemen endişelenmeyin, yapı kuralları oldukça basittir.

Seçici, stil vermek istediğiniz HTML öğesini işaret eder. Bildirim bloğu, noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir.

Her bildirim, iki nokta üst üste ile ayrılmış bir CSS özellik adı ve bir değer içerir. Bir CSS bildirimi her zaman noktalı virgülle biter ve bildirim blokları küme parantezleriyle çevrilidir.

Bir örneğe bakalım:

<p> öğelerinin tümü mavi renkte ve kalın olacaktır.

<style>
p {
 color: blue;
 text-weight: bold;
}
<style>

Başka bir örnekte, tüm <p> öğeleri ortaya hizalanacak, yazı boyutunu 16x ve yazı rengini ise pembe yapmaktır.

<style>
p {
   text-align: center;
   font-size: 16px;
   color: pink;
  
}
</style>

Daha fazla örnek için CSS ipuçları sayfamıza bakabilirsiniz.

CSS Çeşitleri: Yerel, Genel ve Harici CSS

Şimdi farklı CSS stilleri hakkında konuşalım. Bunlar Satır içi, Harici ve Dahilidir. Web sitenize CSS stilleri eklemek için 3 yol vardır: Genel CSS’i kullanabilir ve CSS kurallarını HTML belgesinin <head> bölümüne ekleyebilir, tüm CSS kurallarını içeren harici bir .css dosyasına bağlantı verebilir veya web sitenize kurallar uygulamak için yerel CSS kullanabilirsiniz. Bu rehberde üç yöntemi, avantajlarını ve dezavantajlarını gözden geçireceğiz.

Seçenek 1 — Genel CSS

Genel CSS kodu, belirli bir sayfanın <head> bölümüne yerleştirilir. Sınıflar(class) ve kimlikler(id), CSS kodunu belirtmek için kullanılabilir, ancak genel css yalnızca eklendiği belirli sayfada etkindir. Bu şekilde yerleştirilen CSS stilleri, sayfa her yüklendiğinde yüklenir, böylece yükleme süresi artabilir. Bununla birlikte, bazı durumlarda genel stil kullanılması yararlı olabilir. Örneğin, birisine bir sayfa şablonu gönderirken – her şey bir sayfada olacağı için, bir ön izleme görmek çok daha kolay olacaktır. Genel CSS, <style> </style> etiketlerinin arasına yerleştirilir. Bir genel stil yazımı örneği:

<head>
<style type="text/css"> 
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>

Genel CSS kullanmanın avantajları

• Yalnızca bir sayfa stil kodlarından etkilenir.
• Sınıflar ve kimlikler genel stil sayfası tarafından kullanılabilir.
• Birden fazla dosya yüklemenize gerek kalmaz. HTML ve CSS aynı dosyada olabilir.

Genel CSS kullanmanın dezavantajları

• Sayfa yüklenme süresini uzatır.
• Yalnızca bir sayfa stil kodlarından etkilenir. Birden fazla sayfada aynı stili kullanmak istediğinizde kullanışlı değildir.

HTML sayfasına genel CSS eklemek

1. HTML sayfanızı herhangi bir metin düzenleyicisiyle açın. Sayfa zaten hosting hesabınıza yüklüyse, hosting sağlayıcınızın kontrol panelindeki metin düzenleyicisini / dosya yöneticisini kullanabilirsiniz. Bilgisayarınızda bir HTML belgesi varsa, düzenlemek için herhangi bir metin düzenleyicisini kullanabilir ve daha sonra FTP istemcisi ile dosyayı hosting hesabınıza yükleyebilirsiniz.
2. <head> açılış etiketini bulun ve hemen ardına aşağıdaki kodu ekleyin:

   <style type="text/css">

    

3. Şimdi yeni bir satıra atlayın ve CSS kurallarınızı ekleyin. Örneğin:

   body { background-color: blue; } 
   h1 { color: red; padding: 60px; }

    

4. CSS kuralları eklemeyi tamamladıktan sonra kapanış stil etiketini ekleyin:

   </style>

    

Sonuç olarak, genel CSS kodlarını içeren HTML belgesi şu şekilde görünmelidir:

<!DOCTYPE html>
<html> 
<head> 
<style> body { background-color: blue; } 
h1 { color: red; padding: 60px; } 
</style> </head> <body> <h1>Hostinger Rehberler</h1> 
<p>İlk paragrafımız.</p> 
</body> 
</html>

Seçenek 2 — Harici CSS

Muhtemelen web sitenize CSS eklemenin en uygun yolu, onu harici bir .css dosyasına bağlamaktır. Bu şekilde harici bir CSS dosyasında yaptığınız değişiklikler web sitenize global olarak yansıtılacaktır. Harici bir CSS dosyasına bir bağlantı, yine sayfanın <head> bölümüne yerleştirilir:

<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

style.css tüm stil kurallarını içerir. Örneğin:

.xleftcol { float: left; width: 33%; background:#809900; } 
.xmiddlecol { float: left; width: 34%; background:#eff2df; }

Harici CSS kullanmanın avantajları

• HTML sayfalarının boyutu küçülür ve HTML sayfaları daha temiz bir yapıya sahip olur.
• Daha hızlı yükleme hızına sahipsiniz.
• Aynı .css dosyası birden fazla sayfada kullanılabilir.

Harici CSS kullanmanın dezavantajları

• Harici CSS yüklenene kadar sayfa düzgün görünmeyebilir.

Seçenek 3 — Yerel CSS

Yerel CSS, belirli bir HTML etiketi için kullanılır. <style> özniteliği, belirli bir HTML etiketini stillemek için kullanılır. Bu seçenekte her HTML elementinin tek tek stillendirilmesi gerektiği için bu şekilde CSS kullanmak önerilmez. Web sitenizi yönetmek yalnızca yerel CSS kullanırsanız çok zorlaşabilir. Ancak, bazı durumlarda da bu seçenek yararlı olabilir. Örneğin, CSS dosyalarına erişiminiz olmadığında veya yalnızca tek bir öğe için stil uygulamak zorunda olduğunuz durumlarda. Yerel CSS’e sahip bir HTML sayfası örneği şuna benzer:

<!DOCTYPE html>
<html> 
<body style="background-color:black;"> 
<h1 style="color:white;padding:30px;">Hostinger Rehberler</h1> 
<p style="color:white;">Burada faydalı bir rehber yazısı var.</p>
</body> 
</html>

Yerel CSS kullanmanın avantajları

• Değişiklikleri test edip önizlemek isterseniz kullanışlıdır.
• Hızlı düzeltmeler için kullanışlıdır.
• HTTP istek sayısı azalır.

Yerel CSS kullanmanın dezavantajları

• Yerel CSS her HTML elementine uygulanmalıdır.

Sonuç

Artık CSS nedir ve sitenize CSS nasıl ekleyebilirsiniz biliyorsunuz. Bunun yanında