İçindekiler
CSS Nedir ve Nasıl Kullanılır?
Bu makale içerisinde CSS’in temellerini kısaca öğrenerek CSS dünyasına hızlı bir giriş yapacaksınız. CSS çok kapsamlı ve araştırılması gereken muazzam bir teknoloji. Haydi Başlayalım..
CSS (Cascading Style Sheets) web sayfalarının iyi ve düzenli görünmesini sağlayan teknolojidir. Modern web geliştirmenin önemli bir parçasıdır ve herhangi bir web tasarımcısı ve geliştiricisi için olmazsa olmaz bir beceridir.
Başlarken
CSS’i projelerimize nasıl dahil edebileceğimizi öğrenmekle başlayalım. Bunu yapmanın üç yolu vardır.
1- Satır içi CSS
Öncelikle, CSS’yi doğrudan HTML öğelerimize dahil edebiliriz. Bunun için style özniteliği kullanırız ve ardından ona özellikler tanımlarız.
Burada color özelliğini veriyoruz ve değerini blue olarak ayarlıyoruz. Çıktımız aşağıdaki gibidir.
İstersek style etiketin içinde birden fazla özellik de ayarlayabiliriz . HTML’miz içinde çok fazla CSS olursa işler karışmaya başlar ve kod okunamaz duruma gelir. Kısa ve anlık işler için inline style yani satır içi css kullanmak daha doğrudur.
Şimdi ikinci yönteme göz atalım:
2- Dahili CSS
CSS’i dahil etmenin diğer yolu, style öğesini HTML belgesinin head tagları arasında kullanmaktır . Buna iç stil denir.
Stil öğesinde, öğeleri seçerek HTML öğelerimize stil verebilir ve stil nitelikleri tanımlayabiliriz. Tıpkı yukarıdaki öğeye color özelliği uyguladığımız h1 gibi.
3- Harici CSS
CSS’yi dahil etmenin üçüncü ve en çok önerilen yolu, harici bir stil sayfası kullanmaktır. .css Uzantısı olan bir stil sayfası oluşturuyoruz ve bağlantısını aşağıdaki gibi HTML belgesine ekliyoruz:
Yukarıdaki kodda style.css'i link etiketleri içerisine yazdık ve sayfamıza style dosyamızı entegre etmiş olduk. Tüm Css kodlarımızı style.css dosyamızın içerisinde yazarak kolayca yönetebiliriz.
Bu stil sayfası başka HTML dosyalara da aktarılabilir , dolayısıyla bu yeniden kullanılabilirlik için harikadır.
CSS Seçiciler
Yukarıda belirttiğimiz gibi CSS, HTML öğelerine stil vermek için kullanılan bir tasarım dilidir. Öğeleri stillendirmek için önce onları seçmelisiniz. Bunun nasıl yapıldığına zaten bir göz attınız, ancak CSS seçicilerinde biraz daha derine inelim ve HTML öğelerini seçebileceğiniz üç farklı yola bakalım.
1-Element
Bir HTML öğesini seçmenin ilk yolu, yukarıda yaptığımız gibi, yalnızca adı kullanmaktır. Nasıl çalıştığını görelim:
[css] h1 { font-size: 20px; } p { color: green; } div { margin: 10px; }[/css]Yukarıdaki örnekte yalnızca html etiket isimlerini kullanarak seçim yapıldı ve h1, etiketine yazı boyutu stili p etiketine renk stili div etiketine de margin yani eleman etrafına aralık ekleme stili verildi
2-Class
HTML öğelerini seçmenin başka bir yolu da class niteliğini kullanmaktır. HTML’de elementlerimize farklı sınıflar atayabiliriz. Her öğenin birden çok sınıfı olabilir ve her sınıf aynı zamanda birden çok öğeye de uygulanabilir.
[html] <div class=’container’> <h1> This is heading </h1> </div>[/html]Yukarıdaki örnekte class=”container” şeklinde görülen alan html sınıf tanımlamasıdır. “container” olarak tanımlanan sınıfa stil tanımlamasını aşağıdali gibi yaparız:
[css] .container { margin: 10px; }[/css]Yukarıdaki kodda container div elemanının sınıfını atadık. Stil sayfasında, .sınıfadı formatı kullanarak ve bir 10px kenar boşluğu vererek sınıfımızı seçiyoruz . Sınıf seçimi “.” nokta işaretlemesi ile belirlenir.
3-Id
Classlar gibi, HTML öğelerini seçmek ve onlara stil uygulamak için Id leride kullanabiliriz. Class ve Id arasındaki tek fark, bir Id’nin yalnızca bir HTML öğesine atanabilmesidir.
[html] <div> <p id=’para1′> This is a paragraph </p> </div>[/html][css] #para1 { color: green; font-size: 16px; }[/css]Yukarıdaki örnek, paragraf öğesine nasıl bir Id atadığımızı ve daha sonra paragrafı seçmek ve ona stili uygulamak için stil sayfasındaki Id seçiciyi nasıl kullandığımızı gösterir. Id’ler “#” sharp işareti ile seçilerek işlem yapılır.
Yazı Tipleri ve Renkler
CSS bize yazı tipleri ve renklerle işlem yapmak ve HTML öğelerimizi güzel göstermek için kelimenin tam anlamıyla yüzlerce seçenek sunar. İki tür yazı tipi ailesi adı arasından seçim yapabiliriz:
1. Generic Family: Benzer bir görünüme sahip bir grup yazı tipi ailesi (‘Serif’ veya ‘Monospace’ gibi)
2. Font Family: Belirli bir yazı tipi ailesi (‘Times New Roman’ veya ‘Arial‘ gibi)
Renkler için önceden tanımlanmış renk adlarını veya RGB, HEX, HSL, RGBA, HSLA değerlerini kullanabiliriz.
[html] <div class=’container’> <h1 class=’heading1′> CSS is Coooooool!!!! </h1> </div>[/html][css] .container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; }.heading1 { font-family: ‘Courier New’; color: tomato; }[/css]
Yukarıdaki örnekte görebileceğiniz gibi, container sınıfına sahip bir div elemanımız var . Bu div’in içinde h1 ve onun içinde de metinimiz var.
Stil sayfasında container sınıfını seçiyoruz ve width, height, background-color, ve text-align özelliklerini tanımlıyoruz.
Son olarak, h1 etiketine tanımlanan heading1 sınfına font-family ve color özelliklerini veriyoruz.
CSS konusuna hızlı bir başlangıç ile giriş yaptınız. CSS eğlenceli ve ciddiye alınması gereken bir konudur. İleri seviye CSS bilgileri çok karmaşıktır ama pratik yaparak bunları aşabilirsiniz.
Turkish
English