CSS, Cascading Style Sheets Basamaklı Stil Şablonları anlamına gelir ve web sayfalarının tasarımını yapmak için kullanılır HTML'in aksine, CSS tasarım ve stil özelliklerini ayrı bir dosyada saklar Bu sayede bir web sitesinin tasarımı değiştirildiğinde tüm sayfaların tek tek güncellenmesine gerek kalmaz
CSS kullanımı, sayfa yükleme hızını artırır ve sitenin görünümünün daha profesyonel ve tutarlı olmasını sağlar CSS ile yazı tipi, renk, arkaplan rengi, kenarlık gibi birçok özellik belirlenebilir Ayrıca, CSS sayesinde site sahipleri, sitelerinde değişiklik yapmadan tasarımını güncelleyebilirler
CSS kullanmanın pek çok avantajı bulunmaktadır İlk olarak, CSS sayfa yükleme hızını artırır HTML'deki stil özellikleri tekrar tekrar yazıldığında, sayfa yükleme süresi uzar Ancak CSS kullanıldığında tüm stil özellikleri tek

CSS, Cascading Style Sheets (Basamaklı Stil Şablonları) anlamına gelir ve web sayfalarının tasarımını yapmak için kullanılır. HTML'in aksine, CSS tasarım ve stil özelliklerini ayrı bir dosyada saklar. Bu sayede bir web sitesinin tasarımı değiştirildiğinde tüm sayfaların tek tek güncellenmesine gerek kalmaz.

CSS kullanımı, sayfa yükleme hızını artırır ve sitenin görünümünün daha profesyonel ve tutarlı olmasını sağlar. CSS ile yazı tipi, renk, arkaplan rengi, kenarlık gibi birçok özellik belirlenebilir. Ayrıca, CSS sayesinde site sahipleri, sitelerinde değişiklik yapmadan tasarımını güncelleyebilirler.

CSS'in Avantajları

CSS kullanmanın pek çok avantajı bulunmaktadır. İlk olarak, CSS sayfa yükleme hızını artırır. HTML'deki stil özellikleri tekrar tekrar yazıldığında, sayfa yükleme süresi uzar. Ancak CSS kullanıldığında tüm stil özellikleri tek bir dosyada toplanır ve bu da sayfanın daha hızlı yüklenmesini sağlar. Bu, kullanıcıların siteyi daha hızlı ziyaret etmesine ve kullanıcı deneyimini artırmasına yardımcı olur.

Ayrıca, CSS ile sitenin tasarımı daha kolay bir şekilde düzenlenebilir. Sitede yer alan tasarımsal değişiklikleri yapmak için sadece birkaç satır CSS kodu eklemeniz yeterlidir. Bu, sitenin görsel olarak daha çekici olmasını sağlar ve kullanıcıların sitenize daha fazla ilgi göstermesine yardımcı olur.

CSS Temel Kullanımı

CSS, web sitelerindeki tasarımı düzenlemek için kullanılan bir web teknolojisidir. CSS kullanarak, yazı tipi, renk, arkaplan rengi, hizalama gibi tasarım özelliklerini değiştirebilirsiniz.

Örneğin, bir HTML sayfasında bulunan bir paragrafın yazı tipini değiştirmek istiyorsanız, aşağıdaki CSS kodlarını kullanabilirsiniz:

```cssp { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold;}```

Bu kodlar, "`p`" seçicisi ile belirlenen tüm paragrafların yazı tipini Arial olarak, yazı boyutunu 16 piksel olarak ve kalın yazı türü olarak ayarlar.

CSS kullanarak arkaplan rengi, yazı rengi gibi diğer tasarım özellikleri de belirlenebilir. Ayrıca, seçiciler kullanarak belirli HTML öğelerine özel tasarım özellikleri de tanımlayabilirsiniz. Örneğin, aşağıdaki kod bloğu belirli bir `div` öğesinin arkaplan rengini mavi olarak ayarlar:

```cssdiv#navbar { background-color: blue;}```

CSS kullanmanın en büyük avantajı, aynı tasarım değişikliklerini tüm sayfalarınızda tek bir CSS dosyasıyla yapabilmenizdir. Bu, tasarım değişiklikleri yapıldığında tüm sayfalarınızı tek tek güncelleme ihtiyacını ortadan kaldırır ve site yönetimini çok daha kolay hale getirir.

Tabloları, listeleri ve diğer HTML öğelerini de CSS kullanarak tasarlayabilirsiniz. Örneğin, bir `ul` listesi için aşağıdaki kodları kullanarak, başlığın altındaki madde işaretlerinin rengini kırmızı olarak ayarlayabilirsiniz:

```cssul { list-style: none;}

ul li:before { content: "•"; color: red; padding-right: 5px;}```

Bu kodlar, "`ul`" seçicisi ile belirlenen listelerdeki madde işaretlerinin görünmemesini ve "`ul li:before`" seçicisi ile belirlenen madde işaretlerinin renklerini kırmızı olarak ve 5 piksel sağ boşluk vererek ayarlar.

CSS kullanarak web sitenizin tasarımını sadece birkaç satır kodla değiştirmeniz mümkündür. CSS'in temel kullanımı hakkında daha fazla bilgi için ücretsiz çevrimiçi kaynaklardan yararlanabilirsiniz.

CSS Sintaksı

CSS, web tasarımında kullanılan önemli bir araçtır ve birçok avantajı bulunmaktadır. Ancak CSS kodlarını yazmak için belirli bir syntax veya yazım kurallarına uyulması gerekmektedir. CSS kodu, bir seçici ve bir deklarasyondan oluşmaktadır. Seçici, belirlenmiş HTML öğesi veya öğelerini seçmek için kullanılırken, deklarasyon ise seçilmiş öğelerin belirli özelliklerini açıklamak için kullanılır.

CSS kodları süslü parantezler içinde yazılmalıdır ({ }). Seçici, özellik ve değer arasında noktalı virgüllerle ayrılmalıdır. Örneğin, şu kod bloğu bir HTML belgesindeki tüm "h1" öğelerine uygulanacak renk ve yazı tipini belirler:

Bu kod bloğunda, "h1" öğeleri seçicidir. "style" özelliği, belirtilen özellik ve değerleri içerir. Sırasıyla, özellik "color" ve değer "red" belirlenirken, özellik "font-family" ve değer "Arial" belirlenir.

Birden fazla CSS özelliği, istenen seçiciyi kapsayan bir blok içinde tanımlanabilir ve farklı öğeler için ayrı bloklar oluşturulabilir. Test edilmesi gereken farklı özellikler ve değerleri deneyerek öğrenebilirsiniz.

CSS kodları, HTML belgesinden ayrı bir dosyada da saklanabilir. Bu, tasarım değişiklikleri yapmak istediğinizde daha fazla kolaylık sağlar. İlgili HTML belgesinde, CSS dosyasına yönlendirmek için bir bağlantı etiketi oluşturmanız gerekir.

Uygun bir syntax kullanarak CSS kodlarını yazmak, web sayfanızdaki tasarım değişikliklerini kolaylaştıracaktır. CSS ile yazım ve seçici örnekleri hakkında daha fazla bilgi edinmek için internette bulabileceğiniz kaynakların yer aldığı birçok kaynak mevcuttur.

Örnek CSS Kodu

Örnek CSS kodu, bir HTML dosyasından belirli bir öğeye ait CSS değişikliklerinin nasıl yapılacağını öğrenmek isteyenler için önemli bir örnektir. Örneğin, bir HTML dosyasında bir başlığın rengini değiştirmek istediğinizi varsayalım. Bunu yapmak için aşağıdaki CSS kodlarını kullanabilirsiniz:

HTML Kodu	CSS Kodu
<h1>Başlık</h1>	h1 { color: red; }

Yukarıdaki kodlar, h1 öğesi için renk özelliğini kırmızı olarak ayarlar. Bu kodu kullanarak, tüm h1 öğelerinin rengini kolayca değiştirebilirsiniz. Örneğin, renk yerine arkaplan rengini değiştirmek için background-color özelliğini kullanabilirsiniz:

HTML Kodu	CSS Kodu
<h1>Başlık</h1>	h1 { background-color: yellow; }

Bu örnekler, küçük bir HTML dosyasında yapılan değişiklikler için kullanılabilir. Daha büyük bir web sitesinde, sayfaların ve öğelerin sayısı arttıkça, CSS dosyaları çok daha kullanışlı hale gelir. Tüm site genelinde yapılan tek bir değişiklik, birkaç dosyayı aynı anda değiştirmek yerine tek bir CSS dosyasında yapılabilir. Bu, sitenin tasarımının yönetimini kolaylaştırır.

CSS Dosyası Ekleme

CSS dosyası, HTML dosyalarıyla aynı klasöre koyulduğunda, HTML kodlarında CSS kodlarını yazmak yerine CSS dosyasının adını kullanarak, kodlar daha düzenli ve anlaşılır hale getirilir. Bir HTML dosyasına CSS dosyası eklemek için <link> etiketi kullanılır. Bu etiket <head> etiketi içinde kullanılır. CSS dosyasının bağlantısı için kullanılan özellikler şunlardır:

Özellik	Açıklama
href	CSS dosyasının bulunduğu dizinin adı ve CSS dosyasının adı
type	Belge türünü tanımlayan MIME tipi
rel	Belgenin yardım görünüm için bir link olduğunu belirtir

Örneğin, CSS dosyasının adı stil.css ve HTML dosyasının adı index.html ise, CSS dosyası aşağıdaki gibi eklenir:

<!DOCTYPE html><html>  <head>    <title>Sayfa Başlığı</title>    <link href="stil.css" type="text/css" rel="stylesheet">  </head>  <body>    <p>Sayfanın içeriği...</p>  </body></html>

Bu şekilde, HTML kodları ve CSS kodları kolaylıkla okunabilir ve güncellenebilir hale getirilir. Ayrıca, CSS dosyası değiştirildiğinde tüm sayfaların güncellenmesine gerek kalmadan, tüm sayfalarda yapılan değişiklikler etkili hale gelir.

CSS Seçicileri

CSS, HTML öğelerine stil uygulamak için kullanılabilir. Bazı öğelerin stillerinin değiştirilmesi gerekebilir. Örneğin, bir bölümün arkaplan rengini değiştirmek isteyebilirsiniz.

CSS seçicileri, stilin belirli HTML öğelerinde nasıl uygulanacağını belirlemek için kullanılır. Örneğin, belirli bir <p> etiketi için bir stil tanımlayabilirsiniz. Veya bir sınıf adı veya bir öğenin kimliği gibi özelliklerine göre seçebilirsiniz. Ayrıca, CSS seçicileri ile bir öğe içindeki diğer öğeler üzerinde de seçim yapabilirsiniz.

Örneğin, <div> etiketi içindeki <p> etiketlerinin seçilmesi gerekiyorsa, aşağıdaki seçici kullanılabilir:

Seçici	Açıklama
<div> <p>	<div> etiketinin içindeki <p> etiketlerini seçer.

Ayrıca, CSS seçicileri, belirli öğelerin durumuna göre seçim yapmanıza olanak tanır. Örneğin, bir öğenin "ilklere" sahip olup olmadığını veya "zenginleştirilmiş" içerikleri seçmenizi sağlar.

CSS seçicileri öğrenmek, web sayfanızın tam kontrolünü elinde tutmanızı sağlar. Hem HTML öğeleri hem de CSS seçicileri kullanarak sitenizde yer alan öğelerin tasarımsal değişikliklerini yapabilirsiniz.

CSS İleri Seviye Kullanım

CSS temel kullanımının ötesinde, CSS ile birçok gelişmiş konu da incelenebilir. Bunlardan ilki navbar tasarımıdır. CSS kullanarak bir navbar tasarlamak oldukça kolaydır ve sayfanın kullanıcı deneyimini önemli ölçüde artırabilir.

Grid sistemleri ve animasyonlar da CSS ile gerçekleştirilebilir. Grid sistemleri, sayfa düzeninin belirlenmesine yardımcı olurken animasyonlar sayfaları daha canlı hale getirir ve ziyaretçilerin dikkatini çeker.

Son olarak, CSS ile medya sorguları kullanmak farklı ekran boyutları için farklı stil tanımlamaları yapmayı mümkün kılar. Bu, mobil cihazlar gibi küçük ekranlarda bile sayfanın düzgün görüntülenmesini sağlar.

• Navbar tasarımı için örnek kodlar ve örneğin nasıl tasarlandığı ayrıntılı bir şekilde açıklanmaktadır.
• Grid sistemleri ve animasyonlar örnekleri ile açıklanırken kod yapıları da konular açıklanıyor.
• Medya sorguları kullanımı örnekler ile birlikte anlatılır.

CSS ileri seviye kullanım, web tasarımcılar için oldukça faydalı bir konudur. Bu konulara hakim olan web tasarımcıları, daha kullanıcı dostu ve modern siteler tasarlayabilirler.

Navbar Tasarımı

Navbar, web sayfalarında yer alan gezinme menüleridir. Navbarların tasarımı, web sayfasının kullanılabilirliği açısından oldukça önemlidir. CSS kullanarak navbar tasarımı yapmak oldukça kolaydır.

Öncelikle, HTML kodlarımızda bir navbar oluşturmamız gerekiyor. Bunun için