Web geliştirme dünyasına adım attığınızda, HTML’in bir web sayfasının iskeletini oluşturduğunu öğrenirsiniz. Ancak bu iskeleti giydiren, ona renk, stil ve estetik kazandıran güç CSS’tir. CSS, yani Cascading Style Sheets, bir web sayfasının görünümünü ve düzenini kontrol etmek için kullanılan bir stil sayfası dilidir. HTML ile oluşturulan içeriğin yazı tipi, rengi, boşlukları ve yerleşimi gibi görsel özelliklerini tanımlar. Bu rehber, CSS’in temellerine odaklanarak size sağlam bir başlangıç yapmanız için gereken bilgileri sunacaktır. CSS’i HTML dosyanıza nasıl bağlayacağınızı, belirli HTML elemanlarını nasıl seçeceğinizi ve bu elemanların stilini değiştirmek için en yaygın kullanılan özellikleri nasıl uygulayacağınızı adım adım, örneklerle inceleyeceğiz.
Css’i html’e bağlama yolları
CSS kodunuzun HTML elemanlarınızı etkileyebilmesi için öncelikle bu iki dili birbirine bağlamanız gerekir. Bu bağlantıyı kurmanın üç temel yöntemi vardır ve her birinin kendine özgü kullanım alanları bulunur. Projenizin büyüklüğüne ve ihtiyacınıza göre doğru yöntemi seçmek, kodunuzun düzenli ve yönetilebilir olmasını sağlar.
Inline css (satır içi)
Bu yöntemde, stil kodları doğrudan stil verilmek istenen HTML etiketinin içine style özelliği olarak yazılır. Yalnızca tek bir elemanı etkileyecek hızlı ve küçük değişiklikler için kullanışlıdır. Ancak, çok fazla kullanıldığında HTML kodunu karmaşıklaştırır ve bakımı zorlaştırır.
Örnek:
Bu paragrafın metin rengi mavi ve yazı tipi boyutu 18 pikseldir.
Internal css (dahili)
Bu yöntemde, CSS kodları HTML dosyasının <head> bölümü içine açılan <style> etiketleri arasına yazılır. Bu kodlar yalnızca o HTML sayfası için geçerlidir. Tek bir sayfaya özgü stil kuralları tanımlamak için idealdir. Web siteniz birden fazla sayfadan oluşuyorsa, her sayfa için aynı stilleri kopyalamanız gerekeceğinden verimsiz olabilir.
Örnek:
<!DOCTYPE html>
<html>
<head>
<title>Dahili CSS Örneği</title>
<style>
p {
color: green;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>Bu sayfadaki tüm paragraflar yeşil renkte ve Arial yazı tipinde olacaktır.</p>
</body>
</html>
External css (harici)
Bu en yaygın ve en çok tavsiye edilen yöntemdir. Tüm CSS kodları .css uzantılı ayrı bir dosyaya yazılır ve bu dosya, HTML dosyasının <head> bölümünden <link> etiketi kullanılarak çağrılır. Bu sayede, tüm web sitenizdeki sayfalar aynı stil dosyasını kullanabilir. Bu, kod tekrarını önler, bakımı kolaylaştırır ve sitenin daha hızlı yüklenmesine yardımcı olur.
Örnek (HTML dosyası):
<!DOCTYPE html>
<html>
<head>
<title>Harici CSS Örneği</title>
<link rel="stylesheet" href="stil.css">
</head>
<body>
<p>Bu paragrafın stili 'stil.css' dosyasından gelecek.</p>
</body>
</html>
Örnek (stil.css dosyası):
p {
color: purple;
font-size: 16px;
}
Temel css seçicileri
CSS’in gücü, stil vermek istediğiniz HTML elemanlarını hassas bir şekilde hedefleyebilmesinden gelir. Bu hedefleme işlemini “seçiciler” (selectors) aracılığıyla yaparız. Seçiciler, CSS kurallarının hangi elemanlara uygulanacağını belirler.
| Seçici Türü | Sözdizimi | Açıklama |
|---|---|---|
| Element seçici | p |
Sayfadaki tüm <p> etiketleri gibi belirli bir türdeki tüm HTML elemanlarını seçer. |
| Class seçici | .vurgu |
Nokta (.) ile başlar ve belirli bir class özelliğine sahip tüm elemanları seçer. Bir class birden çok elemana atanabilir. |
| ID seçici | #baslik |
Diyez (#) ile başlar ve belirli bir id özelliğine sahip tek ve benzersiz bir elemanı seçer. Bir ID, bir sayfada yalnızca bir kez kullanılmalıdır. |
Örnek kullanım:
/* Element Seçici: Tüm h1 etiketlerini hedefler */
h1 {
color: navy;
}
/* Class Seçici: 'uyari' class'ına sahip tüm elemanları hedefler */
.uyari {
background-color: yellow;
border: 1px solid red;
}
/* ID Seçici: 'ana-menu' id'sine sahip tek elemanı hedefler */
#ana-menu {
list-style-type: none;
padding: 0;
}
Yaygın css özellikleri
Seçicilerle elemanları hedefledikten sonra, kıvrımlı parantezler { } arasına yazdığımız “özellikler” (properties) ile bu elemanların görünümünü değiştiririz. Her özelliğin bir adı ve bir değeri vardır (property: value;). İşte en sık kullanılan temel özelliklerden bazıları:
Metin ve renk özellikleri
- color: Metnin rengini belirler. (Ör:
color: #333333;) - background-color: Bir elemanın arka plan rengini belirler. (Ör:
background-color: #f0f0f0;) - font-size: Yazı tipi boyutunu ayarlar. Genellikle piksel (px), em veya rem birimleri kullanılır. (Ör:
font-size: 16px;) - font-family: Yazı tipi ailesini belirler. Birden fazla yazı tipi virgülle ayrılarak yedek olarak belirtilebilir. (Ör:
font-family: "Helvetica", Arial, sans-serif;) - font-weight: Yazı tipi kalınlığını ayarlar (normal, bold vb.). (Ör:
font-weight: bold;)
Örnek:
.makale-paragrafi {
color: #4A4A4A;
font-size: 1.1em;
font-family: Georgia, serif;
line-height: 1.6;
}
Kutu modeli özellikleri
Web’deki her HTML elemanı, bir kutu olarak düşünülebilir. Bu kutunun etrafındaki boşlukları ve içindeki dolguyu yönetmek için “kutu modeli” (box model) özellikleri kullanılır.
- margin: Bir elemanın kenarlığının (border) dışındaki boşluktur. Diğer elemanlarla arasındaki mesafeyi ayarlar. (Ör:
margin: 20px;) - padding: Bir elemanın içeriği ile kenarlığı arasındaki boşluktur. Elemanın iç dolgusunu oluşturur. (Ör:
padding: 15px;)
Örnek:
.kutu {
background-color: lightblue;
width: 300px;
border: 1px solid blue;
padding: 20px; /* İçerik ile kenarlık arasında 20px boşluk */
margin: 30px; /* Kutunun etrafında, diğer elemanlarla arasında 30px boşluk */
}
Bu örnekte, .kutu class’ına sahip elemanın içindeki metin, mavi kenarlıktan 20 piksellik bir iç boşlukla ayrılırken, kutunun kendisi diğer sayfa elemanlarından 30 piksellik bir dış boşlukla ayrılacaktır.
Bu rehberde, CSS’in web sayfalarına stil kazandırma gücünü ve temel çalışma prensiplerini ele aldık. İlk olarak, CSS kodlarımızı HTML’e entegre etmenin üç farklı yolunu öğrendik: hızlı testler için inline, tek sayfalık stiller için internal ve en iyi pratik olan, yönetilebilir ve yeniden kullanılabilir kodlar için external yöntem. Ardından, stil kurallarını doğru HTML elemanlarına uygulamamızı sağlayan temel seçicileri inceledik: tüm etiketleri hedefleyen element, birden çok elemana uygulanabilen class ve yalnızca tek bir benzersiz elemanı hedefleyen id seçicileri. Son olarak, metin rengi, arka plan, yazı tipi boyutu gibi temel görsel değişiklikleri yapmamızı sağlayan ve elemanlar arasındaki boşlukları ayarlayan margin ve padding gibi yaygın özellikleri örneklerle gördük. Bu temel bilgiler, web sayfalarınıza estetik ve profesyonel bir görünüm kazandırmanız için sağlam bir başlangıç noktasıdır.
Resim Sahibi: Lukas
https://www.pexels.com/@goumbik