HTML, web sayfalarının temel yapısını oluşturur, ancak görsel tasarım açısından HTML tek başına yeterli değildir. Web sayfanızın stilini ve görünümünü belirlemek için CSS (Cascading Style Sheets) kullanılır. Bu yazıda, HTML’de stilleri nasıl uygulayacağınızı ve CSS’in temel kullanımını inceleyeceğiz. İlerleyen konularda CSS’i daha detaylı ele alacağız.
HTML’de Stillerin Kullanımı
HTML’de stiller üç farklı şekilde uygulanabilir:
- Satır içi stil (Inline CSS)
- Dahili stil (Internal CSS)
- Harici stil (External CSS)
1. Satır İçi Stil (Inline CSS)
Satır içi stil, doğrudan HTML etiketi içinde style özelliği ile tanımlanır. Ancak, genellikle büyük projelerde önerilmez çünkü kodun yönetimini zorlaştırır.
<p style="color: blue; font-size: 18px;">Bu bir satır içi stil örneğidir.</p>
2. Dahili Stil (Internal CSS)
Dahili CSS, <head> etiketi içine <style> etiketi kullanılarak eklenir. Küçük projeler için kullanılabilir ancak büyük projelerde harici stil kullanılması önerilir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Stil Örneği</title>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>Bu paragraf kırmızı renkte görünecektir.</p>
</body>
</html>
3. Harici Stil (External CSS)
Harici CSS, ayrı bir .css dosyasında tanımlanır ve HTML dosyasına <link> etiketi ile bağlanır. Büyük projelerde en iyi yöntemdir, çünkü stil yönetimini kolaylaştırır.
CSS Dosyası (style.css):
p {
color: green;
font-size: 22px;
}
HTML Dosyası (index.html):
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Harici Stil Örneği</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Bu paragraf yeşil renkte görünecektir.</p>
</body>
</html>
CSS ile Daha Fazlası Mümkün!
Şu ana kadar CSS’in temel kullanımını gördük. Ancak CSS, sadece renkleri ve yazı tiplerini değiştirmekten çok daha fazlasını yapabilir.
İlerleyen derslerimizde şunları detaylıca işleyeceğiz:
- CSS Seçiciler ve Özellikler (Sınıf, ID, Eleman Seçicileri)
- Kutu Modeli (Box Model) ve Web Sayfa Düzeni
- Responsive (Duyarlı) Tasarım ve Mobil Uyum
- CSS Flexbox ve Grid Layout ile modern web tasarımı
- Animasyonlar ve Geçiş Efektleri
Tasarım gücünüzü artırmak için CSS konularında derinlemesine bilgi edinmeye hazır olun! 🎨✨