CSS Nedir?

Son güncelleme: 3 yıl önce

Bu yazıda css nedir, css nasıl kullanılır, css ne işe yarar, css ile neler yapılabilir, css örnek, css yazımı gibi başlıkları inceliyorum.

CSS yani Cascade Style Sheet, HTML‘e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir. HTML ile oluşturulan elemanlara stil vermeye yarar. Örneğin HTML içine eklediğimiz bir yazının rengini kırmızı yapmak istiyorsak bunu CSS ile gerçekleştiririz.

HTML Nedir?, HTML ile neler yapılabilir? makalemizde, HTML ile ilgili bilinmesi gereken tüm bilgilere değindik. HTML konusunu kavradıktan sonra, bir web sayfası için olmazsa olmaz olan HTML’in olmazsa olmazı CSS hakkında tüm bilinmesi gerekenleri yazımızın devamında okuyabilirsiniz.

Yazı içeriği

CSS Nedir?

CSS (Cascade Style Sheet) HTML elementlerini görsel açıdan (renk, yazı şekli, arka plan rengi, genişlik, yükseklik, pozisyon durumu vb) biçimlendirmemize imkan sağlar.

CSS, Basamaklı Stil Şablonları veya Basamaklı Biçim Sayfaları olarak da anılır.

HTML tek başına yazıldığında bir not belgesi gibi görünür. HTML elementlerine stil veren CSS’dir. HTML üzerine CSS nasıl uygulanır?, CSS nasıl yazılır?, CSS nasıl kullanılır? bunları inceleyelim.

CSS’in sahip olduğu seçiciler vardır. HTML etiketlerinde tanımladığımız seçici isimleriyle birlikte CSS kullanarak etiketleri biçimlendiririz. HTML elemana stil vermek için, CSS seçiciler kullanılır. Seçicilerin en çok kullanılanları id veya class ‘lardır. Bir diğer yöntem ise direkt olarak HTML içine CSS değerleri yazmaktır. CSS seçiciler hakkında bilgi sahibi olmak için buraya tıklayın.

CSS dosyaları .css uzantısı ile biter.

CSS bir web sayfasının görselleştirme katmanıdır. CSS, günümüzde internet sitelerinin bu kadar yaygın bir şekilde kullanılabilir olmasına imkan sağlayan en önemli rollerden birini üstlenmiştir.

CSS Tarihçesi

HTML’in kullanılmaya başlanmasından sonra oluşan belgelerin stillendirilmesi ihtiyacına çözüm bulmak için, Hakon Wium Lie CSS’i tasarlamıştır.

İlk CSS taslağı 1994 yılında Chicago’da yapılan bir web konferansında sunuldu. Daha sonra 1995 yılında www-style adında bir e-posta listesi oluşturuldu. Bu e-posta listesi, CSS’in günümüzdeki haline gelmesinde önemli bir yere sahiptir.

Css’i ilk destekleyen ticari tarayıcı, 1996 yılında çıkan Internet Explorer v3 oldu. Ardından Netscape Navigator v4 de destek vermeye başladı.

Devam eden süre zarfında CSS geliştirilmeye ve CSS destekleyen tarayıcılar artmaya başladı.

CSS Nasıl Yazılır?

CSS nasıl yazılır, HTML’e CSS nasıl uygulanır bir kaç örnek ile görelim.

HTML:

HTML

<h1 id="sayfa-baslik">CSS DERSLERİ</h1>

<h2 id="alt-baslik">CSS Öğreniyorum</h2>

<h3 class="basliklar">CSS Nedir</h3>

<h3 class="basliklar">CSS Nasıl Yazılır</h3>

<h4 class="basliklar">CSS id ve class</h4>

<h5 style="color: #000; font-weight: bold;">HTML içinde CSS yazımı</h5>

CSS:

CSS

#sayfa-baslik{
   font-size: 24px;
   color: #333;
   border-bottom: 1px solid #333;
}

#sayfa-baslik{
   font-size: 20px;
   color: #f40;
   border-bottom: 1px solid #f40;
}

.basliklar{
   color: red;
   background: #ccc;
   text-align: center;
}

Yukarıdaki örneklerde göründüğü üzere h elementlerinin ilk ikisinde id diğerlerinde class özelliği bulunmakta. id özelliği sayfada sadece bir tane kullanılırken class özelliği birden fazla kullanılabilir.

.basliklar olarak tanımlanan stil değerleri bu değere sahip tüm elementlere uygulanır. HTML içine direkt olarak CSS yazımını ise h5 elementi örneğinde görebilirsiniz.

CSS Seçiciler

.class Örn: .deneme – Açıklama: class=”deneme” tüm elementleri seçer.
#id Örn: #deneme – Açıklama: id=”deneme” id elementini seçer.
* Örn: * – Açıklama: Tüm öğeleri seçer. (CSS 2)
element Örn: h1 – Açıklama: Tüm h1 elementleri seçer. (CSS 1)
element,element Örn: div,p -Açıklama: Tüm “div” elementlerini ve tüm “p” elementlerini seçer.
element element Örn: div a – Açıklama: “div” elementi içindeki tüm “a” elementlerini seçer.

Diğer CSS seçicileri ile ilgili detaylı bilgi edinmek için buraya tıklayın.

HTML İçinde CSS Dosyası Çağırma

Projemize eklediğimiz bir css dosyasını HTML içinden çağırmamız gerekir. Sayfa yüklendiği sırada tarayıcının css dosyasını da okuması gerektiği için, css’in bulunduğu yeri tarif etmemiz gerekmektedir.

HTML Nedir? makalemizde bahsettiğimiz gibi bu tür tanımlamalar HTML kodlarının head tagları arasına yazılmalıdır. CSS dosyasını çağırmak şöyle bir tanımlama yapılması gerekmektedir:

HTML

<link rel='stylesheet' href='CSS DOSYASININ BULUNDUĞU DİZİN' type='text/css' media='all' />

Eğer CSS kodlarını bir css dosyasına değilde direkt HTML dosyasının içine yazmak istersek, yine head tagları arasına şu şekilde bir yazım yapmamız gerekmektedir.

HTML

<style type="text/css">

#sayfa-baslik{
   font-size: 24px;
   color: #333;
   border-bottom: 1px solid #333;
}
#sayfa-baslik{
   font-size: 20px;
   color: #f40;
   border-bottom: 1px solid #f40;
}
.basliklar{
   color: red;
   background: #ccc;
   text-align: center;
}

</style>