CSS Nedir ?
CSS (Cascading Style Sheets), HTML ve JavaScript gibi, internet sayfalarının kodlanmasında kullanılan bir markup dilidir. Markup dilini ise şu şekilde açıklayabiliriz.
HyperText Markup Language: Tasarım ve şablon oluşturma amaçlı kullanılan ana bilgisayar dilidir. Web sayfalarını hazırlarken stil vermemizi sağlayan dildir.
CSS, bir HTML sayfasının nasıl görüntüleneceğini tarif eder. Bu tarifin içinde sayfadaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlarda, cihazlarda,ekran, kağıt ya da diğer ortamlarda nasıl değişeceği bilgisi de bulunur.
CSS’in Tarihçesi
HTML’in kullanılmaya başlanmasından sonra oluşan belgelerin stil düzenleme ihtiyacına çözüm bulmak için, Hakon Wium Lie tarafından tasarlamıştır.
İlk CSS taslağı 1994 yılında Chicago’da yapılan bir web konferansında sunulmuştur. Daha sonra 1995 yılında www-style adında bir e-posta listesi oluşturulmuştur. Bu e-posta listesi, CSS’in günümüzdeki haline gelmesinde önemli bir yere sahiptir.
CSS’i ilk destekleyen ticari tarayıcı ise 1996 yılında ortaya çıkan Internet Explorer v3 olmuştur. Devam eden süre zarfında CSS geliştirilmeye ve diğer tarayıcılar tarafından da desteklenmeye devam etmiştir.
CSS’in Oluşumu ve Kullanım Şekli
CSS dosyasını html sayfasında kullanabilmemiz için oluşturmuş olduğumuz style.css dosyasını ilk olarak html sayfamıza tanıtmamız gereklidir.
<link rel="stylesheet" type="text/css" href=".style dosyasının adresi">
Yukarıdaki kodu HTML sayfamızın içerisinde bulunan <meta> </meta> etiketleri arasına yerleştirdiğimizde style.css ve sayfa.html bağlantıları tamamlanmış olur. İlerleyen aşamada ise style dosyası üzerinden sitemizin logosuna boyut ve yerleşim yeri verelim.
#logo {
width: 150px;
position: absolute;
left: 20px;
top: 30px;
}Yukarıda ki satırları şu şekilde açıklayabiliriz;
- Sayfada, ‘logo’ isimli öğeyi bul
- Bulunan öğenin enini 150px olarak ayarla
- Sayfanın sol üst tarafına, kenardan 20 piksel ve yukarıdan 30 piksel mesafe kalacak şekilde yerleştir.
CSS kod yazma işleminizi yukarıda ki örnek ile kısaca gördük ve şimdi bunun HTML dosyası içerisinde bulunan resim kodlarına atama işlemi ni inceleyelim.
<img class"logo" src="/images/logo.png" alt"Logo">
Yukarıda HTML resim kodu ile birlikte atama işlemini yapmış olduk. Bu kod içerisinde bulunan etiketlerin anlamları ise;
- class=”stil dosyasında açılan etikete atama”
- src=”kullanılan resim için bağlantı linki”
- alt=”kullanılan resim için yapılan seo açıklaması”
şeklindedir.
Resim ekleme veya diğer etiket kullanımları hakkında bilgi edinmek için HTML kategorimizi inceleyebilirsiniz.
