HTML ve CSS Birlikte Kullanımı: Web Tasarımında Temel Uygulamalar

18 Şubat 2026 10 dk okuma Deniz Karay

HTML ve CSS birlikte kullanımı, modern web sitelerinin temelini oluşturan ve dijital dünyadaki her bir sayfanın hem iskeletini hem de estetiğini belirleyen en kritik süreçtir; bu iki teknolojinin uyumu, kullanıcı deneyimini iyileştirmek ve erişilebilir içerikler üretmek için vazgeçilmez bir öneme sahiptir. İnternet üzerinde gördüğünüz her görsel, metin hizalaması ve renk paleti, bu iki dilin birbiriyle nasıl konuştuğunun bir sonucudur. HTML (HyperText Markup Language), bir web sayfasının hangi parçalardan oluşacağını belirleyen bir yapı taşıyken; CSS (Cascading Style Sheets), bu parçaların nasıl görüneceğini, nerede duracağını ve hangi renklerde olacağını belirleyen tasarım dilidir. Bu eğitim makalesinde, kodlama dünyasına yeni adım atanlar için bu iki devin nasıl bir araya geldiğini, temel uygulama yöntemlerini ve profesyonel tasarımın püf noktalarını adım adım inceleyeceğiz.

🎯 Bu Derste Öğrenecekleriniz

HTML ve CSS arasındaki temel farkları ve birbirlerini nasıl tamamladıklarını kavrayacaksınız.
CSS kodlarını HTML dosyasına bağlamanın üç farklı yöntemini (Satır içi, Dahili, Harici) öğreneceksiniz.
CSS seçicileri (Selectors) kullanarak belirli HTML öğelerini nasıl hedefleyeceğinizi anlayacaksınız.
Kutu Modeli (Box Model) kavramını öğrenerek sayfa düzeni oluşturmayı keşfedeceksiniz.
Responsive (duyarlı) tasarımın temelleri olan medya sorgularına giriş yapacaksınız.

📌 Kısa ve Net Bilgiler

HTML: Sayfanın iskeletidir (Başlıklar, paragraflar, listeler).
CSS: Sayfanın kıyafetidir (Renkler, yazı tipleri, yerleşim).
Bağlantı: En sağlıklı yöntem harici bir .css dosyasını <link> etiketiyle çağırmaktır.
Seçiciler: Nokta (.) sınıflar (class) için, kare (#) kimlikler (id) için kullanılır.

İçerik göster

Web Tasarımının İki Dev İsmi: HTML ve CSS Nedir?

Web geliştirme dünyasına giren herkesin karşısına çıkan ilk iki kavram HTML ve CSS’dir. Bu iki teknolojiyi anlamak için bir bina inşaatı benzetmesi yapmak oldukça açıklayıcıdır. HTML, binanın tuğlaları, kolonları ve odalarının yerleşimidir. Yani binanın kaç katlı olacağı, pencerelerin nerede duracağı ve kapıların konumu HTML ile belirlenir. Ancak bu bina henüz gri betonlardan ibarettir. Binanın dış cephesinin rengi, pencerelerin cam kalitesi, odaların duvar kağıtları ve bahçe düzenlemesi ise CSS’dir.

HTML, içeriği anlamlandırmak için etiketler (tags) kullanır. Örneğin, bir metnin başlık olduğunu belirtmek için <h1> etiketi kullanılır. CSS ise bu <h1> etiketinin renginin mavi, yazı boyutunun 32 piksel ve yazı tipinin “Arial” olması gerektiğini tarayıcıya söyler. Bu iki dilin ayrıştırılmasına “İçerik ve Sunumun Ayrılması” (Separation of Concerns) denir. Bu prensip sayesinde, web sitenizin içeriğine dokunmadan sadece CSS dosyasını değiştirerek tüm tasarımınızı baştan aşağı yenileyebilirsiniz.

ℹ️ Bilgi: HTML tek başına bir web sayfası oluşturabilir ancak bu sayfa 1990’ların başındaki düz metin belgelerine benzer. CSS olmadan modern, kullanıcı dostu ve profesyonel bir arayüz oluşturmak imkansızdır.

CSS Kodlarını HTML İçine Dahil Etme Yöntemleri

CSS kodlarını bir web projesine dahil etmenin üç ana yolu vardır. Her yöntemin kendine göre avantajları ve kullanım alanları bulunur. Profesyonel projelerde genellikle harici yöntem tercih edilse de, diğerlerini bilmek hata ayıklama (debugging) süreçlerinde size büyük kolaylık sağlar.

1. Satır İçi (Inline) CSS

Satır içi CSS, doğrudan HTML etiketinin içine style niteliği (attribute) eklenerek yazılır. Bu yöntem sadece o spesifik etiketi etkiler. Genellikle hızlı testler yapmak veya çok özel bir durumu çözmek için kullanılır, ancak büyük projelerde yönetimi zor olduğu için tavsiye edilmez.

Satır İçi CSS Örneği

<p style="color: red; font-size: 18px;">Bu paragraf kırmızı ve 18px boyutundadır.</p>

2. Dahili (Internal) CSS

Dahili CSS, HTML belgesinin <head> bölümünde <style> etiketleri arasına yazılır. Bu yöntem, sadece o HTML dosyasındaki öğeleri etkiler. Tek sayfalık basit web siteleri için uygundur.

Dahili CSS Örneği

<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h2 {
      color: darkblue;
    }
  </style>
</head>

3. Harici (External) CSS

En profesyonel ve yaygın yöntem budur. CSS kodları .css uzantılı ayrı bir dosyada tutulur ve HTML sayfasına <link> etiketiyle bağlanır. Bu sayede bir CSS dosyasını yüzlerce farklı HTML sayfasında kullanabilir, tek bir değişiklik ile tüm siteyi güncelleyebilirsiniz.

Harici CSS Bağlantısı

<!-- HTML Dosyası İçinde -->
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Yöntem	Kullanım Yeri	Bakım Kolaylığı
Satır İçi	Tekil öğeler	Çok Zor
Dahili	Tek sayfalık projeler	Orta
Harici	Çok sayfalı profesyonel siteler	Çok Kolay

CSS Seçicileri: Hangi Öğeyi Şekillendireceğiz?

CSS yazarken tarayıcıya hangi HTML öğesini hedeflediğimizi söylememiz gerekir. Bunu yapmak için “seçicileri” (selectors) kullanırız. Seçiciler, HTML yapısındaki belirli parçaları yakalamamıza olanak tanır. En temel seçiciler şunlardır:

Etiket Seçici: Doğrudan HTML etiket ismini kullanır (Örn: p, h1, div).
Sınıf (Class) Seçici: Birden fazla öğeye uygulanabilir. Başına nokta (.) konularak yazılır.
Kimlik (ID) Seçici: Sadece tek bir öğeye özeldir. Başına kare (#) konularak yazılır.

📖 Seçici Örneği

HTML tarafında: <p class=”mavi-metin”>Merhaba</p>
CSS tarafında: .mavi-metin { color: blue; }
Bu sayede sadece ‘mavi-metin’ sınıfına sahip paragraflar mavi renkte görünecektir.

⚠️ Dikkat: Bir sayfada aynı ID ismini sadece bir kez kullanmalısınız. Birden fazla öğeye aynı stili vermek istiyorsanız her zaman Class (Sınıf) seçicileri tercih edin.

Kutu Modeli (Box Model): Tasarımın Geometrisi

CSS’de her HTML öğesi aslında görünmez bir kutu içindedir. Sayfa düzenini (layout) anlamak için bu kutu modelini kavramak şarttır. Kutu modeli dört ana katmandan oluşur: Content, Padding, Border ve Margin.

Content (İçerik): Metin veya görselin bulunduğu en içteki alan.
Padding (İç Boşluk): İçerik ile kenarlık arasındaki boşluk.
Border (Kenarlık): Kutunun etrafındaki çizgi.
Margin (Dış Boşluk): Kutunun diğer öğelerle arasındaki mesafe.

Örneğin, bir butonun içindeki yazının buton kenarlarına çok yakın olmamasını istiyorsanız “padding” değerini artırmalısınız. Butonun diğer butonlardan uzak durmasını istiyorsanız “margin” değerini kullanmalısınız. Bu kavramlar, web tasarımında öğelerin birbirini ezmesini önler ve nefes alan, düzenli tasarımlar yapmanızı sağlar.

💡 İpucu: Geliştirici araçlarını (F12 tuşu) kullanarak tarayıcıda herhangi bir öğenin üzerine sağ tıklayıp “İncele” derseniz, o öğenin kutu modelini canlı olarak görebilir ve değerleri test edebilirsiniz.

Temel CSS Özellikleri ve Uygulamaları

HTML ve CSS’i birlikte kullanırken en sık başvuracağınız özellikler metin biçimlendirme ve renklerdir. Yazı tipi boyutunu ayarlamak için font-size, yazı tipini değiştirmek için font-family, metni hizalamak için ise text-align özellikleri kullanılır. Renkler için ise Hex kodları (#FFFFFF), RGB değerleri veya temel renk isimleri tercih edilebilir.

Temel Biçimlendirme Kodları

.ozel-kutu {
  width: 300px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

Yukarıdaki kod örneği, bir kutunun genişliğini belirler, arka planını açık gri yapar, ince bir kenarlık ekler ve kutuyu sayfada yatay olarak ortalar (margin: auto kullanımı). Bu tür küçük dokunuşlar, kullanıcıların sitenizde daha uzun süre kalmasını sağlayan profesyonel bir görünüm sunar.

Responsive Tasarım: Mobil Uyumluluk Neden Önemli?

Günümüzde internet trafiğinin yarısından fazlası mobil cihazlardan gelmektedir. Bu nedenle yazdığınız HTML ve CSS kodlarının hem büyük masaüstü ekranlarda hem de küçük telefon ekranlarında düzgün görünmesi gerekir. Buna Responsive Design (Duyarlı Tasarım) denir.

Responsive tasarımın kalbi Media Queries (Medya Sorguları) adı verilen tekniktir. Medya sorguları sayesinde, ekran genişliği belirli bir pikselin altına düştüğünde CSS kodlarınızın değişmesini sağlayabilirsiniz. Örneğin, masaüstünde yan yana duran üç sütunlu bir yapı, telefonda alt alta gelecek şekilde ayarlanabilir.

📖 Medya Sorgusu Örneği

Aşağıdaki kod, ekran genişliği 600 pikselden küçük olduğunda arka plan rengini değiştirir:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Pratik Yapma Zamanı

Öğrendiğiniz bu teorik bilgileri pekiştirmenin en iyi yolu küçük bir proje yapmaktır. Kendinize basit bir “Hakkımda” sayfası oluşturun. Bir HTML dosyası açın, içine bir başlık, bir resim ve bir paragraf ekleyin. Ardından bir CSS dosyası oluşturup bu başlığın rengini değiştirin, resmi yuvarlak hale getirin (border-radius özelliği ile) ve sayfaya güzel bir arka plan rengi verin. Kod yazarken hata yapmaktan korkmayın; programlama dünyasında en iyi öğrenme yöntemi hataları çözmektir.

✏️ Kendinizi Test Edin

HTML ve CSS arasındaki temel farkı bir cümleyle nasıl açıklarsınız?
Harici bir CSS dosyasını HTML’e bağlamak için kullanılan HTML etiketi nedir?
Kutu modelinde (Box Model) içerik ile kenarlık arasındaki boşluğa ne ad verilir?
Bir öğeye CSS’de ID seçicisi ile ulaşmak için hangi sembol kullanılır?
Responsive tasarımın en temel amacı nedir?

📝 Konu Özeti

Yapı ve Stil: HTML içeriği oluşturur, CSS ise bu içeriği görselleştirir.
Bağlantı Türleri: Harici CSS dosyaları sürdürülebilirlik için en iyi yöntemdir.
Hiyerarşi: CSS seçicileri sayesinde (Tag, Class, ID) sayfa öğeleri üzerinde tam kontrol sağlanır.
Düzen: Kutu Modeli (Box Model), öğelerin yerleşimini ve boşluklarını yönetir.
Uyumluluk: Medya sorguları ile web siteleri tüm cihazlara uyumlu hale getirilir.

Öğrendiklerinizi Pekiştirin

HTML ve CSS dünyası ucu bucağı olmayan bir deryadır. Bu rehberde öğrendiğiniz temel uygulamalar, sizi profesyonel bir web geliştiricisi yapma yolundaki ilk ve en sağlam adımınızdır. Bir sonraki adımda CSS Flexbox ve Grid gibi daha gelişmiş yerleşim tekniklerini öğrenebilir, ardından JavaScript ile sayfalarınızı hareketli hale getirebilirsiniz. Unutmayın, her büyük web sitesi bir zamanlar sadece boş bir HTML sayfasıydı. Bol bol pratik yapın ve kendi dijital dünyanızı inşa etmeye başlayın!