Top

CSS Dersleri Bölüm 2 – ID ve Class ile CSS kullanımı

CSS Dersleri Bölüm 2 – ID ve Class ile CSS kullanımı

ID ve Class Seçicileri

HTML elementlerini biçimlendirmenin ötesinde CSS kendi seçicilerinizi id ve class olarak oluşturmanızı sağlar.

ID Seçici

ID seçici yegane tek bir element için stillendirme yapar.

HTML elementinin id özelliğinin değeri kullanılır ve css dosyasında ‘#’ değeri kullanılarak tanımlama yapılır ve biçimlendirilir css’te.

Örnek; menu id’sine sahip element için css yazımı;

#menu
{
text-align:center;
color:red;
}

ID’yi sayıyla başlatmayın Firefox’ta çalışmaz çünkü.

Class Seçici

Class seçici, html elementler grubunu biçimlendirmek için kullanılır. ID seçicisinin haricinde, class seçici birçok kez kullanılabilir.

Bu da sayılar ile başlamamalı çünkü Internet Explorer desteklememekte.

Aynı class ile belirli birçok HTML elementini şekillendirebilirsiniz.

HTML’nin class özelliğini kullanarak ve css’te başına nokta koyarak tanımlarsınız bu seçiciyi.

Örnekte merkez class’ına sahip bir css stilini göreceksiniz;

.merkez{text-align:center;}

Şunu da yapabilirsiniz class ile; sadece belirlediğiniz HTML elementlerinin class tarafından etkilenmesini sağlayabilirsiniz.

Mesela tüm p etiketlerine merkez class’ı uygulanır bu da hepsini merkeze alır tanımdan yola çıktığımızda.

p.center {text-align:center;}

 CSS Kullanımı

4 yol ile CSS’i kullanabilirsiniz;

  • Harici bir stil dosyası,
  • Dahili bir stil dosyası
  • Satır içi stili,
  • @import yöntemi ile stillendirme,

Harici stil dosyası

Harici stil dosyası stiller birçok sayfaya uygulandığında en ideali. Harici stil dosyasıyla tüm sitenin görünüşünü tek bir yerden değiştirebilirsiniz. Yalnız tüm sayfalar css dosyasına bağlanmak zorunda <link> etiketi ile head bölgesi içinde.

Örnek;

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

Harici stil dosyası herhangi bir text editor programında yazılabilir. HTML etiketleri içermez. “*.css” uzantısı ile kaydedilir.

Örnek;

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Özellik değeri ile sayılar/veriler arasında boşluk bırakılmaz IE’de çalışır fakat diğerlerinde çalışmaz.

Dahili stil dosyası

Tek bir belge ve yegane stil kullanıldığı zaman idealdir. HTML sayfasının head bölgesinde <style> etiketi kullanılarak tanımlanır.

Örnek;

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Satır içi stiller

Satır içi stil,  stil dosyasının avantajlarını sunum sırasında elinden alıyor bu yüzden idareli olarak kullanmalısınız.

style özelliğini kullanarak ilgili etiketin içinde kullanılarak tanımlanır. Ve herhangi bir css özelliğini içerebilir.

Örnek;

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Çoklu stil dosyası

farklı stil dosyalarında bazı özellikler aynı seçici için atanmışsa, değerler en belirgin yazılmış olan stil dosyasından alınır.

Örneğin;

h3 seçicisi için,

h3
{
color:red;
text-align:left;
font-size:8pt;
}

ve bir satır içi stil dosyasındaki h3 seçicisi için de,

h3
{
text-align:right;
font-size:20pt;
}

bu sayfanın h3 stili

color:red;
text-align:right;
font-size:20pt

böyle olacaktır.

Çoklu stiller bir taneye

Stiller;

  • HTML elementi içinde
  • head bölgesinde
  • bir harici dosyada tanımlanır

İpucu; bir tek html belgesine çoklu stil dosyaları aktarılabilir.

Sıralama

Bir html stili için çoklu atamaya nasıl bir stil uygulanacak peki?

Genel olarak konuşursak tüm stiller sanal olan yeni bir stil dosyasına aşağıdaki kurallar ile ve dorduncusu en yüksek dereceye sahip olarak uygulanır;

  • tarayıcı varsayılanı
  • harici dosya,
  • dahili stil dosyası
  • satır içi dosya,

Yani satıriçi olan en yüksek dereceye sahip. Yani ezip geçen stil kendileri.

Not; Dahili stil dosyasından sonra bağlanırsa harici stil dosyası, harici stil dosyası ezer dahili stilleri.

Bu dersimizde burada biter. Bu sayede temel CSS eğitimini almış oldunuz. Önümüzdeki derslerde görüşmek üzere…

 

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan CSS Dersleri Bölüm 1 - Giriş ve Söz dizimi başlıklı makalemizde biçim, css ve dizimi hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious