Bu temel yapı, CSS ile şekillendirmeye başlamak için sağlam bir temel oluşturur.

CSS ile Temel Şekillendirme ve Düzen

HTML yapımızı kurduktan sonra, sıra CSS kullanarak bu yapıya hayat vermeye gelir. Renkler, yazı tipleri, boyutlar ve özellikle öğelerin ekranda nasıl konumlanacağı, tamamen CSS ile kontrol edilir.

Genel Stil Sıfırlamaları ve Temel Ayarlar

Her tarayıcının varsayılan stil kuralları farklılık gösterebilir. Bu tutarsızlıkları gidermek ve kendi stilimize temiz bir başlangıç yapmak için genellikle genel stil sıfırlamaları (reset CSS) uygulanır.

/ style.css /

/ Genel Sıfırlama /
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; / Tüm elemanların kutu modelini değiştirir /
}

/ Temel Gövde Stilleri /
body {
    font-family: 'Arial', sans-serif; / Varsayılan yazı tipi /
    line-height: 1.6; / Satır yüksekliği /
    color: #333; / Varsayılan metin rengi /
    background-color: #f4f4f4; / Arka plan rengi /
}

/ Bağlantı Stilleri /
a {
    text-decoration: none; / Bağlantı alt çizgilerini kaldırır /
    color: inherit; / Bağlantı rengini üst öğeden miras alır /
}

/ Liste Stilleri /
ul {
    list-style: none; / Liste işaretlerini kaldırır /
}

{ margin: 0; padding: 0; box-sizing: border-box; }: Bu evrensel seçici, tüm HTML öğelerinin varsayılan kenar boşluklarını (margin) ve iç boşluklarını (padding) sıfırlar. box-sizing: border-box; özelliği ise, bir öğenin genişlik ve yüksekliğinin padding ve border değerlerini de içermesini sağlar. Bu, düzen hesaplamalarını çok daha kolay hale getirir.
* body stilleri: Sayfanın genel yazı tipini, satır yüksekliğini, metin rengini ve arka plan rengini belirler.
* a stilleri: Bağlantıların varsayılan alt çizgilerini kaldırır ve rengini üst öğeden miras almasını sağlar, böylece daha tutarlı bir görünüm elde edilir.
* ul stilleri: Liste öğelerinin varsayılan madde işaretlerini kaldırır, navigasyon menüleri için temiz bir başlangıç sağlar.

Header Kapsayıcısı (Container) Oluşturma

Şimdi main-header ve container sınıflarımıza stil vererek başlık bölümünün genel görünümünü ve düzenini oluşturalım. Flexbox, modern web düzenleri için en güçlü ve esnek CSS özelliklerinden biridir ve başlık düzenimizi oluşturmak için idealdir.

/ style.css devamı /

.main-header {
    background-color: #ffffff; / Beyaz arka plan /
    padding: 15px 0; / Üst ve alt iç boşluk /
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); / Hafif bir gölge efekti /
    width: 100%; / Tam genişlik /
    z-index: 1000; / Diğer öğelerin üzerinde kalmasını sağlar /
    position: relative; / Z-index'in çalışması için gerekli /
}

.container {
    max-width: 1200px; / Maksimum genişlik /
    margin: 0 auto; / Ortalamak için kenar boşlukları /
    padding: 0 20px; / Sağ ve sol iç boşluk /
    display: flex; / İç öğeleri Flexbox ile düzenle /
    justify-content: space-between; / Öğeleri iki yana yasla (logo sol, menü sağ) /
    align-items: center; / Öğeleri dikeyde ortala /
}

* .main-header:
* background-color: #ffffff;: Başlık için beyaz bir arka plan rengi ayarlar.
* padding: 15px 0;: Üstte ve altta 15 piksel iç boşluk bırakır, sağda ve solda iç boşluk bırakmaz.
* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);: Başlığa hafif bir alt gölge efekti ekleyerek sayfanın geri kalanından ayrılmasını sağlar.
* width: 100%;: Başlığın tarayıcı penceresinin tam genişliğini kaplamasını sağlar.
* z-index: 1000; position: relative;: Bu özellikler, başlığın diğer sayfa öğelerinin üzerinde görünmesini sağlamak için kullanılır, özellikle kaydırılabilir (sticky) veya sabit (fixed) bir başlık oluşturulduğunda önemlidir. position özelliği olmadan z-index genellikle çalışmaz.
* .container:
* max-width: 1200px;: İçeriğin maksimum genişliğini 1200 piksel ile sınırlar. Bu, büyük ekranlarda içeriğin çok fazla yayılmasını engeller.
* margin: 0 auto;: Öğeyi yatayda ortalar. Üst ve alt kenar boşlukları 0, sağ ve sol kenar boşlukları otomatik olarak ayarlanır.
* padding: 0 20px;: İçeriğin ekranın kenarlarına çok fazla yaklaşmasını önlemek için sağda ve solda 20 piksel iç boşluk bırakır.
* display: flex;: Bu, .container içindeki doğrudan çocuk öğelerini (bu durumda .logo ve .main-nav) bir Flex konteyneri haline getirir. Bu, öğeleri kolayca hizalamak ve dağıtmak için Flexbox özelliklerini kullanabileceğimiz anlamına gelir.
* justify-content: space-between;: Flex konteyneri içindeki öğeleri ana eksen boyunca (varsayılan olarak yatayda) dağıtır. space-between değeri, ilk öğeyi başlangıca, son öğeyi sona yerleştirir ve aralarındaki boşluğu eşit şekilde dağıtır. Bizim durumumuzda, logo sola ve navigasyon menüsü sağa hizalanacaktır.
* align-items: center;: Flex konteyneri içindeki öğeleri çapraz eksen boyunca (varsayılan olarak dikeyde) ortalar. Bu, logo ve navigasyon menüsünün dikey olarak aynı hizada olmasını sağlar.

Bu adımlarla, başlık bölümümüzün genel görünümünü ve öğelerinin nasıl konumlanacağını belirledik.

Logo ve Marka Alanı

Logonuz, sitenizin kimliğinin merkezindedir. Hem görsel olarak çekici hem de doğru boyutlandırılmış olmalıdır.

Logo Ekleme ve Şekillendirme

HTML’de zaten bir etiketi ile logomuzu eklemiştik. Şimdi bu logoya CSS ile stil verelim.

/ style.css devamı /

.logo img {
    max-height: 40px; / Logonun maksimum yüksekliği /
    width: auto; / Genişliği otomatik ayarla, oranları koru /
    display: block; / img elemanının altındaki boşluğu kaldırır /
}

* .logo img:
* max-height: 40px;: Logonun maksimum yüksekliğini 40 piksel olarak ayarlar. Bu, logonun çok büyük olmasını engellerken, küçük ekranlarda gerektiğinde küçülmesine izin verir.
* width: auto;: Genişliği otomatik olarak ayarlar, böylece resmin orijinal en boy oranı korunur. Bu çok önemlidir; aksi takdirde logo bozulabilir.
* display: block;: etiketi varsayılan olarak inline-block bir öğedir. block olarak ayarlamak, bazı tarayıcılarda resmin altında görünen fazladan boşluğu kaldırmaya yardımcı olabilir.

Eğer logonuz sadece metin tabanlıysa (örneğin, sadece şirket adınız), etiketi yerine bir

veya etiketi kullanabilir ve buna stil verebilirsiniz. Ancak semantik olarak, ana sayfa başlığı için

kullanmak daha doğru olabilir. Eğer başlıkta hem logo hem de metin bazlı bir site adı varsa, logo görselini gizleyip sadece metni gösteren bir erişilebilirlik çözümü de düşünebilirsiniz. Bu örnekte, görsel bir logo kullandığımızı varsayıyoruz.

Navigasyon Menüsü Oluşturma

Navigasyon menüsü, kullanıcıların sitenizdeki farklı bölümlere kolayca ulaşmasını sağlar. Temiz, okunaklı ve duyarlı bir menü, iyi bir kullanıcı deneyimi için kritik öneme sahiptir.

Temel Navigasyon Yapısı

HTML’de main-nav sınıfına sahip bir