Yükleniyor...

HTML CSS

style özniteliği ve renk değerleriyle küçük görünüm değişikliklerini zaten denediniz. Gerçek siteler nadiren her tasarım kuralını her etikette tutar. CSS (Cascading Style Sheets), görünüm ve hissi tanımlayan dildir. Bu oturum, henüz tam bir tasarım sistemi kurmak yerine, HTML’in CSS’i üç yaygın yolla nasıl yüklediğine odaklanır. Kuralları nereye koyacağınızı ve tarayıcının onları nasıl bulduğunu bilince tipografi, boşluk ve düzen konularına sayfa yapısını görünümle karıştırmadan ilerlemek çok daha kolay olur. Bu dersi CSS için bir “priz” gibi düşünün: enerji (kurallar) yalnızca bağlantı doğruysa ulaşır.

CSS burada ne yapıyor?

HTML içeriği yapılandırır. CSS sunumu tanımlar: renkler, boşluk, yazı tipleri ve daha sonra derinleştireceğiniz düzen fikirleri. HTML sayfanız birkaç CSS bildirimini tek bir öğede taşıyabilir, belgenin içinde küçük bir stil sayfası tutabilir veya ayrı bir .css dosyasına işaret edebilir. Doğru yeri seçmek demoları hızlı, gerçek projeleri sürdürülebilir tutar. Bilinçli bir seçim olmadan aynı style="..." ifadesini onlarca kez kopyalar veya dosya yolu bozulduğu için sayfanın görünümü “kaybettiğini” keşfedersiniz. Yüklemeyi şimdi öğrenmek, kurallar çoğaldığında saatlerce karışıklığı önler.

Doğrudan yanıt

Hızlı testler için bir öğede style="..." ile satır içi CSS kullanın. Tek sayfalık alıştırma için genellikle <head> içinde dahili bir <style>...</style> bloğu kullanın. Birçok sayfa aynı görünümü paylaşmalıysa <link rel="stylesheet" href="styles.css"> ile bağlanan harici bir .css dosyası kullanın. Yeniden kullanım ve temiz HTML önem kazandığı anda harici CSS’i tercih edin. Ders demolarında satır içi ve dahili CSS mükemmeldir; çok sayfalı bir sitede aynı kuralları her dosyada tekrarlamak bakımı yavaş ve tutarsız yapar. Bu oturumun amacı bir CSS özellik kataloğu ezberlemek değil, üç seçeneği güvenle bağlamaktır.

Üç yol bir bakışta

📊 CSS eklemenin üç yolu

Yöntem	Nerede	En iyi
Satır içi	bir etikette style özniteliği	Küçük, tek seferlik testler
Dahili	head içinde style öğesi	Tek sayfalık demolar
Harici	.css dosyası + link	Paylaşılan site stili

Satır içi CSS (hatırlatma)

Satır içi CSS tek bir öğede yaşar. Otuz saniyelik bir deney için mükemmeldir; tüm bir web sitesi için zayıftır çünkü tekrarlanan her görünüm yeniden kopyalanmalıdır. Bu fikri stil ve renk oturumlarında zaten gördünüz: etkiyi hemen görmek için yararlıdır ama aynı ton veya boyut on yerde çıkınca güncellemek zordur. Satır içini laboratuvar gibi kullanın, mimari gibi değil. Kural oturunca dahili bir bloğa veya harici bir dosyaya taşıyın; HTML’i tasarım değil içerik anlatır bıraksın.

Satır içi CSS hatırlatması

html

HTML Code

<p style="color: teal;">Tek öğede satır içi CSS</p>

Satır içi hâlâ ne zaman yardımcı olur

Bir rengi veya boyutu hızlıca kontrol etmek
Önceki oturumlardan property:value fikrini öğretmek
Öğrenirken geçici geçersiz kılmalar — sonra kuralı stil sayfasına taşıyın
Tüm çok sayfalı bir markayı yalnızca satır içi özniteliklerle kurmayın. Bu yol güncellenmesi zorlaşır: her marka değişikliği dağınık öznitelikleri avlamayı gerektirir. Ekiplerde satır içi, sitenin “gerçek” görünümünü de gizler çünkü .css ile HTML’deki kurallar açık uyarı olmadan çelişebilir.

Head içinde dahili CSS

Dahili bir stil sayfası, geçerli HTML dosyası için CSS kurallarını tutan bir <style> öğesidir. Yeni başlayanlar genellikle onu <head> içine koyar; böylece stil, body içeriğinden önce bildirilir. Tarayıcı kuralları erken bulur ve belge okunaklı kalır: yapı body’de, görünüm head’de duyurulur. Dahili CSS, henüz ayrı dosyaları yönetmeden aynı sayfada birkaç kuralı çalıştırırken idealdir — ama yine de o tek HTML’e kilitlidir.

Head içinde dahili CSS

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>This paragraph uses the style block.</p>
</body>
</html>

Dahili örneği okumak

style öğesi CSS içerir; sayfa yapısı için HTML etiketleri değil
p { color: navy; } bu belgede “tüm p öğeleri lacivert metin alsın” demektir
Bir kural, her etikette style="..." tekrarlamadan birçok paragrafı biçimlendirebilir
Dahili CSS hâlâ bu tek HTML dosyasına kilitlidir — bloğu kopyalamadıkça diğer sayfalar görmez
Ayrıca style özniteliği (etikette satır içi) ile <style> öğesi (kural bloğu) arasındaki farka dikkat edin. İsimler benzer; roller farklıdır. Bilinçsizce karıştırmak, yeni başlayanlar için kodu kafa karıştırıcı yapar.

link ile harici CSS

Harici CSS kuralları styles.css gibi bir dosyada tutar. HTML, link öğesiyle o dosyaya bağlanır. Bu, paylaşılan site stili için olağan kalıptır. Tek bir dosya ana sayfayı, iletişim sayfasını ve blogu besleyebilir — başlık rengini bir kez değiştirin, bağlı tüm sayfalar izler. Bunun çalışması için rel ve href doğru olmalıdır; HTML tek başına stil sayfasının nerede olduğunu “tahmin etmez”.

Harici stil sayfası bağlantısı

html

HTML Code

<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>

Harici CSS’in çalışması için ne doğru olmalı

link için tarayıcının ilişkiyi bilmesi adına rel="stylesheet" gerekir
href gerçek CSS dosyasına doğru yolla işaret etmelidir (Dosya Yolları oturumuna bakın)
styles.css içinde p { color: navy; } ve h1 { color: darkgreen; } gibi kurallar yazarsınız
Yol yanlışsa HTML yine açılır — ama stillenmemiş görünür
İlk alıştırmada CSS dosyasını HTML dosyasının yanına koyun; yollar sağlam hissedilince alt klasör deneyin. Tipik bir hata, styles.css’i doğru klasörde oluşturup href’e biraz farklı bir ad yazmaktır: büyük/küçük harf, eksik tire veya yanlış klasör. Sonuç “CSS bozuk” gibi görünür ama sorun kural sözdiziminde değil, bağlamadadır.

Yöntem seçmek

Stillerin ne kadar uzağa seyahat etmesi gerektiğini sorun:

Bir öğede hızlı bir deney → satır içi
Bir alıştırma sayfası, birkaç kural → head içinde dahili <style>
Birçok sayfa, ortak bir görünüm → harici .css + link
Daha sonra tam bir CSS kursuna geçtiğinizde harici stil sayfaları gerçek projeler için varsayılan olur. Bu HTML oturumu onları doğru bağlayabilmenizi sağlar. “Sonsuza dek bir yöntem seçmek” zorunda değilsiniz: demoda dahili başlayıp sayfa siteye dönüşünce aynı kuralları harici dosyaya taşıyabilirsiniz. Kural grameri (p { color: navy; }) aynı kalır; yalnızca yaşadıkları yer ve HTML’in onları nasıl yüklediği değişir.

Editörde alıştırma

Bir başlık ve iki paragraf içeren page.html oluşturun.
h1’i renklendiren bir kural ve p’yi biçimlendiren başka bir kuralla styles.css oluşturun.
HTML head içine <link rel="stylesheet" href="styles.css"> ekleyin.
Sayfayı açın. Stiller yoksa yolu ve rel’i kontrol edin.
Geçici olarak styles.css’i yeniden adlandırın veya taşıyın, yenileyin, hatayı görün, sonra href’i düzeltin.
İsteğe bağlı: bir kuralı dahili bir <style> bloğuna taşıyın ve karşılaştırın.
Bağlantıyı bilerek kırmak, yalnızca okumaktan daha hızlı yol hatalarını öğretir. Ayrıca tarayıcıda açtığınız aynı page.html’i yenilediğinizden emin olun — bir dosyayı düzenleyip başka birini yenilemek, diskteki CSS doğru olsa bile sayfayı “stilsiz” bırakan klasik bir hatadır.

Sayfaları stilsiz bırakan hatalar

link üzerinde rel="stylesheet" unutmak
styles.css’i başka klasöre koyup HTML’in yanında gibi bağlamak
Paylaşılan bir stil sayfası yerine her etiketi satır içi style ile doldurmak
Yeni başlayanlar için head daha netken alışkanlıkla body sonuna kocaman bir <style> bloğu dökmek
CSS dosyasını düzenleyip bağladığınızdan farklı bir HTML dosyasını yenilemek
Bu hataların her birinin aynı görsel belirtisi vardır: sayfa açılır, metin görünür, beklenen görünüm yoktur. Kuralları yeniden yazmadan önce bağlantıyı kontrol edin — çoğu zaman kural doğrudur, yükleme bozuktur.

Özet

CSS HTML’i biçimlendirir; HTML CSS’i satır içi, dahili veya harici yükleyebilir
Satır içi style küçük testler için iyidir, tüm siteler için değil
head içindeki dahili <style> tek dosyalık alıştırmaya uyar
Harici .css artı link rel="stylesheet" olağan paylaşılan yaklaşımdır
Doğru dosya yolları, CSS kurallarının kendisi kadar önemlidir
Stillerin ne kadar yeniden kullanılacağına uyan yöntemi tercih edin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil

HTML CSS

Bu Eğitimi Paylaş

CSS burada ne yapıyor?

Doğrudan yanıt

Üç yol bir bakışta

📊 CSS eklemenin üç yolu

Satır içi CSS (hatırlatma)

Satır içi CSS hatırlatması

Satır içi hâlâ ne zaman yardımcı olur

Head içinde dahili CSS

Head içinde dahili CSS

Dahili örneği okumak

link ile harici CSS

Harici stil sayfası bağlantısı

Harici CSS’in çalışması için ne doğru olmalı

Yöntem seçmek

Editörde alıştırma

Sayfaları stilsiz bırakan hatalar

Özet

🧠 Bilginizi Test Edin

Bilginizi Test Edin

📝 Talimatlar

🚧 Kurs Yakında Geliyor

Course Name

Uygun Olduğunda Bildirim Al

Şimdi Mevcut

Coming Soon

Course Name