CSS Nedir? Neden Kullanılır?
CSS (Cascading Style Sheets – Basamaklı Stil Sayfaları), web sayfalarının görünümünü ve düzenini şekillendirmek için kullanılan bir stil dilidir.
CSS, HTML ile hazırlanan web sayfalarının yapısını görsel açıdan zenginleştirir ve kullanıcı dostu arayüzlerin oluşturulmasına yardımcı olur. CSS, aynı zamanda web geliştiriciler ve tasarımcıların hayal gücü ve yaratıcılıklarını sayfalara yansıtmasını sağlayan bir araçtır.
CSS, içerik ile tasarımın ayrı tutulmasını sağlar. Bu sayede web geliştirme sürecini esnek, etkili ve sürdürülebilir kılar. CSS sayesinde metinlerin renkleri, fontları, arka planları ve web sayfalarının düzeni kolaylıkla değiştirilebilir. Farklı cihazlara uyum sağlayan modern web uygulamalarında da CSS önemli bir rol oynar; farklı ekran büyüklüğüne sahip cihazlarda kullanıcı dostu bir deneyim sunulmasını sağlar.
CSS’i Kim Buldu?
CSS, ilk olarak 1994 yılında Berners-Lee ile birlikte CERN’de çalışan Norveçli teknoloji uzmanı Håkon Wium Lie tarafından önerildi. 1996 yılında W3C (World Wide Web Consortium) tarafından bir web standardı olarak kabul edildi. CSS’in ilk versiyonu olan CSS1, temel stil özelliklerini içeriyordu. 1998’de yayınlanan CSS2 sürümü ise gelişmiş yerleşim (layout) kontrolleri ve farklı platformlardaki görünümün düzenlenmesine olanak sağlayan yenilikler getirdi. Günümüzde hâlâ aktif olarak kullanılan ve modüler yapısıyla pek çok yeni özellik sunan CSS3 ise 1999 yılında yayınlandı.
CSS Kodları Nelerdir?
CSS kodları ile renk ayarlama, kenarlık ekleme, boyutlandırma gibi görsel düzenlemeler yapılabilir. İşte temel bazı CSS özellikleri:
Renk Ayarlama
Renk tanımlamak için “color” özelliği kullanılır. Renk ayarlaması üç şekilde yapılır:
- Color:red; şeklinde renk adı yazılarak (örnğin red, blue)
- Color: #ff0000; şeklinde istenilen rengin heksadesimal kodu yazılarak
- Color: rgb(255, 0, 0); şeklinde istenilen rengin RGB(Red-Green-Blue) kodu yazılarak
Yazı Tipi ve Boyutu
Yazıların boyutları “font-size”, tipleri ise “font-family” komutlarıyla ayarlanır. “font-weight” komutu ile yazının incelik ve kalınlık değerleri ayarlanabilir.
- font-size: 16px; yazının boyutunu 16px olarak ayarlar.
- font-family: Arial; yazının tipini Arial yapar.
- font-weight: bold; yazıyı kalın hâle getirir.
Metin Hizalama
CSS ile metinleri hizalamak için “text-align” komutu kullanılır.
- text-align: center; metni ortalar.
- text-align: left; metni sola doğru hizalar.
- text-align: right; metni sağa doğru hizalar.
Kenarlıklar
HTML ögelerine kenarlık eklemek için “border” komutu kullanılır.
- border: 1px solid black; ifadesi ile siyah, 1 piksellik düz çizgi kenarlık eklenir.
- border-radius: 10px; ifadesi 10px değerinde kenarlıkların köşelerini ovalleştirir.
Boşluklar
HTML ögelerinin aralarındaki iç ve dış boşlukların ayarlanmasında “padding” ve “margin” komutları kullanılır.
- margin: 10px; HTML ögesi ile diğer ögeler arasındaki dış boşluğu 10px yapar.
- padding: 10px; HTML ögesi ile içerik arasındaki iç boşluğu 10px yapar.
Boyut Ayarlama
HTML ögesinin genişlik ve yükseklik değerlerini ayarlamayı sağlar. “height” ile yükseklik, “width” ile genişlik ayarlanır.
- width: 200px; HTML ögesinin genişliğini 200px yapar
- height: 100px; HTML ögesinin yüksekliğini 100px yapar.
CSS Nasıl Uygulanır?
CSS kodları HTML yapılarına satır içi (inline), dâhilî (internal), haricî (external) olarak üç farklı şekilde uygulanır. Bu uygulama şekillerinin kendi içlerinde avantajları ve dezavantajları vardır.
Satır İçi (Inline) CSS
Bu yöntemde CSS kodları, doğrudan HTML ögelerinin “style” özelliği kapsamında tanımlanır.
<p style="color: red; font-size: 18px; > Popüler bilimin dijital adresi </p>
<p> etiketinin “style” özelliğine eklenen “color:red;” koduyla yazının rengi kırmızı, “fotnt-size:18px;” koduyla yazının büyüklüğü 18 piksel büyüklüğünde görünür. Dolayısıyla “Popüler bilimin dijital adresi.” Yazısı kırmızı ve 18 piksel büyüklüğünde bir görünüme kavuşur.
Avantajları:
- Hızlı değişiklikler için uygundur.
- HTML ögelerinin “style” özelliklerine uygulandığı için harici dosyada tutulmalarına gerek yoktur.
- Belirli bir ögenin stilini geçersiz kılmak için kullanışlıdır. Bir web sayfasında genellikle haricî veya dâhilî CSS ile tüm ögelere uygulanacak genel stil kuralları tanımlanır. Ancak bazen belirli bir ögenin bu genel stil kurallarından farklı görünmesi istenebilir. Satır içi CSS tam da bu noktada devreye girer.
Dezavantajları:
- Sadece tanımlandığı HTML sayfasında çalışır.
- Sayfa büyüdükçe kod yoğunluğu artacağından okunabilirlik zorlaşabilir.
- Önbellek avantajlarından yararlanılamaz; her sayfa için tekrar yüklenir.
Dâhilî (Internal) CSS
Bu yöntemde CSS kodları HTML belgesinin <head> kısmında <style> etiketi içinde tanımlanır.
<!DOCTYPE html>
<html>
<head>
<title>Dahili CSS </title>
<style>
h1 {
color: green;
text-align: center;
}
p {
font-size: 16px;
color:red;
}
</style>
</head>
<body>
<h1>Bilim Genç</h1>
<p>Popüler bilimin dijital adresi.</p>
</body>
</html>
“Style” etiketinin içerisine yazılan h1 { color: green; text-align: center; } ve p { font-size: 16px; color:red; } CSS kodları, sayfada <h1> etiketi içerisine yazılan başlığın yeşil renkte ve ortalı olmasını, <p> etiketi içerisine yazılan yazıların boyutunun 16 piksel, renginin ise kırmızı olmasını sağlar.
Avantajları:
- Sayfaya özel stiller tanımlamak için uygundur.
- Haricî dosyada tutulmasına gerek yoktur.
- Tek bir dosyada düzenleme yapılabilir.
Dezavantajları:
- Sadece tanımlandığı HTML sayfasında çalışır.
- Sayfa büyüdükçe kod kalabalığı olacağından okunabilirlik azalır.
- Önbellek avantajlarından yararlanılamaz.
Haricî (External) CSS
Bu yöntemde CSS kodları ayrı bir “.css” uzantılı dosyada tutulur ve HTML dosyasının <head> kısmına <link> etiketi ile ayrı olarak tutulan “.css” uzantılı dosyanın yolu eklenir.
h1 {
color: blue;
text-align: left;
}
p {
font-size: 14px;
color: yellow;
}
Yukarıdaki CSS kodları “style.css” adlı dosyada saklanır. Bu dosyanın bilgisayarda hangi konumda durduğu önemlidir. “<link>” etiketinin “href” özelliğine dosyanın yolu eklenir. <!DOCTYPE html>
<html>
<head>
<title>Harici CSS Örneği</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bilim Genç</h1>
<p>Popüler bilimin dijital adresi.</p>
</body>
</html>
Bu örnekte, <h1> etiketi içerisine yazılan başlık, mavi renkte ve sola hizalanmış, <p> etiketi içerisine yazılan metin ise 14 piksel boyutunda ve sarı renkte görüntülenir.
<link rel="stylesheet" href="style.css"> kodu, “style.css” dosyasının “.html” uzantılı dosyasıyla aynı klasörde bulunduğunu gösterir. Eğer “.html” uzantılı dosyanın bulunduğu klasöre “stiller” adlı klasör eklenmiş ve “style.css” dosyası bu klasöre yerleştirilmiş olsaydı dsya yolunun <link rel="stylesheet" href="stiller/style.css"> şeklinde “style.css” şeklinde belirtilmesi gerekirdi.
Avantajları:
- Kodun bakımı ve düzenlenmesi kolaydır.
- Birden fazla HTML sayfasında aynı CSS dosyası kullanılabilir.
- HTML ve CSS kodları ayrı tutulur.
- Tarayıcı önbelleğe alabilir, böylece sonraki sayfa yüklemeleri daha hızlı olur.
- Büyük projelerde kod düzeni ve yönetimi daha kolaydır.
Dezavantajları:
- Ekstra HTTP isteği gerektirebilir: Haricî bir CSS dosyası kullanıldığında tarayıcı önce HTML dosyasını yükler. Ardından HTML dosyası içindeki <link> etiketi sayesinde CSS dosyasını yüklemek için ek bir HTTP isteği gönderir. Bu ek istek, sayfanın yüklenme süresini uzatabilir. Ancak günümüzde modern web sunucuları, bu durumu önbellekleme ve sıkıştırma gibi yöntemlerle sayfa yüklenme hızındaki yavaşlamayı ortadan kaldırır. Örneğin önbelleklemede CSS dosyası bir kez indirildikten sonra tarayıcının önbelleğinde tutulur ve sonraki ziyaretlerde tekrar yüklenmesine gerek kalmaz.
- Bağlantının doğru verilmesi gerekir: Doğru bağlantı verilmezse CSS dosyası tarayıcılar tarafından yüklenemez ve sayfaya stiller uygulanamaz.
CSS Seçiciler
Öge (Element) Seçiciler
Doğrudan HTML etiket adını kullanarak ilgili tüm ögeleri seçer. Örneğin, p tüm <p> etiketlerini, div tüm <div> etiketlerini seçer. Bu sayede istenen etiketlere CSS stilleri uygulanır.
p {
color: blue;
font-size: 16px;
}
Sınıf (Class) Seçiciler
HTML etiketlerinin “class” özelliğinin değerine göre seçim yapar. Bu seçici ile farklı farklı etiketlere CSS stiller uygulanabilir.
Dâhilî olarak “<style>” etiketine, haricî olarak “.css” uzantılı stil dosyalarının içerisine “.(sınıf adı)” formatında tanımlanır. Sınıf seçicileri kullanırken “.” İşaretinden sonra boşluk bırakmadan anahtar kelime yazılır.
.metin {
line-height: 1.5;
}
.vurgulu {
font-weight: bold;
color: green;
}
<p class="metin vurgulu">Popüler bilimin dijital adresi.</p>
“<p>” etiketinin “class” özelliğinde “metin” bir boşluk “vurgulu” ifadeleri yer alıyor. Bu sayede hem “.metin” hem de “.vurgulu” sınıflarında tanımlanan stiller, <p> etiketine birlikte uygulanır.
ID Seçiciler
HTML ögelerine verilen id özelliğinin değerine göre seçim yapan seçicilerdir. Sınıf seçiciler nokta(.) ile, ID seçiciler ise diyez (#) işaretiyle başlar. Bir HTML belgesinde her “id” değeri yalnızca bir ögeye atanabilir. Sınıf seçiciler birden fazla ögeye uygulanabilirken ID seçiciler yalnızca tek bir ögeye uygulanır.
#baslik {
font-size: 24px;
text-align: center;
}
<h1 id="baslik">Bilim Genç</h1>
<h1> etiketinin “id” özelliği “baslik” ifadesini içerdiğinden, bu ifade içinde tanımlanan CSS kodları <h1> etiketine uygulanır.
HTML Sayfasına CSS Uygulanması
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>CSS Temel Özellikler</title>
<style>
/* Genel sayfa arka plan rengi ve yazı tipi */
body {
background-color: #f0f0f0; /* Sayfa arka planını açık gri yapar */
font-family: Arial, sans-serif; /* Tüm yazıları Arial fontuyla gösterir */
padding: 20px; /* Sayfa kenarlarında 20px iç boşluk bırakır */
}
.renk-ornek {
color: red; /* Yazı rengini kırmızı yapar */
}
.renk-hexa {
color: #00ff00; /* Yazı rengini yeşil yapar (heksadesimal ile) */
}
.renk-rgb {
color: rgb(0, 0, 255); /* Yazı rengini mavi yapar (RGB ile) */
}
.yazi-tip-boyut {
font-size: 20px; /* Yazı boyutunu 20 piksel yapar */
font-family: 'Courier New'; /* Yazı tipini Courier New yapar */
font-weight: bold; /* Yazıyı kalın yapar */
}
.metin-hizala {
text-align: center; /* Metni ortalar */
}
.kenarlik-ornek {
border: 2px solid black; /* 2 piksellik siyah düz kenarlık ekler */
border-radius: 10px; /* Kenarları 10px oval yapar */
padding: 10px; /* İçeriğe 10px iç boşluk ekler */
margin: 10px; /* Dış çevresine 10px boşluk ekler */
background-color: white; /* Arka planı beyaz yapar */
}
.boyut-ornek {
width: 300px; /* Genişliği 300 piksel yapar */
height: 150px; /* Yüksekliği 150 piksel yapar */
background-color: lightblue; /* Arka planı açık mavi yapar */
text-align: center; /* İçeriği ortalar */
line-height: 150px; /* Dikeyde de ortalamak için satır yüksekliği kullanır */
}
</style>
</head>
<body>
<h2 class="renk-ornek">Bu yazı kırmızı renkte.</h2>
<h2 class="renk-hexa">Bu yazı yeşil renkte (hexa ile).</h2>
<h2 class="renk-rgb">Bu yazı mavi renkte (RGB ile).</h2>
<p class="yazi-tip-boyut">Bu yazı kalın, 20px boyutunda ve Courier New fontundadır.</p>
<p class="metin-hizala">Bu metin ortalanmıştır.</p>
<div class="kenarlik-ornek">
Bu kutunun kenarlıkları vardır ve köşeleri ovaldir.
</div>
<div class="boyut-ornek">
Kutunun genişliği, yüksekliği ayarlıdır.
</div>
</body>
</html>
Bu yazı kırmızı renkte.
Bu yazı yeşil renkte (hexa ile).
Bu yazı mavi renkte (RGB ile).
Bu yazı kalın, 20px boyutunda ve Courier New fontundadır.
Bu metin ortalanmıştır.
Kaynaklar:
