CSS Nedir? HTML ile Farkı Nedir?

Question

CSS, web sayfalarımıza stil vermek için kullandığımız bir dildir. HTML sayfanın iskeletini oluştururken, CSS de bu iskeletin nasıl görüneceğini belirler. Renkler, yazı tipleri ve yerleşim gibi görsel her şeyi CSS ile yönetiriz.

Answer 1

🎨 CSS Nedir? HTML ile Temel Farkları Nelerdir?

Web geliştirmeye yeni başlayan herkesin karşılaştığı iki temel teknoloji: HTML ve CSS. Bu ikisi bir binanın iskeleti ile iç dekorasyonu gibidir. Gelin, bu iki önemli yapı taşını ve aralarındaki kritik farkları birlikte inceleyelim.

📄 HTML: Yapının Temeli

HTML (HyperText Markup Language), bir web sayfasının iskeletini ve temel içeriğini oluşturmak için kullanılan işaretleme dilidir. Metin, başlık, paragraf, liste, resim, bağlantı gibi öğeleri tanımlar. Yapısal bir rol üstlenir.

• 🔸 Amacı: İçerik ve yapıyı tanımlamak.
• 🔸 Örnek: <h1>Başlık</h1>, <p>Bu bir paragraf.</p>
• 🔸 Mantığı: "Bu bir başlık", "Bu bir listedir" der.

🎨 CSS: Görünümün Sihirbazı

CSS (Cascading Style Sheets) ise, HTML ile oluşturulan bu yapıya stil, renk, düzen ve görsel çekicilik kazandırır. Bir web sayfasının nasıl görüneceğini kontrol eder.

• 🌈 Amacı: Görsel sunumu ve düzeni yönetmek.
• 🌈 Örnek: h1 { color: blue; font-size: 24px; }
• 🌈 Mantığı: "Başlık mavi ve 24 piksel boyutunda olsun", "Paragrafların arasında 15px boşluk olsun" der.

⚖️ HTML ile CSS Arasındaki Temel Farklar

İkisi birbirini tamamlar ama görevleri kesin çizgilerle ayrılmıştır.

1. Görev Farkı

• HTML → Yapı ve İçerik (Ne görüntülenecek?).
• CSS → Stil ve Sunum (Nasıl görüntülenecek?).

2. Sözdizimi (Syntax) Farkı

• HTML, etiketler (tags) kullanır: <etiket>içerik</etiket>
• CSS, kurallar (rules) ve seçiciler (selectors) kullanır: seçici { özellik: değer; }

3. Bağımlılık İlişkisi

CSS, tek başına çalışamaz; stil vermek için bir HTML yapısına ihtiyaç duyar. HTML ise CSS olmadan çalışabilir, ancak ortaya çok sade ve stilize edilmemiş bir sayfa çıkar.

🔗 Nasıl Birlikte Çalışırlar? (Basit Bir Örnek)

İkisinin uyumunu küçük bir kod parçasıyla görelim:

HTML (index.html):
<h1 class="vurgu">Merhaba Dünya!</h1>

CSS (style.css):
.vurgu { color: darkred; text-align: center; font-family: Arial; }

Bu örnekte, HTML içeriği (Merhaba Dünya!) tanımlarken, CSS onun rengini, hizasını ve yazı tipini belirleyerek görsel hale getirir.

💎 Sonuç: Birbirini Tamamlayan İkili

Modern web geliştirmede, HTML ve CSS ayrılmaz bir ikilidir. HTML olmadan içerik oluşturamazsınız, CSS olmadan da bu içeriği kullanıcılar için çekici ve kullanılabilir hale getiremezsiniz. HTML binanın tuğlaları, CSS ise boyası, dekoru ve bahçe düzenlemesidir. İyi bir web sayfası, bu iki teknolojinin uyumlu bir şekilde bir araya gelmesiyle oluşur.

Bir sonraki adım, bu ikiliye hareket ve işlevsellik katan JavaScript'i öğrenmek olacaktır! 🚀