Kodlama Merkezi Yazılımcı Dostu Paylaşım Merkezi
CSS, kısaca web sayfalarında kullanılan html elementlerinin ekranda nasıl görüneceğini tanımlamak için kullanılan stil kodlarıdır. İngilizce Cascading Style Sheet kelimelerinin baş harflerinden bu kelime ortaya çıkmıştır. Günümüzdeki web sayfalarının bu denli geniş bir tasarım yelpazesine sahip olmasın da CSS’in payı büyüktür.
Niçin CSS Kullanmalıyız?
- CSS tasarımcıya büyük ölçekte zaman kazandırır.
- Html kodları içeriği sunmak, CSS kodları görünümü biçimlendirmek için kullanılır.
- Kod karmaşasını önler.
- Tasarımda değişiklik yapmak kolaylaşır.
- Farklı boyutlarda ki ekranlara özgü (notebook, tablet, telefon v.b) tasarım yapmaya olanak sağlar.
- CSS bir web standardıdır.
CSS Öğrenmeye Nerden Başlamalıyım?
CSS’i anlamak için öncelikle temel seviyede html bilgisine sahip olmak gerekir. Bu nedenle eğer yeterli derecede html bilmiyorsanız html nedir dersiyle başlayarak, 6 derste html’i temel şekilde öğrenebilirsiniz.
Eğer temel html bilgisine sahipseniz. Sizlere mümkün olduğunca basit ve anlaşılır şekilde CSS’i ders ders anlatmaya çalışacağım.
Peki CSS Kodlarını Nereye Yazacağız!
CSS kodlarını yazmak için 3 farklı alternatif bulunuyor.
- Harici bir stil dosyasına ( .css uzantılı olarak kaydedip)
- Head etiketi arasına
- Html etiketleri içerisine
Günümüzde kod karmaşasını engellemek ve yazılan kodların tüm html dosyalarında etkin olmasını sağlamak adına harici stil dosyası tercih edilmektedir.
Herhangi bir editör (notepad++, brackets, dreamweaver v.b) kullanarak yeni bir dosya oluşturun ve stil.css isminde kaydedin. Şimdi geldi html dosyasına stil dosyasını bildirmeye. Yeni bir html dosyası oluşturarak stil.css dosyasının bulunduğu dizine kaydedin ve temel html tanımlamalarını yapın.
<head> etiketleri arasına aşağıdaki kodu ekleyerek stil dosyasını html’e bağlayabilirsiniz.
|
1 2 3 4 5 |
<head> <link rel="stylesheet" type="text/css" href="stil.css"> </head> |
Diğer 2 yöntem çok fazla tercih edilmediği için kafa karıştırıcı olmaması adına değinmedim. Fakat öğrenmek isterseniz internetten araştırabilirsiniz.
CSS Yazım Kuralları
Şimdi geldi CSS kodlarını yazmaya bunun için aşağıdaki yapıyı biraz inceleyelim.
Bir CSS kuralı genel olarak aşağıdaki bölümlerden oluşur.
Kodu incelediğinizde hiçbir bilginiz olmamasına rağmen tüm h1 etiketlerinin renginin mavi ve yazı büyüklüğünün 12 piksel olarak ayarlandığını anlayabilirsiniz.
CSS kodlarının etkili olabilmesi için html dokümanında <h1> etiketiyle yazılmış bir başlık bulunması gerekir.
Aşağıda CSS ve HTML ile hazırlanmış bir örnek var, inceleyiniz.
index.html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="stil.css"> </head> <body> <h1>CSS Öğreniyorum!</h1> <p>CSS ile h1 ve p etiketlerini biçimlendirelim.</p> </body> </html> |
stil.css kodları
|
1 2 3 4 5 6 7 8 9 |
h1{ color:blue; font-size:12px; } p{ color:red; font-size:10px; } |
Yukardıda ki kodları yazdığınızda aşağıdaki gibi bir ekran çıktısı almış olmanız lazım.
CSS derslerimize hızlı bir başlangıç yaptık. Bir sonraki dersimizde CSS Seçicilerine değineceğim, anlamadığınız yerleri yorum olarak sorabilirsiniz.
still.css dosyasına ne tür komutlar yazılıyor?Sadece renk mi