Merhaba,

Bu yazı ile birlikte yeni bir dil öğrenmeye başlıyoruz. Cascading Style Sheets kısaltması CSS, web sayfamızın stilini oluşturur. HTML tarafında kullandığımız her şeyin, rengini, fontunu, boyutunu, aralık boşluklarını, pozisyonunu, kısaca görsel olarak yapılacak düzenlemelerin tamamını oluşturmamızı sağlar diyebiliriz.

CSS Neden Var?

Web kullanımı yaygınlaştıkça web sitesi sahiplerinin görünüm açısından daha iyi olma gereksinimleri başladı. Sadece HTML kullanılarak yapılan bir web sitesi görsel açıdan yetersiz görünmeye başladı. Görsel biçimlendirmeler basit HTML etiketleri tarafından sağlanıyordu. <center> , <b> , <i> ve benzeri biçimlendirme etiketleriyle konum ve biçim gibi özellikler verilebiliyordu.

Web sitesinin ana düzeni de önceden tablo etiketleriyle yapılırdı. Çünkü tablolar sayfa düzenini oluştururken bölümlendirme imkanı sağlıyordu.

Ancak bu şekilde bir kullanım uygun değildi çünkü:

  • HTML Tabloları çok fazla kod yazımı gerektirir.
  • Kullanım amacına uygun değildi çünkü tablolar veri listeleme için kullanılması gerekir.
  • Görünümde değişiklik yapmak istediğimizde komple kod yapısını değiştirmemiz gerekirdi.

Bu ve başka nedenlerden ötürü tablo kullanımı bugünün teknolojisinde web sayfası düzeni için tercih edilen yöntemlerden biri asla değildir.

CSS Nedir?

Cascading Style Sheets yani Basamaklı Stil Şablonu açılımına sahip olan CSS, işaretleme dillerine (HTML – XML) stil özellikleri vermeye yarar. Bir HTML belgesi ile ilişkilendirmesi yapılmadığı sürece CSS tek başına bir anlam ifade etmez.

CSS Nasıl Çalışır?

CSS kodu yazılırken önce etki edilecek HTML ögesi seçilir. Sonra ögeye etki edilecek özellik belirlenir ve o özelliğin değeri yazılır.

p { color: red; }

Örnekte <p> etiketiyle yazılan yazıların rengini kırmızı yapmasını söyledik.

 CSS Kodları Nereye Yazılır?

Daha önce boş bir not defteri sayfasını doldurup, .html uzantısıyla kaydedip HTML dosyaları elde ettik. Dolayısı ile HTML’i nereye yazacağımızı biliyoruz. CSS kodlarını HTML dosyamız ile ilişkilendirmek için 3 farklı yönteme sahibiz:

1) Özellik Olarak CSS

CSS kodumuzu doğrudan HTML kod parçacığımızın içerisine style özelliği kullanarak yazabiliriz.

<p style="color: red;">Sadece bu yazı kırmızı olacak.</p>

Görünümü:

Sadece bu yazı kırmızı olacak.

Bu kullanımda, örnekte yazdığımız gibi, yalnızca kullandığımız etikete etki eder.

2) <head> Bölümünde CSS

HTML’de sayfamız ile ilgili bir çok bilgi ve özelliği taşıyan <head> </head>etiketlerimiz arasında CSS kodları yazarak, tüm sayfaya etki edecek kodlar da yazmamız mümkün.

<html>
  <head>
    <title>CSS Örneği</title>
    <style type="text/css">
      p { color: red; }
    </style>
  </head>
  <body>
    <p>Bu sayfada kullanılacak bütün paragraf etiketleri kırmızı olacak.</p>
  </body>
</html>

Örnek kodumuzda sayfamızın üstüne <p> etiketimizin kırmızı renkte olmasını söyledik. Böylelikle <body> içerisinde kullanılacak olan bütün paragraf etiketli yazılarımız kırmızı renkte olacaktır.

3) CSS Doyasını Çekmek

Daha önce HTML yazımızda <img> etiketi ile sayfamıza görsel çekmiştik. <img> etiketimizin src özelliğini kullanarak görsel dosyamızın konumunu belirterek sayfa içerisinde görseli kullanmıştık. Sayfalarımıza stil vermek için oluşturabileceğimiz CSS dosyalarını da dilediğimiz HTML sayfalarına çekebiliriz.

Görsel çekme işleminde biz sayfa arayüzünde kullanacağımız bir içerik çekmiş olduğumuz için <body> içerisinde kullanıyorduk. Fakat CSS kodlarımız sayfa içerisinde kullandığımız bir içerik değil sayfamıza özellik veren öğelerdir. Dolayısı ile <head> içerisine çekmemiz gerekir.

<link rel="stylesheet" type="text/css" href="stil.css">

Oluşturduğumuz .css dosyamızı .html dosyamız ile aynı dizine kaydedip, HTML sayfamızın <head> bölümüne yukarıdaki kodu yazdığımızda, CSS dosyamızda yazdığımız stil özellikleri HTML dosyamıza uygulanır.

Şimdi boş bir not defteri sayfasına aşağıdaki kodları yazalım:

p { color: red; }

Dosyayı stil.css ismi ve uzantısıyla kaydedelim. Ardından bir boş not defteri sayfası daha açıp aşağıdaki kodları yazalım:

<html>
  <head>
    <title>CSS Dosyadan Çekme</title>
    <link rel="stylesheet" type="text/css" href="stil.css">
  </head>
  <body>
    <p>Bu sayfadaki tüm paragraflar kırmızı olacak.</p>
  </body>
</html>

Dosyayı sayfa.html ismi ve uzantısıyla CSS dosyamızla aynı klasörün içine kaydedelim. HTML sayfamızı web tarayıcımızda çalıştırdığımızda yazımızın kırmızı renkte olduğunu görürüz. Bu stil özelliği HTML kodlarımızın içerisinde yoktu ancak HTML sayfamıza çektiğimiz CSS dosyasının içerisinde paragrafı kırmızı yapan kodları yazdığımız için sayfamıza bu şekilde bir stil verdi.

Neden sadece kullanacağım etikete stil özelliği vermek yerine komple sayfaya vereyim?

Aslında bu sorunun cevabı oldukça basit. Web siteleri tek bir HTML sayfasından oluşmaz. Birden çok HTML sayfasından oluşur. Ve tasarımsal bütünlük olması açısından tüm sayfalar benzer renk, font ve düzenleri kullanır. Aynı kodları tekrar tekrar her bir etiketimize veya her bir sayfamıza yazmak zor bir iştir. Öte yandan ileride bir değişiklik yapmak istediğimizde her sayfayı tek tek düzenlememiz gerekir. Ancak her sayfaya tek bir CSS dosyasından stil özelliklerini çekiyor olursak sadece CSS dosyamızı düzenleyerek tüm sayfalarımızın stil özelliklerini değiştirme imkanımız olur.

Sadece tek sayfada farklı şekillerde stil vermek istiyorsak ne yapmamız gerekiyor?

CSS kodlarının HTML’de bir öncelik sırası vardır.

Eğer sayfamız içerisindeki bir paragrafa <p style="color:blue;"> şeklinde bir stil özelliği tanımlarsanız yazınız mavi görünecektir. Çünkü etiket düzeyine kadar özel bir stil tanımlamışsınızdır.

İkinci öncelik, o sayfa içerisinde <head> bölümüne <style> etiketiyle yazdığınız stil kodlarıdır. Sayfaya çektiğiniz bir CSS dosyası varsa fakat sonrasında sadece o sayfa için <style> etiketiyle stil tanımlaması yaptıysanız bu stil özelliklerini kullanacaktır.

Eğer o sayfaya özel stil kodları yoksa, etiket düzeyinde de stil özellikleri tanımlanmamışsa, yalnızca sayfa içerisine çekilen CSS dosyasının stil özelliklerini uygular.

Bu yazı ile birlikte HTML + CSS olmak üzere 2 ayrı dosya ile çalışmaya başladık. Buradan sonra Not Defteri uygulaması kullanarak devam edebilirsiniz ancak kullanım kolaylığı açısından tüm çalışmalarımda kullandığım Sublime Text uygulamasını yükleyip kullanmanızı tavsiye ederim. Dosya Tarayıcısı ve Sekmeli Çalışma imkanı sayesinde çok daha rahat çalışma yapabilirsiniz.