- Konu sahibi
- #1
HTML, web sayfasının içeriğini ve anlamlı yapısını oluşturur; CSS ise bu içeriğin tarayıcıda nasıl görüneceğini ve yerleşeceğini belirler. Kısaca HTML için sayfanın iskeleti, CSS için bu iskeletin görünümü ve düzeni denebilir. HTML tek başına tarayıcının varsayılan stilleriyle görüntülenebilir; CSS mevcut içeriğin sunumunu özelleştirir.
HTML ile başlık, paragraf, bağlantı, görsel, liste ve form gibi öğeler tanımlanır. CSS ile renk, yazı tipi, boşluk, kenarlık, genişlik, hizalama, responsive düzen ve animasyon gibi görsel kurallar verilir. HTML bir öğenin ne olduğunu açıklamaya odaklanırken CSS o öğenin nasıl görüneceğini belirler.
Aşağıdaki dosya, HTML ve CSS'in birlikte nasıl çalıştığını gösteren en küçük tam örneklerden biridir:
Bu kodu
Başlık veya paragraf tarayıcıda görünmüyorsa önce HTML etiketlerinin ve dosyanın kaydedildiği konumun doğru olduğunu kontrol edin. İçerik görünüyor fakat renk, boşluk veya çerçeve uygulanmıyorsa sorun CSS kuralında, seçicide veya yazım biçiminde aranmalıdır. Bu örnekteki
Karar verirken aşağıdaki ayrım pratik bir ölçüttür:
Örneğin bir metni başlık yapmak için yazı boyutunu CSS ile büyütmek yerine HTML'de uygun başlık öğesini kullanın. Böylece içerik yalnızca büyük görünmez; belge içindeki rolü de doğru tanımlanır. Görsel tercihleri ise CSS'e bırakmak daha düzenlidir.
HTML etiketlerini yalnızca görsel sonuç için kullanmak yaygın bir hatadır. Örneğin bir başlığı sıradan bir paragraf yapıp CSS ile büyütmek, görsel olarak benzer sonuç verse de doğru belge yapısını kurmaz. Tersi yönde, HTML içine çok sayıda
Bir başka hata CSS'in HTML'in yerine geçtiğini düşünmektir. CSS, HTMLnin anlamlı belge yapısının yerine geçmez.
Küçük denemelerde CSS, HTML içindeki
Evet. Tarayıcı HTML içeriğini varsayılan stillerle gösterir. Ancak özel renkler, boşluklar ve yerleşim kuralları uygulanmaz.
HTML ile başlık, paragraf, bağlantı, görsel, liste ve form gibi öğeler tanımlanır. CSS ile renk, yazı tipi, boşluk, kenarlık, genişlik, hizalama, responsive düzen ve animasyon gibi görsel kurallar verilir. HTML bir öğenin ne olduğunu açıklamaya odaklanırken CSS o öğenin nasıl görüneceğini belirler.
Aynı örnek üzerinden fark
Aşağıdaki dosya, HTML ve CSS'in birlikte nasıl çalıştığını gösteren en küçük tam örneklerden biridir:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML ve CSS örneği</title>
<style>
.kart {
box-sizing: border-box;
max-width: 320px;
overflow-wrap: anywhere;
padding: 16px;
color: #222;
background: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
}
.kart-baslik {
margin: 0 0 8px;
color: #0057a8;
}
</style>
</head>
<body>
<article class="kart">
<h1 class="kart-baslik">Merhaba</h1>
<p>Bu metnin yapısını HTML, görünümünü CSS belirler.</p>
</article>
</body>
</html>Bu kodu
index.html adıyla kaydedip tarayıcıda açtığınızda gri arka planlı, çerçeveli ve mavi başlıklı bir kart görürsünüz. <article>, <h1> ve <p> HTML öğeleridir. .kart ve .kart-baslik seçicileriyle başlayan kurallar ise CSS'e aittir.Başlık veya paragraf tarayıcıda görünmüyorsa önce HTML etiketlerinin ve dosyanın kaydedildiği konumun doğru olduğunu kontrol edin. İçerik görünüyor fakat renk, boşluk veya çerçeve uygulanmıyorsa sorun CSS kuralında, seçicide veya yazım biçiminde aranmalıdır. Bu örnekteki
style bölümünü daha sonra ayrı bir style.css dosyasına taşıyabilirsiniz.HTML ve CSS karşılaştırması
Karar verirken aşağıdaki ayrım pratik bir ölçüttür:
| Soru | HTML | CSS |
|---|---|---|
| Ne işe yarar? | İçeriği ve belge yapısını tanımlar. | Görünümü ve yerleşimi düzenler. |
| Örnek sorumluluk | Başlık, paragraf veya bağlantı oluşturmak. | Renk, genişlik veya hizalama vermek. |
| Değişince ne etkilenir? | İçerik, anlam ve belge hiyerarşisi. | Sunum, tasarım ve ekran düzeni. |
Uygulamada doğru çalışma sırası
- Önce içeriğin yapısını HTML ile kurun: başlık, bölümler, paragraflar ve bağlantılar gibi anlamlı öğeleri seçin.
- HTML dosyasını CSS olmadan açıp içeriğin anlaşılır ve kullanılabilir olup olmadığını kontrol edin.
- Renk, boşluk, yazı boyutu ve yerleşim kurallarını CSS ile ekleyin.
- Tek bir öğeyi değiştirmek için mümkün olduğunca uygun bir sınıf veya seçici kullanın; aynı tasarım kuralını gereksiz yere tekrar etmeyin.
- Farklı ekran genişliklerinde görünümü kontrol edin ve yapısal sorunları CSS ile gizlemek yerine önce HTML'i düzeltin.
Sık yapılan hatalar
HTML etiketlerini yalnızca görsel sonuç için kullanmak yaygın bir hatadır. Örneğin bir başlığı sıradan bir paragraf yapıp CSS ile büyütmek, görsel olarak benzer sonuç verse de doğru belge yapısını kurmaz. Tersi yönde, HTML içine çok sayıda
style niteliği yazmak da tasarımı içerikle gereksiz biçimde birleştirir.Bir başka hata CSS'in HTML'in yerine geçtiğini düşünmektir. CSS, HTMLnin anlamlı belge yapısının yerine geçmez.
::before/::after ile üretilen içerik görsel ekler sağlayabilse de temel metin, bağlantı ve form semantiğini uygun HTML ile kurun. HTML yapısını kurduktan sonra CSS ile sunumu ayırmak, bakım ve değişiklik işlemlerini kolaylaştırır.Sık sorulan sorular
HTML ve CSS ayrı dosyalarda mı olmalı?
Küçük denemelerde CSS, HTML içindeki
<style> bölümünde bulunabilir. Proje büyüdükçe CSS'i ayrı bir dosyada tutmak, kuralları yeniden kullanmayı ve düzenlemeyi kolaylaştırır.CSS olmadan HTML çalışır mı?
Evet. Tarayıcı HTML içeriğini varsayılan stillerle gösterir. Ancak özel renkler, boşluklar ve yerleşim kuralları uygulanmaz.
