CSS Başlangıç Kılavuzu
CSS Nedir?
CSS “Cascading Style Sheet” kelime grubunun baş harfleri ile oluşturulmuş bir terimdir ve Türkçe anlamı, Basamaklı Stil Sayfası demektir. Web sayfalarını biçimlendirmek için kullanılmaktadır. Web sitelerinde kullanılan yazı renkleri, arka plan renkleri, resimlerin boyutları, metin boyutları ve şekillendirmesi gibi, birçok işlem css ile yapılmaktadır.
- CSS, HTML öğelerinin ekranda, kağıtta veya başka bir ortamda nasıl görüntüleneceğini açıklar.
- CSS çok fazla iş tasarrufu sağlar. Aynı anda birden fazla web sayfasının yerleşimini kontrol edebilirsiniz.
- Dış stil sayfaları CSS dosyalarında saklanmaktadır.
- CSS’de hangi öğeye stil verilecek ise öncelikle bu belirtilir. Öğeye uygulanacak stiller, özellik : değer ; formatında bir bildirim bloğu içinde belirtilmektedir. Bildirim bloğu, süslü parantez ile başlar ve aynı şekilde süslü parantez ile sonlanmaktadır.
HTML, bir web sayfasının içeriğini tanımlamak için hazırlanmıştır. HTML bir sayfayı şekillendirmek için bir etiket içermeyi amaçlamamıştır. <font> gibi etiketler ve renk özellikleri HTML 3.2 teknik özelliklerine eklendiğinde, web geliştiricileri bazı zorluklar ile karşılaşmaya başladılar. Her sayfaya yazı tipleri ve renk bilgilerinin eklendiği büyük web sitelerinin geliştirilmesi uzun ve pahalı bir süreç haline gelmeye başladı. Bu sorunu çözmek için, World Wide Web Consortium (W3C) CSS’yi ortaya çıkarmıştır.
CSS ile zamandan tasarruf edersiniz. Stil tanımları normalde harici .css dosyalarına kaydedilir. Harici bir stil sayfası dosyasıyla, sadece bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz!
CSS Sözdizimi ve Seçiciler
Bir CSS kural seti, bir seçici ve bir bildirim bloğundan oluşur:
<style>
p {
color: red;
text-align: center;
}
</style>
Bu CSS söz diziminde, p yani paragraf HTML elementi seçilmiştir. p elementinin renk özelliği için red yani kırmızı rengi atanmıştır. Kodu dikkatli incelerseniz, özellik:değer; formatında, html elementlerine stil belirlenebilmektedir. text-align: center; özelliği ile, paragraf içindeki metinlerin ortalama işlemi yapılmaktadır.
- Seçici, stillendirmek istediğiniz HTML öğesini işaret eder.
- Bildirim bloğu, noktalı virgüllerle ayrılmış bir veya daha fazla bildirim içerir.
- Her bildirimde bir CSS özellik adı ve iki nokta üst üste ile ayrılmış bir değer bulunur.
- Bir CSS bildirimi her zaman noktalı virgülle sona erer ve bildirim blokları küme parantezleriyle çevrilidir.
- Yukarıdaki örnekte, <p> öğelerinin tümü kırmızı metin rengiyle ortalanmış olacaktır.
CSS seçicileri, eleman adlarına, kimliklerine, sınıflarına, niteliklerine ve daha fazlasına dayalı olarak HTML öğelerini “bulmak” (veya seçmek) için kullanılır.
Öğe seçici, öğe adına göre öğeleri seçer. Bu örnekte tüm <p> öğeleri seçilmiştir. Bu durumda, tüm <p> öğeleri kırmızı metin rengiyle ortalanmış olacaktır.
İd seçici, belirli bir öğe seçmek için HTML öğesinin id niteliğini kullanır.Bir öğenin kimliği sayfa içinde benzersiz olmalıdır, bu nedenle kimlik seçicisi benzersiz bir öğe seçmek için kullanılır. Belirli bir kimliği olan bir öğe seçmek için, bir diyez (#) karakterini ve ardından öğenin kimliğini yazmalısınız. Aşağıdaki stil kuralı, id = “para1” ile HTML öğesine uygulanacaktır.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Bu paragraf metni kırmızı renkte ve ortalanmış durumda</p>
<p>Bu paragraf metni, etkilenmiyor, yani kırmızı renkte ve ortalanmış değil</p>
</body>
</html>
Sınıf seçici, belirli bir sınıf özelliğine sahip öğeleri seçer. Belirli bir sınıfa sahip öğeleri seçmek için, bir nokta (.) karakteri ve ardından sınıfın adını yazmalısınız. Aşağıdaki örnekte, class = “center” olan tüm HTML öğeleri kırmızı ve merkez hizalı olacaktır.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Kırmızı renkte ve ortalanmış bir h1 öğesi</h1>
<p class="center">Kırmızı renkte ve ortalanmış bir paragraf öğesi</p>
</body>
</html>
Yukarıdaki örnekte görüldüğü gibi, sınıf seçici ile, oluşturulan sınıfı hem h1 öğesi için hemde paragraf öğesi için kullanabildik. Bu yazılım anlamında çok ciddi zaman tasarrufu sağlaması, kodunuzun daha anlaşılır ve kullanışlı olmasını sağlamaktadır.
HTML öğeleri ayrıca birden fazla sınıfa da başvurabilir. Aşağıdaki örnekte, <p> öğesi class = “center” ve class = “large” öğelerine göre stillendirilir.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Bu öğe stilden etkilenmeyecek, çünkü biz p öğesi için stil belirledik</h1>
<p class="center">Bu paragraf kırmızı ve ortalanmış olacaktır</p>
<p class="center large">Bu paragraf kırmızı ve ortalanmış ve aynı zamanda büyük fontta olacaktır. Çünkü her iki sınıfı da bu öğeye uyguladık.</p>
</body>
</html>
Önemli Not : Sınıf isimleri rakamla başlayamaz.
Gruplama Seçicileri : Aynı stil tanımlarına sahip elemanlarınız varsa, grup seçici kullanabilirsiniz. Kodu en aza indirmek için seçicileri gruplamak daha iyi olacaktır. Seçicileri gruplamak için her seçiciyi virgülle ayırmalısınız.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Bu öğe, kırmızı ve ortalanmış</h1>
<h2>Bu öğe de, kırmızı ve ortalanmış</h2>
<p>Bu öğe de, kırmızı ve ortalanmış</p>
</body>
</html>
CSS Yorumları : Yorumlar kodu açıklamak için kullanılır ve kaynak kodu daha sonraki bir tarihte düzenlediğinizde yardımcı olabilir. Yorumlar tarayıcılar tarafından göz ardı edilmektedir. Bir CSS yorumu / * ile başlar ve * / ile biter. Yorumlar ayrıca birden fazla satıra da yayılabilir. Bu nedenle, kodunuzun uygun yerlerine yorumlar ekleyerek, daha anlaşılabilir hale getirebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* Bu tek satırlık bir yorum */
text-align: center;
}
/* Bu
Çok satırlı
bir yorumdur */
</style>
</head>
<body>
<p>Bu bir paragraf metni!</p>
<p>Bu paragrafa CSS ile stil verilmiştir.</p>
<p>CSS yorumları, web sayfasının çalışan kısmında gözükmez.</p>
</body>
</html>
Bu yazımızda, CSS Nedir, CSS niçin ortaya çıktı, CSS seçicileri, CSS ID tanımlaması, CSS Sınıf Tanımlaması, CSS grup seçiciler,CSS yorum satırları gibi, CSS’de kullanılan temel başlangıç bilgilerini inceledik.
HTML Sayfalarına CSS nasıl eklenir?
Bir tarayıcı bir stil sayfası okuduğunda, HTML belgesini stil sayfasındaki bilgilere göre biçimlendirir. Stil sayfası eklemenin üç yolu vardır.
- Dış stil sayfası
- Dahili stil sayfası
- Satır içi stil
Dış stil sayfası
Dış stil sayfasıyla, sadece bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz. Her sayfa, <link> öğesinin içindeki harici stil sayfası dosyasına bir referans içermelidir. <link> öğesi <head> bölümünün içinde yer almaktadır.
Herhangi bir metin düzenleyicide harici bir stil sayfası yazılabilir. Dosya herhangi bir html etiketi içermemelidir. Stil sayfası dosyasının bir .css uzantısı ile kaydedilmesi gerekir. Örneğin “benimstilim.css” gibi bir dosya içine stil komutlarını yazabilirsiniz.
<head> <link rel="stylesheet" type="text/css" href="benimstilim.css"> </head>
benimstilim.css dosyasının içi;
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
İç Stil Sayfası
Tek bir sayfanın kendine özgü bir stili varsa, dahili bir stil sayfası kullanılabilir. İç stiller, <style> öğesinde, bir HTML sayfasının <head> bölümünün içinde tanımlanmaktadır.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır</h1>
<p>Bu bir paragrafdır</p>
</body>
</html>
Satır İçi Stilleri
Tek bir öğeye benzersiz bir stil uygulamak için satır içi stil kullanılabilir. Satır içi stilleri kullanmak için stil niteliğini ilgili öğeye ekleyin. Stil özelliği, herhangi bir CSS özelliğini içerebilir. Aşağıdaki örnek, bir <h1> öğesinin renginin ve sol kenar boşluğunun nasıl değiştirileceğini göstermektedir.
<!DOCTYPE html> <html> <body> <h1 style="color:blue;margin-left:30px;">Bu bir başlık, mavi renk ve 30 piksel soldan boşluk bırakılmış durumda</h1> <p>Bu bir paragrafdır</p> </body> </html>
İpucu: Satır içi stil, stil sayfasının avantajlarının çoğunu kaybeder, içeriğin sunumla karıştırılması gibi. Bu nedenle, bu yöntemi az miktarda kullanmanız tavsiye edilmektedir.
Çoklu Stil Sayfaları
Aynı stil için bazı özellikler farklı stil sayfalarında tanımlanmışsa, son okuma stil sayfasından gelen değer kullanılacaktır. Bununla birlikte, dahili stil harici stil sayfasına olan linkten önce tanımlanırsa, bu stil komutları etki edecektir.
CSS Sıralaması
Bir HTML öğesi için belirtilen birden fazla stil olduğunda hangi stil kullanılır?
Bir sayfadaki tüm stiller, aşağıdaki kurallara göre yeni bir “sanal” stil sayfasına “basamaklanır”.
- Satır içi stil (bir HTML öğesinin içinde)
- Dış ve iç stil sayfaları (html nin <head> bölümünde)
- Tarayıcı varsayılanı
Bu nedenle, satır içi stil en yüksek önceliğe sahiptir ve dış ve iç stilleri ve tarayıcı varsayılanlarını geçersiz kılmaktadır. CSS kullanımı, HTML dosyalarının biçimlendirilmesi amacıyla kullanılmaktadır. Dolayısıyla, iyi bir CSS bilgisi, şık görünüşlü web sitelerine sahip olmanızı kolaylaştıracaktır.