Bu yazıda basit bir HTML sayfası alıp ona CSS uygulayacağız, bu arada dil hakkında da bazı pratik şeyler öğreneceğiz.
Biraz HTML ile işe başlayalım
Başlangıç noktamız bir HTML sayfası. Kendi bilgisayarınızda çalışmak istiyorsanız aşağıdaki kodu kopyalayabilirsiniz. Aşağıdaki kodu index.html adı ile makinenizdeki bir klasöre kaydedin.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Getting started with CSS</title>
</head>
<body>
<h1>I am a level one heading</h1>
<p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="https://example.com">link</a>.</p>
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>
<ul>
<li>Item <span>one</span></li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>
</body>
</html>
Sayfamıza CSS ekleme
Yapmamız gereken ilk şey, HTML belgesine kullanmasını istediğimiz bazı CSS kurallarımız olduğunu söylemek. CSS’yi bir HTML belgesine uygulamanın genellikle karşılaşacağınız üç farklı yolu bulunur, ancak şimdilik, bunu yapmanın en yaygın ve kullanışlı yoluna bakacağız – CSS’yi belgemizin başına bağlantı olarak vereceğiz.
HTML belgenizle aynı klasörde bir dosya oluşturun ve styles.css ismini verin. .css uzantısı gösterildiğinde bu dosyanın bir CSS belgesi olduğunu anlarız.
Aşağıdaki satırı HTML belgesinin içinde <head> etiketinin altına yerleştirin. Böylece styles.css ve index.html arasında bir bağlantı kurmuş olacağız.
<link rel="stylesheet" href="styles.css">Bu <link> öğesi, tarayıcıya, rel özniteliğini kullanarak bir stil sayfamız olduğunu ve href özniteliği ile de bu stil sayfasının konumunu söylüyor. styles.css sayfasına bir kural ekleyerek CSS’nin çalıştığını test edebilirsiniz. Kod düzenleyicinizi kullanarak aşağıdakileri CSS dosyanıza ekleyin:
h1 {
color: red;
}HTML ve CSS dosyalarınızı kaydedin ve sayfayı bir tarayıcıda açın. Belgenin üst kısmındaki birinci düzey başlığımız artık kırmızı olmalı. Bu olduysa, tebrikler – bir HTML belgesine başarılı bir şekilde CSS uyguladınız. Bu olmazsa, her şeyi doğru yazdığınızı dikkatlice kontrol edin.
HTML öğelerine stil verme
Başlığımızı kırmızı yaparak, bir HTML öğesini hedefleyebileceğimizi ve biçimlendirebileceğimizi zaten göstermiş olduk. Bunu bir öğe seçici kullanarak yapıyoruz – bir HTML öğesi adıyla doğrudan eşleşen bir seçici kullandık. Belgedeki tüm paragrafları hedeflemek için p seçicisini kullanırsınız. Tüm paragrafları yeşile çevirmek için şunları kullanırsınız:
p {
color: green;
}Seçicileri virgülle ayırarak birden çok seçiciyi aynı anda hedefleyebilirsiniz. Örneğin tüm paragrafların ve tüm liste öğelerinin yeşil olmasını istiyorsam kuralım aşağıdaki gibi görünür:
p, li {
color: green;
}Öğelerin varsayılan davranışını değiştirme
İyi işaretlenmiş bir HTML belgesine baktığımızda, örneğimiz kadar basit bir şey bile olsa, tarayıcının bazı varsayılan stiller ekleyerek HTML’yi nasıl okunabilir hale getirdiğini görebiliriz. Başlıklar büyük ve kalındır ve listemizde madde işaretleri bulunur. Bunun nedeni, tarayıcıların varsayılan olarak tüm sayfalara uyguladıkları varsayılan stilleri içeren dahili stil sayfalarının olmasıdır; onlar olmadan tüm metin bir yığın halinde çalışırdı ve her şeyi sıfırdan biçimlendirmek zorunda kalırdık. Tüm modern tarayıcılar, HTML içeriğini varsayılan olarak hemen hemen aynı şekilde görüntüler.
Ancak, genellikle tarayıcının yaptığı seçimden başka bir şey istersiniz. Bu, değiştirmek istediğiniz HTML öğesini seçerek ve görünüşünü değiştirmek için bir CSS kuralı kullanarak yapılabilir. İyi bir örnek, <ul> olabilir – sıralı olmayan listeler. Liste tarayıcıda görüntülenince madde işaretleri ile birlikte geliyor ve bu madde işaretlerini istemediğimize karar verirsek şu şekilde kaldırabiliriz:
li {
list-style-type: none;
}Bunu şimdi CSS’nize eklemeyi deneyin.
list-style-type özellikleri arasında, liste madde işaretlerini kaldırmanın yanı sıra bunları değiştirebileceğinizi özellikler de bulunur — square değerini kullanarak bunları kare madde işaretlerine dönüştürmeyi deneyin.
Sınıf ekleme
Şimdiye kadar, HTML öğe adlarına göre öğeleri stilize ettik. Bu, belgenizdeki o türdeki tüm öğelerin aynı görünmesini istediğiniz sürece çalışır. Çoğu zaman durum böyle değildir ve bu nedenle diğerlerini değiştirmeden öğelerin bir alt kümesini seçmenin bir yolunu bulmanız gerekecektir. Bunu yapmanın en yaygın yolu, HTML öğenize bir sınıf eklemek ve o sınıfı seçmektir.
HTML belgenizde, ikinci liste öğesine bir sınıf niteliği ekleyin. Listeniz şimdi şöyle görünecek:
<ul>
<li>Item one</li>
<li class="special">Item two</li>
<li>Item <em>three</em></li>
</ul>CSS’nizde special sınıfını, bir nokta karakteriyle başlayan bir seçici oluşturarak hedefleyebilirsiniz. Aşağıdakileri CSS dosyanıza ekleyin:
.special {
color: orange;
font-weight: bold;
}Sonucun ne olduğunu görmek için kaydedin ve tarayıcıda sayfayı yenileyin.
special sınıfını bu liste öğesiyle aynı görünüme sahip olmasını istediğiniz herhangi bir öğenin sınıfı olarak uygulayabilirsiniz. Örneğin paragraftaki <span> öğesinin de turuncu ve kalın olmasını isteyebilirsiniz. <span> sınıfınıa special eklemeyi deneyin (class="special") ardından sayfayı yeniden ve ne olduğunu görün.
Bazen, sınıfla birlikte HTML öğesi seçicisini de belirten bir seçiciye sahip kurallar görürsünüz:
li.special {
color: orange;
font-weight: bold;
}Bu sözdizimi, “li öğesinin special özel bir sınıfına sahip herhangi bir öğeyi hedefle” anlamına gelir. CSS’de bunu yapacak olursanız artık sınıfı <span>‘a ekleyerek uygulayamazsınız. <span>‘ı da hedeflemek istiyorsanız bu öğeyi de seçiciler listesine eklemeniz gerekir:
li.special,
span.special {
color: orange;
font-weight: bold;
}Tahmin edebileceğiniz gibi, bazı sınıflar birçok öğeye uygulanabilir ve her yeni öğeye bu stili eklemek gerektiğinde CSS’nizi düzenlemeye devam etmek zorunda kalmak istemezsiniz. Bu nedenle, yalnızca bir öğe için bazı özel kurallar oluşturmak istediğinizi bilmiyorsanız ve belki de bunların başka şeylere uygulanmadığından emin olmak istemiyorsanız, bazen öğeyi atlamak ve sınıfa başvurmak en iyisidir.
Öğeleri bir belgedeki konumlarına göre şekillendirme
Belgede nerede olduğuna bağlı olarak bir şeyin farklı görünmesini isteyeceğiniz zamanlar vardır. Burada size yardımcı olabilecek çokca seçici bulunuyor, ancak şimdilik sadece birkaçına bakacağız. Belgemizde, biri paragraf içinde, diğeri liste öğesi içinde olmak üzere iki <em> öğesi var. Yalnızca birini seçmek istiyoruz. <li> içine yerleştirilmiş <em>
li em {
color: red;
}Bu seçici <li> içinde bulunan herhangi bir <em> öğesini seçer. Bu nedenle örnek belgenizde, <em> öğesinin -üçüncü maddenin- artık mor olduğunu, ancak paragrafın içindeki öğenin değişmediğini görmelisiniz.
Denemek isteyebileceğiniz başka bir şey de, HTML’de aynı hiyerarşi düzeyindeki bir başlığın hemen ardından gelen bir paragrafa stil vermektir. Bunu yapmak için seçiciler arasına bir + (bitişik kardeş birleştirici) yerleştirin.
Bu kuralı da stil sayfanıza eklemeyi deneyin:
h1 + p {
font-size: 200%;
}Aşağıdaki örnek yukarıdaki iki kuralı içerir. Liste içindeki öğe kırmızı olacak. <h1> öğesinden sonraki ilk paragraf ise diğerlerinden daha büyük şekilde gösterilecek:
Not: Gördüğünüz gibi, CSS bize öğeleri hedeflemek için birkaç yol sunuyor ve şimdiye kadar sadece çok azını gördük! İlerleyen bölümlerde Seçiciler makalelerimizde bu seçicilerin tümüne ve daha pek çoğuna bakacağız.
Duruma dayalı şeyler stillendirme
Bu makalede inceleyeceğimiz son stil türü, duruma göre stillendirme yeteneğidir. Bunun basit bir örneği bağlantıların şekillendirilmesidir. Bir bağlantıya stil verdiğimizde, <a> (çapa) öğesini hedeflememiz gerekir. Bu öğenin “ziyaret edilmemiş”, “ziyaret edilmiş”, “üzerine gelinmiş”, “klavye aracılığıyla odaklanmış” veya “tıklanma (etkinleştirilme) sürecinde” olmasına bağlı olarak farklı durumları vardır. Bu farklı durumları hedeflemek için CSS’yi kullanabilirsiniz – aşağıdaki CSS, ziyaret edilmeyen bağlantıları pembe ve ziyaret edilen bağlantıları yeşil olarak biçimlendirir.
a:link {
color: pink;
}
a:visited {
color: green;
}Bir sonraki kural ile kullanıcı üzerine geldiğinde alt çizgiyi kaldırarak bağlantının görünüşünü değiştirebilirsiniz:
a:hover {
text-decoration: none;
}Yukarıdaki kuralları ekleyin ve deneyin. Denediyseniz şimdi pembe rengin oldukça hafif ve okunması zor olduğunu fark etmişsinizdir – neden bunu daha iyi bir renkle değiştirmeyesiniz? Linkleri kalınlaştırabilir misiniz?
Fareyle üzerine gelindiğinde bağlantımızdaki alt çizgiyi kaldırdık. Alt çizgiyi bir bağlantının tüm durumlarından da kaldırabilirsiniz. Bununla birlikte, gerçek bir sitede ziyaretçilerin bir bağlantının bir bağlantı olduğunu bilmesini istediğinizi hatırlamakta fayda var. Alt çizgiyi yerinde bırakmak, insanların paragraf içindeki bazı metinlerin tıklanabileceğini anlamaları için önemli bir ipucu olabilir – bu, ziyaretçilerin alışkın oldukları bir davranıştır. CSS’deki her şeyde olduğu gibi, değişikliklerinizle belgeyi daha az erişilebilir hale getirme potansiyeliniz de vardır – uygun yerlerde olası tuzakları vurgulamayı amaçlayacağız.
Not: Bu kılavuzlarda erişilebilirlikten sıklıkla bahsedildiğini göreceksiniz. Erişilebilirlikten bahsettiğimizde, web sayfalarımızın herkes tarafından anlaşılabilir ve kullanılabilir olması gerekliliğinden bahsediyoruz.
Ziyaretçiniz faresi olan bir bilgisayarda veya dokunmatik ekranlı bir telefonda olabilir. Veya belgenin içeriğini okuyan bir ekran okuyucu kullanıyor olabilirler ya da çok daha büyük metin kullanmaları veya sitede yalnızca klavyeyi kullanarak gezinmeleri gerekebilir.
Düz bir HTML belgesine genellikle herkes erişebilir – bu belgeye stil vermeye başladığınızda, onu daha az erişilebilir hale getirmemeniz önemlidir.
Seçicileri ve birleştiricileri birleştirmek
Birden çok seçiciyi ve birleştiriciyi bir araya getirebileceğinizi belirtmekte fayda var. Örneğin:
/* <article> içindeki <p> içindeki her <span> öğesini seçer */
article p span { ... }
/* <h1>'den sonra gelen <ul>'dan sonra gelen her <p> öğesini seçer */
h1 + ul + p { ... }Birden çok türü de bir arada birleştirebilirsiniz. Aşağıdakileri kodunuza eklemeyi deneyin:
body h1 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}Bu, <body> içindeki <h1>‘den sonra gelen ve special class‘ı bulunan her <p> öğesini biçimlendirir. Vay!
Sağladığımız orijinal HTML’de, stillendirilen tek öğe <span class="special"> idi.
Şu anda bu karmaşık görünüyorsa endişelenmeyin – daha fazla CSS yazdıkça bu karışıklığa alışacaksınız.
Sonuç
Bu yazıda, CSS kullanarak bir belgeye stil verebileceğiniz çeşitli yöntemlere göz attık. Kılavuzun geri kalanında ilerledikçe bu bilgiyi geliştireceğiz.
Bir sonraki yazıda CSS’nin nasıl yapılandırıldığına bir göz atacağız.