CSS
Merhaba, bu yazımda CSS diline dair temel bir giriş yapıyor olacağız. Bundan önceki yazılarımda t HTML işaretleme dilini ve özelliklerini gördük. Eğer HTML ile ilgili yazılarımı okumadıysanız buradan okuyabilirsiniz.
Peki nedir bu CSS ?
İngilizcesi “Cascading Style Sheets” olan CSS açılımı, “Basamaklanmış Stil Katmanları” anlamına gelmektedir. Türkçe meali ise web sitelerinin görsel olarak şekillendirilmesine olanak tanıyan ve kendine has kuralları olan bir tanım dilidir.
Her şeyden önce bu dili kullanmadan önce HTML dilini bilmemiz gerekmektedir. Çünkü HTML de oluşturduğumuz elementleri CSS ile seçerek stil işlemleri uygulanmaktadır.
Örnek bir CSS kodu
p{
color:red;
}Yukarıda bulunan örnekte Html sayfamız içerisinde yer alan tüm p etiketlerinin yazı rengine bir stil işlemi uygulamış oluruz.
Nasıl Kullanılır ?
Nasıl kullanıldığını anlamak için CSS dilinin nasıl çalıştığını anlamamız gerekmektedir.
CSS dili seçiciler üzerine kurulu bir dildir. Html sayfamız içinde oluşturduğumuz elementleri seçerek seçtiğimiz Html elementlerine stil işlemi uygularız.
Seçiciler
Birden fazla seçim türü vardır. Ancak en yaygın olarak kullanılan yapılar şu şekildedir.
- ‘ # ’ işareti ile html etiketlerinde id ile tanımlanmış değerlerin seçiminde kullanılır. Örneğin
<head>
<style>
#deneme{
color:red
}
</style>
</head>
<body>
<p id="deneme"></p>
</body>Id değeri deneme olan p etiketine bir stil işlemi uygulamış olduk.
- ‘ .’ işareti ile html etiketlerinde class ile tanımlanmış değerlerin seçiminde kullanılır. Örneğin
<p class="deneme"></p>
<style>
.deneme{
color:red;
}
</style>Class değeri deneme olan p etiketine bir stil işlemi uygulamış olduk.
- Ayrıca html de bulunan element adlarına göre de seçim yapabilmekteyiz. Örneğin
<p class="deneme" style="color:red"></p>CSS dilinde birden fazla seçim yapabileceğimiz yapı bulunmaktadır. Yazının daha da uzamaması adına sizin araştırmanıza bırakıyor olacağım :)
Peki CSS ile bir elementi nasıl seçebileceğimizi öğrendik, ancak bunu nerede yazacağımızı halen bilmiyoruz haydi gelin şimdide CSS kodlarımızı nerede yazabileceğimize bakalım.
CSS Kodlarını Nerede Yazabilirim ?
Aslında yukarıda bulunan üç örnekte CSS kodlarımızı yazabileceğimiz alanları sizlere göstermiş oldum.
<head></head>tagları arasında<style></style>etiketleri içerisinde tanımlayabiliriz.- Harici bir sayfa açarak açtığımız sayfanın içerisinde yazabiliriz. Burada iki önemli nokta bulunmaktadır. Birincisi açacağımız sayfanın uzantısının .css ile bitiriyor olmak. İkincisi ise bu oluşturduğumuz harici dosyayı kullanmak istediğimiz html sayfamızda çağırmak olacaktır. Örneğin
<head>
<link rel="stylesheet" href="dosyadi.css"/>
</head>3. Son olarak da html elementi üzerinde inline olarak tanımlayabiliriz. Örneğin
<p style="color:red"></p>Böylelikle temel anlamda CSS’e giriş yapmış bulunmaktayız. Bu yazımda sizlere CSS dilinde html etiketlerini seçmeyi, seçtiğimiz elementlere stil işlemi uygulayabileceğimiz alanlardan bahsetmiş oldum. Bir sonraki yazımda ise CSS’e dair temel özellikleri anlatıyor olacağım.
Umarım yararlı olmuştur. Bir sonraki yazımda görüşmek üzere…
