CSS ile Etiket Kullanımları

Merhabalar, web tasarım derslerimizde HTML’in ardından CSS dersleriyle tekrar karşınızdayız.

Öncelikle CSS nerelerde kullanılır, ne amaçla kullanılır, açılımı nedir gibi giriş ve basit konularla başlayalım.

• CSS’in açılımı Cascading Style Sheets’tir.
• CSS, HTML öğelerinin ekran gibi ortamlarda nasıl görüneceğini tarayıcıya açıklar.
• CSS, web sayfalarınızın farklı cihazlar ve ekran boyutları için tasarım ve yerleşimi de dahil olmak üzere stillerini tanımlamak için kullanılır.
• CSS, birden fazla internet sayfasının stillerini aynı anda belirleyebilir.
• Genellikle harici stil sayfalarında saklanır.

HTML bir sayfanın yapı taşıdır ancak hiçbir zaman bir web sayfasına stil vermek için tasarlanmadı.

HTML daha çok içeriği tanımlamak amacıyla kullanılır, örneğin:

<h1>Bu bir başlıktır</h1>
<p>Bu bir paragraftır.</p>

HTML 3.2 sürümüne <font> etiketi ve renk özellikleri eklendiğinde web geliştiricileri için bir kabus başladı denilebilir. Yazı tipi ve renk bilgilerinin her sayfaya ayrı ayrı eklendiği büyük web sitelerinin geliştirilmesi uzun ve pahalı bir süreç hâline gelmişti.

Bu sorunu çözmek için World Wide Web Consortium (W3C) CSS’i oluşturdu.
Yanlış anlaşılmasın, CSS bir programlama dili değil, bir stil dilidir.

Bu şekilde CSS, sayfalara stil vermek amacıyla HTML sayfalarına eklenmiş oldu.

CSS web tasarımcılar ve geliştiriciler için büyük bir tasarruf sağlar.
Stil tanımları normalde harici .css belgeleri olarak yazılır.
Bu sayede bir web sitesinin tüm tasarımını yalnızca tek bir belgeyi değiştirerek değiştirebiliyoruz.

CSS Söz Dizimi

Bir CSS kuralı bir seçici ve bir bildirim bloğundan meydana gelir.
Seçiciler stil vermek istediğiniz HTML öğesini temsil eder.
Bildirim bloğu, noktalı virgülle ayrılmış bir veya birden fazla bildirim içerir.
Her bildirim bir CSS özellik adı ile bir değerden oluşur; ikisi iki nokta üst üste ile ayrılır.
CSS bildirimi her zaman bir noktalı virgülle biter ve bildirim blokları küme parantezleriyle çevrilidir.

Aşağıdaki örnekte <p> öğelerine kırmızı renkte ve ortalanmış bir yazı stili verilmiştir.
Sizler de bu kodları bir .css belgesine yazıp bir HTML sayfasına bağlayarak ya da <style> etiketi içine yazarak tarayıcıda görebilirsiniz.

p {
    color: red;
    text-align: center;
}

CSS Seçicileri

CSS seçiciler, HTML öğelerini öğe adına, kimliğine (id), sınıfına ve daha fazlasına göre “bulmak” ve “seçmek” için kullanılır.

Eleman Seçiciler

Eleman seçici, öğeleri öğe adına göre seçer.
Yukarıda verdiğimiz örnekte de görüldüğü üzere HTML’de tanımlanmış olan p etiketine stil veriyoruz.
Böylece bir HTML belgesindeki tüm <p> öğelerini seçebilirsiniz (bu örneğin çıktısında tüm <p> öğeleri ortalanmış ve kırmızı metin renkli olacaktır).

Kimlik Seçiciler (id)

Kimlik seçici, bir HTML öğesini (örneğin bir div’i) id’sine göre seçip ona stil tanımlamak için kullanılır.

Bir öğenin kimliği, yani id’si sayfada benzersiz olmalıdır. Dolayısıyla id, tek bir öğeyi seçmek için kullanılır.

Belirli bir kimliği olan öğeyi seçmek için kimlikten önce bir diyez (#) karakteri yazılır.

Aşağıdaki örnek id="para" olarak tanımlanmış HTML öğesine uygulanacaktır.

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

Sınıf Seçiciler

Sınıf seçicileri, belirli bir class özelliğine sahip öğeleri seçmek için kullanılır.
Bir sınıf seçici yazmak için nokta (.) karakterinin ardından sınıf adı yazılır.

Aşağıdaki örnekte class="center" olarak tanımlı tüm HTML öğelerine stil uygulanmaktadır.

.center {
    text-align: center;
    color: red;
}

Ayrıca bu stilden yalnızca belirli HTML öğelerinin yararlanmasını da sağlayabiliriz.
Aşağıdaki örnekte yalnızca class="center" olarak tanımlı <p> öğeleri etkilenecektir.

p.center {
    text-align: center;
    color: red;
}

HTML öğeleri aynı zamanda birden fazla sınıfa sahip olabilir.

Aşağıdaki örnekte <p> öğesi hem center hem large sınıfına sahiptir.

<p class="center large">Bu paragrafta iki farklı sınıfa değinilmektedir.</p>

Gruplandırıcı Seçiciler

Aynı stillere sahip öğeleriniz varsa;

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

kodları en aza indirmek için seçicileri gruplandırabiliriz.

Seçicileri gruplandırmak için her seçicinin arasına virgül koyarız.

Aşağıdaki örnekte yukarıdaki kodu gruplandırılmış hâle getirdik:

h1, h2, p {
    text-align: center;
    color: red;
}

CSS İçerisinde Yorum Satırları

Web tasarımı yaparken kodlarımızın arasına yorum eklemek, bizden sonraki yazılımcıya not bırakmak ya da daha sonra dönüp düzeltmek istediğimiz yerleri belirtmek için kullanılır.

Yorum satırları içerisinde yazanlar tarayıcı tarafından dikkate alınmaz, dolayısıyla kullanıcılar da göremez.

Bir CSS açıklaması /* ile başlayıp */ ile biter. Bu yöntemle birden fazla satırlık yorum da yazılabilir.

p {
    color: red;
    /* Bu şekilde tek satır yorum satırı oluşturulur */
    text-align: center;
}
/* Bu şekilde ise
birden fazla
yorum satırı oluşturulur.
*/