- Katılım
- 7 Nis 2025
- Konular
- 367
- Mesajlar
- 780
- Çözümler
- 1
- Tepkime puanı
- 121
- Puan
- 93
- Konum
- İstanbul
- Web sitesi
- forumagel.com
Hazır Kod Bankası - Konu 2: CSS Temelleri
Hazır Kod Bankası Serimizin İkinci Durağı: CSS!
Merhaba arkadaşlar! Serimizin ilk konusunda web sayfalarımızın temel yapısını HTML ile nasıl oluşturacağımızı gördük. Şimdi sıra geldi bu yapıya stil katmaya, yani sayfalarımızın nasıl görüneceğini belirlemeye. İşte tam bu noktada CSS (Cascading Style Sheets - Basamaklı Stil Sayfaları) devreye giriyor.
CSS, HTML elementlerinin renklerini, yazı tiplerini, boyutlarını, kenar boşluklarını, hizalamasını ve sayfa içindeki konumlarını belirlemek gibi görsel düzenlemeleri yapmamızı sağlar. Kısacası, HTML sayfanın içeriğiyken, CSS o içeriğin sunumudur. Bu ayrım, web sitelerini yönetmeyi ve güncellemeyi çok daha kolay hale getirir.
Bu konuda CSS'in temel sözdizimini (syntax), bir HTML sayfasına nasıl eklendiğini ve en sık kullanılan bazı temel stil özelliklerini öğreneceğiz.
1. CSS Sayfaya Nasıl Eklenir?
CSS kodlarını bir HTML sayfasına eklemenin üç ana yolu vardır:
- Harici (External) CSS: En çok tercih edilen yöntemdir. CSS kodları `.css` uzantılı ayrı bir dosyaya yazılır ve HTML sayfasının `<head>` bölümünde `<link>` etiketi ile bu dosyaya bağlantı verilir. Bu sayede tek bir CSS dosyası birden fazla HTML sayfasını stilize edebilir.
- Dahili (Internal) CSS: CSS kodları, stil verilecek HTML sayfasının `<head>` bölümündeki `<style>` etiketleri arasına yazılır. Genellikle tek sayfalık küçük projeler veya testler için kullanılır.
- Satır İçi (Inline) CSS: Doğrudan HTML etiketinin içine `style` özelliği kullanılarak yazılır. Sadece o etiketi etkiler. Çok özel durumlar dışında kullanımı önerilmez çünkü HTML ve CSS kodunu karıştırır.
Bu konuda dahili (internal) CSS yöntemini kullanarak örnekler göstereceğiz, ancak büyük projelerde her zaman harici (external) CSS kullanmayı hedeflemelisiniz.
2. CSS Sözdizimi (Syntax)
Bir CSS kuralı genellikle iki ana bölümden oluşur: Seçici (Selector) ve Bildirim Bloğu (Declaration Block).
Kod:
seçici {
özellik: değer;
özellik: değer;
/* ... daha fazla bildirim ... */
}- Seçici (Selector): Hangi HTML elementine stil verileceğini belirler. (Örnekler aşağıda)
- Bildirim Bloğu (Declaration Block): Süslü parantezler `{}` arasına yazılır. Stil verilecek özellikleri ve değerlerini içerir.
- Özellik (Property): Stili ayarlanacak HTML elementinin bir görsel özelliğidir (örn: `color`, `font-size`, `margin`).
- Değer (Value): Özelliğin alacağı değerdir (örn: `blue`, `16px`, `20px`).
- Her bildirim noktalı virgül (
ile biter. Son bildirimden sonra noktalı virgül zorunlu olmasa da eklemek iyi bir alışkanlıktır.
3. Temel CSS Seçiciler
HTML elementlerini seçmek için en sık kullanılan seçiciler şunlardır:
- Element Seçici: Doğrudan HTML etiketinin adını kullanır. O tipteki tüm elementleri seçer.
[CSS]
p {
color: blue; /* Tüm paragrafların yaz rengini mavi yapar */
}
h1 {
text-align: center; /* Tüm h1 başlıklarını ortalar */
}
[/CSS] - Class Seçici: HTML elementlerine verilen `class` özelliğini kullanarak seçim yapar. Bir sayfada birden fazla element aynı `class` değerine sahip olabilir. `.sinifadi` şeklinde kullanılır.
[CSS]HTML:<p class="vurgu">Bu önemli bir paragraf.</p> <div class="vurgu">Bu vurgulanmış bir div.</div>
.vurgu {
color: red;
font-weight: bold; /* 'vurgu' class'ına sahip tüm elementleri kırmızı ve kalın yapar */
}
[/CSS] - ID Seçici: HTML elementlerine verilen `id` özelliğini kullanarak seçim yapar. Bir sayfada sadece bir tane element belirli bir `id` değerine sahip olmalıdır. `#idadi` şeklinde kullanılır.
[CSS]HTML:<div id="ana-baslik-kutusu"> <h1>Ana Başlık</h1> </div>
#ana-baslik-kutusu {
border: 1px solid black; /* 'ana-baslik-kutusu' id'sine sahip elemente kenarlık ekler */
padding: 10px; /* İç boşluk ekler */
}
[/CSS]
4. Sık Kullanılan CSS Özellikleri
- Renk (color, background-color): Metin rengi (`color`) veya arka plan rengi (`background-color`) belirler. Renk isimleri (red, blue), HEX kodları (#FF0000), RGB değerleri (rgb(255,0,0)) gibi farklı formatlarda yazılabilir.
[CSS]
body {
background-color: #f0f0f0; /* Sayfanın arka planını gri yapar */
}
h1 {
color: navy; /* h1 başlıklarını lacivert yapar */
}
.kutu {
background-color: rgba(255, 165, 0, 0.5); /* Yarı şeffaf turuncu arka plan */
}
[/CSS] - Yazı Tipi (font-family, font-size, font-weight, font-style): Metnin yazı tipini (`font-family`), boyutunu (`font-size`), kalınlığını (`font-weight: bold;`) veya eğikliğini (`font-style: italic;`) belirler.
[CSS]
p {
font-family: Arial, sans-serif; /* Paragrafları Arial veya genel sans-serif bir fontla yazar */
font-size: 16px; /* Yazı boyutunu 16 piksel yapar */
}
.kalin-yazi {
font-weight: bold;
}
[/CSS] - Metin Hizalama (text-align): Metni element içinde hizalar (`left`, `right`, `center`, `justify`).
[CSS]
h2 {
text-align: center; /* h2 başlıklarını ortalar */
}
.saga-hizala {
text-align: right;
}
[/CSS] - Kenarlık (border): Elementin etrafına kenarlık ekler. Değerler sırasıyla: kalınlık, çizgi tipi, renk.
[CSS]
div {
border: 1px solid black; /* Div etrafına 1 piksel kalınlığında düz siyah kenarlık */
}
.kalin-cerceve {
border: 3px dashed red; /* 3 piksel kalınlığında kesikli kırmızı kenarlık */
}
[/CSS] - Boşluklar (margin, padding):
* `margin`: Elementin dışındaki boşluğu belirler. Diğer elementlerle arasındaki mesafeyi ayarlar.
* `padding`: Elementin içindeki (içeriği ile kenarlığı arasındaki) boşluğu belirler.
[CSS]
.kutu {
border: 1px solid gray;
margin: 10px; /* Kutunun etrafında 10 piksel dış boşluk */
padding: 15px; /* Kutunun içinde, içerikle kenarlık arasında 15 piksel boşluk */
}
[/CSS]
Not: Margin ve padding değerleri tek değer (tüm kenarlar), iki değer (üst/alt, sağ/sol), dört değer (üst, sağ, alt, sol) olarak verilebilir.
5. HTML ve CSS Birlikte Kullanımı (Komple Örnek)
İşte HTML yapımızı dahili CSS ile stilize ettiğimiz basit bir örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML ve CSS Örneği</title>
[B]<style>[/B]
[B]body {[/B]
font-family: 'Arial', sans-serif; /* Sayfadaki tüm yazıları etkiler */
margin: 20px; /* Sayfanın kenarlarında boşluk bırakır */
background-color: #e9e9e9; /* Açık gri arka plan */
[B]}[/B]
[B]h1 {[/B]
color: #333; /* Koyu gri başlık rengi */
text-align: center; /* Başlığı ortala */
[B]}[/B]
[B]p {[/B]
line-height: 1.6; /* Paragraf satır aralığı */
color: #555; /* Gri paragraf rengi */
[B]}[/B]
[B].vurgulu {[/B]
font-weight: bold;
color: navy; /* Lacivert ve kalın yazı */
[B]}[/B]
[B]#ana-kutu {[/B]
border: 1px solid #ccc; /* Açık gri kenarlık */
padding: 15px; /* İç boşluk */
margin-top: 20px; /* Üstten boşluk */
background-color: #fff; /* Beyaz arka plan */
border-radius: 8px; /* Kenarları yuvarla */
[B]}[/B]
[B]</style>[/B]
</head>
<body>
[B]<div id="ana-kutu">[/B]
[B]<h1>[/B]CSS ile Sayfalarımızı Güzelleştiriyoruz[B]</h1>[/B]
[B]<p>[/B]
Bu bir örnek paragraftır. [B]<span class="vurgulu">CSS'in gücünü</span>[/B] kullanarak HTML elementlerine stil veriyoruz.
[B]</p>[/B]
[B]<p>[/B]
Artık sayfalarımızın sadece iskeleti değil, [B]<span class="vurgulu">görünümü üzerinde de</span>[/B] tam kontrole sahibiz.
[B]</p>[/B]
[B]</div>[/B]
</body>
</html>Sıra Sizde!
CSS seçicileri, özellikleri veya HTML ile ilişkisi hakkında aklınıza takılan herhangi bir soru var mı? Kendi CSS denemelerinizi yapıp sonuçlarını paylaşabilirsiniz.
Yorumlarınızı ve etkileşimlerinizi bekliyorum!
Sırada Ne Var?
Web'in temel yapı taşları olan HTML ve CSS'e giriş yaptık. Şimdi bilgisayarımızdaki masaüstü uygulamalarına ve otomasyona yöneleceğiz. Bir sonraki konuda Excel ve VBA (Visual Basic for Applications) Temelleri'ne göz atacağız!
Takipte kalın!