CSS'ye başlarken

Bu makalede, basit bir HTML belgesi alıp ona CSS uygulayacağız. Bu sırada dil hakkında bazı pratik bilgiler öğreneceğiz.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.)
Amaç: Bir CSS belgesini bir HTML doyasına bağlamanın temellerini anlamak ve CSS ile basit metin biçimlendirme yapabilmek.

Biraz HTML ile başlayalım

Başlangıç noktamız bir HTML belgesidir. Kendi bilgisayarınızda çalışmak istiyorsanız şağıdaki kodu kopyalayabilirsiniz(Yeniden yazmak pratik için iyi olacaktır). Aşağıdaki kodu dosya adı index.html olacak şekilde bir klasöre kaydedin.

<!doctype html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <title>CSS'ye başlarken</title>
</head>

<body>
    
    <h1>Ben birinci seviye bir başlığım</h1>

    <p>Bu bir paragraf metnidir. Metinde bir <span>span nesnesi</span> 
ve ayrıca bir <a href="http://example.com">bağlantı</a> var.</p>

    <p>Bu ikinci paragraftır. <em>vurgulanan</em> bir nesne içerir.</p>

    <ul>
        <li>Öğe bir</li>
        <li>Öğe iki</li>
        <li>Öğe <em>üç</em></li>
    </ul>

</body>

</html>

Not: Bunu bir cihazda veya kolayca dosya oluşturamadığınız bir ortamda okuyorsanız endişelenmeyin — Burada, doğrudan web sayfasında örnek kod yazmanıza izin veren canlı kod düzenleyicileri aşağıda verilmiştir.

Belgenize CSS eklemek

Yapmanız gereken ilk şey, HTML belgesine, kullanmasını istediğimiz bazı CSS kurallarımız olduğunu söylemektir. Sıklıkla karşılaşacağınız bir HTML belgesine CSS'si eklemenin üç farklı yolu vardır. Ancak şimdilik bunu yapmanın en olağan ve kullanışlı yoluna bakacağız — CSS'i belgemizin başından bağlamak.

HTML belgenizle aynı klasörde adı styles.css olacak şekilde bir dosya kaydedin. .css dosya uzantısı bu dosyanın bir css dosyası olduğunu belirtir.

styles.css dosyasınıindex.html içerisindeki <head> nesnesinin içinnde bağlantı oluşturmak için:

<link rel="stylesheet" href="styles.css">

Bu <link> nesnesi tarayıcıya,  rel niteliği ile bu dosyanın bir stil sayfası olduğunu ve href niteliğiylede dosyanın bulunduğu konumu söyler. styles.css dosyası içerisine bir kural ekleyerek CSS'in çalışıp çalışmadığını kontrol edebilirsiniz.

h1 {
  color: red;
}

HTML ve CSS dosyalarınızı kaydedin ve index.html dosyasını bir web tarayıcısında yeniden yükleyin. Belgenin üst kısmındaki birinci düzey başlık şimdi kırmızı olmalıdır. Eğer öyleyse tebrik ederim — bir HTML belgesine bir miktar CSS'i başarıyla uyguladınız. Doğru görünmüyorsa, her şeyi doğru yazdığınızı dikkatlice kontrol edin.

styles.css yerel olarak çalışmaya devam edebilir veya bu eğiticiye devam etmek için aşağıdaki etkilşimli düzenleyicizi kullanabilirsiniz. Etkileşimli düzenleyici, yukarıdaki belgemizde olduğu gibi ilk panaldeki CSS'e HTML belgesine bağlıymış gibi davranır.

HTML nesnelerini şekillendirme

Başlığımızı kırmızı yaparak, bir HTML nesnesini hedefleyebileceğimizi ve biçimlendirebileceğimizi göstermiş olduk. Bunu, bir nesne seçici hedefleyerek yaptık — bu HTML nesnesi adıyla doğrudan eşleşen bir seçicidir. Belgedeki tüm paragrafları hedeflemek için p seçiciyi 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. Tüm paragrafları ve tüm liste nesnelerinin yeşil olmasını istersek, kural şöyle görünür:

p, li {
    color: green;
}

Bunu aşağıdaki etkileşimli düzenleyicide (kod kutularında düzenleyin) veya yerel belgelerinizde deneyin.

 

Elemanların varsayılan davranışlarını değiştirme

İyi işaretlenmiş bir HTML belgesine baktığımızda, örneğimiz kadar basit bile olsa, tarayıcının bazı varsayılan stil ekleyerek HTML'yi nasıl okunabilir hale getirdiğini görebilirz. Başlıklar büyük ve kalın ve listemizde maddei işaretleri var. Bunun nedeni, tarayıcların varsayılan olarak tüm sayfalara uygualadıkları vasayılan stilleri içeren dahili stil sayfalarına sahip olmasıdır. Onlar olmadan tüm metin bir yığın halinde bir araya gelir ve her şeyi sıfırdan şekillendirmemiz gerekirdi. Tüm modern tarayıcılar, varsayılan olarak HTML içeriğini hemen hemen aynı şekilde görüntüler.

Ancak, genellikle tarayıcının yaptığı seçimden başka bir şey isteyeceksiniz. Bu, değiştirmek istediğiniz HTML nesnesini seçerek ve görünüşünü değiştirmek için bir CSS kuralı kullanarak yapılabilir. <ul> sırasız listemiz iyi bir örnektir. Listede noktalar var ve bu noktaları istemediğime karar verirsem onları şu şekilde kaldırabilirim.

li {
  list-style-type: none;
}

Bunu şimdi CSS'e eklemeyi deneyin.

list-style-type niteliğinin desteklediği değerleri görmek için MDN içerisindeki list-style-type sayfasına bakabilirsiniz. Sayfanın üst kısmında bazı farklı değerleri denemek için etkileşimli bir örnek bulacaksınız ve izin verilen tüm değerler sayfanın altında ayrıntılı olarak verilmiştir. 

Bu sayfaya baktığınızda, liste madde işaretlerinin kaldırmanın yanı sıra bunları değiştirebileceğinizi keşfedeceksiniz — square değerini kullanarak bunları kare madde imlerine dönüştürmeyi deneyin.

Bir sınıf eklemek

Şimdiye kadar nesneleri HTML nesne adlarına göre biçimlendirdik. Bu, belgenizdeki o türdeki tüm nesnelerin 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 nesnelerin bir alt kümesini seçmenin bir yolunu bulmanız gerekecektir. Bunu yapmanın en yaygın yolu, HTML nesnenize bir sınıf eklemek ve bu sınıfı hedeflemektir.

HTML belgenizde, ikinci liste nesnesine bir sınıf özelliği ekleyin. Listeniz şimdi şöyle görünecektir:

<ul>
  <li>Öğe bir</li>
  <li class="special">Öğe iki</li>
  <li>Öğe <em>üç</em></li>
</ul>

CSS'nizde nokta ile başlayan special seçici oluşturarak sınıfı hedefleyebilirsiniz. Aşağıdakileri CSS dosyanıza ekleyin:

.special {
  color: orange;
  font-weight: bold;
}

Sonucun ne olduğunu görmek için kaydedin ve yenileyin.

special sınıfını bu liste nesnesiyle aynı görünüme sahip olmasını istediğiniz herhangi bir nesneye uygulayabilirsiniz. Örn; <span> nesnesi kısmınında turuncu ve kalın olmasını isteyebilirsiniz. bu nesneye class niteliğine special değerini ekleyin ve sayfayı yenileyin. Amacınıza ulaştığınızı göreceksiniz.

Bazen, sınıfla birlikte HTML nesnesinin birlikte kullanıldığı kurallar görürsünüz:

li.special {
  color: orange;
  font-weight: bold;
}

Bu sözdizimi, "özel bir sınıfa sahip li nesnesini hedefleyin" anlamına gelir. Bu şekilde bir tanımlama yaptığınızda bu kuralı <span> veya başka bir nesneye yalnızca sınıf ekleyerek uygulayamazsınız. Bu nesne/nesneler içinde kural tanımlamanız gerekir:

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

Tahmin edebileceğiniz gibi bazı sınıflar birçok nesneye uygulanabilir ve bu şekilde kullanımda her yeni bir nesneye ihtiyaç duyduğunuzda, CSS'nizi yeniden düzenlemek zorunda kalabilirsiniz. Bu nedenle, sadece bir nesne için kurallar oluşturmanız gerektiğini bilmiyorsanız yada başka nesneerede uygulanması gerekmediğinden emin değilseniz, nesneyi kullanmadan basitçe sınıfa kural oluşturmak en iyisidir.

Bir belgedeki konumlarına göre nesneleri şekillendirme

Belgedeki yere bağlı olarak bir nesnenin farklı görünmesini isteyeceğiniz zamanlar olacaktır. Burada size yardımcı olabilecek bir dizi seçici var, ancak şimdilik sadece birkaç tanesine bakacağız. Belgemizdeki iki <em> nesnesi vardır — biri bir paragrafın içinde, diğeri bir liste nesnesinin içerisinde. Yalnızca bir nesnenin içerisine yerleştirilen <em> nesnesini seçmek için, diğer <li> nesnesiyle arasına boşluk karakterini koyarak, soy birleştirici adı verilen bir seçici kullanabilirim.

Aşağıdaki kuralı stil sayfanıza ekleyin.

li em {
  color: rebeccapurple;
}

Bu seçici <li> içindeki (soyundan gelen) <em> nesnesini seçecektir. Dolayısıyla, örnek belgemizde, <em> içerisindeki üçüncü listedeki ifadenin mor olduğunu, ancak dışında kalan ifadenin değişmediğini görmelisiniz. 

Denemek isteyebileceğiniz başka bir şeyde, HTML'den aynı hiyerarşi düzeyindeki bir başlıktan hemen sonra gelen bir paragfarın stilini belirlemektid. Bunu yapmak için seçiciler arasına bir + (Komşu kardeş birleştirici) yerleştirin.

Bu kuralı stil sayfanıza eklemeyi deneyin:

h1 + p {
  font-size: 200%;
}

Aşağıdaki canlı örnek, yukarıdaki iki kuralı içerir. Bir paragrafın içindeyse, yayılma alanını kırmızı yapmak için bir kural eklemeyi dneyin

Not: Gördünüz gibi, CSS bize nesneleri hedeflememiz için birkaç yol sunuyor ve şimdiye kadar sadece yüzeyi gördük! Dersin ilerleyen bölümlerinde Seçiciler makalemizde bu seçicilerin tümüne ve çok daha fazlasına düzgün bir şekilde göz atacağız.

Nesneleri durumuna göre şekillendirme

Bu derste inceleyeceğimiz son stil türü, nesneleri durumlarına göre şekillendirme yeteneğidir. Bunun basit bir örneği, bağlantıların şekillendirilmesidir. Bir bağlantıya şekil verdiğimizde <a> (anchor) nesnesini hedeflememiz gerekir. Bu, ziyaret edilmeme, ziyaret edilme, üzerine gelme, klavye aracılığıyla odaklanma veya tıklanma (etkinleştirilme) sürecine bağlı olarak farklı durumlara sahiptir. Bu farklı durumları hedeflemek için CSS'yi kullanabiliriz — aşağıdaki CSS, ziyaret edilmeyen bağlantılar pembe ve ziyaret edilen bağlantılar yeşildir.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

Kullanıcı fareyle üzerine geldiğinde bağlantının görünümünü değiştirebilirsiniz, örn; bir sonraki kuralda bağlantının altındaki çizgiyi kadırabiliriz.

a:hover {
  text-decoration: none;
}

Aşağıdaki canlı örnekte, bir bağlatının çeşitli durumları için aldığı değerlerle oynayabilirsiniz. Yukarıdaki kuralları buna ekledim ve pembe rengin oldukça açık ve okunması zor olduğunu farkettim — neden bunu daha iyi bir renk ile değiştirmeyeyim ki? Peki bağlantıları kalın yapabilir misin?

 

Bağlantımızın üzerine fareyle gelindiğinde altındaki çizginin kaldırılmasını sağladık. Alt çizgiyi bir bağlantının tüm durumlarından kaldırabilirsiniz. Bununla birlikte, gerçek bir sitede, ziyaretçilerin bir bağlantının bir bağlantı olduğunu bilmesini sağlamak istediğinizi hatırlatmata fayda var. Alt çizgiyi yerinde bırakmak, insanların bir parafrafın içindeki bazı metnin tıklanabileceğini fark etmelerini için önemli bir ipucu olabilir — alıştıkları davranış budur. CSS'deki her şeyde olduğu gibi, değişikliklerinizde dökümanı daha az erişilebilir hale getirme potansiyeli vardır — uygun yerlerde olası tuzakları vurgulamayı hedefleyeceğiz.

Not: Bu derslerde ve MDN genelinde erişilebilirlilikten sık sık bahsedildiğini göreceksiniz. Erişilebilirlik hakkında konuştuğumuzda, web sayfalarımızın herkes tarafından anlaşılabilir ve kullanılabilir olması gerektğinden bahsetmiş olacağız.

Ziyaretciniz, faresi yada izleme panali olan bir bilgisayarda veya dokunmatik ekranlı bir telefonda olabilir. Ya da belgenin içeriğini okuyan bir ekran okuyucu kullanıyor olabilirler ayrıca çok daha büyük metinler kullanmaları yada sadece klavyeyi kullanarak gezinmeleri gerekebilir.

Düz bir HTML belgesine genel olarak herkes erişebilir — bu belgeyi biçimlendirmeye başladığınızda onu daha az erişilebilir hale getirmemeniz önemlidir.

Seçicileri ve birleştiricileri birleştirmek

Birden çok seçici ve birleştiriciyi bir araya getirebileceğinizi belirtmekte fayda var. Örneğin:

/* <article> içinde bulunan <p>'nin içndeki <span> seçer  */
article p span { ... }

/* <h1>'den sonra gelen <ul>'den sonraki <p>'yi seçer.  */
h1 + ul + p { ... }

Birden çok türü bir arada da birleştirebilirsiniz. Aşağıdakileri kodunuza eklemeyi deneyin:

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

Bu kural, <body> nesnesi içerisinde bulunan <h1> nenesinden sonra ilk gelen special sınıfına dahil <p> nesnesini seçer. Vay be!

Orjinal HTML'de şekil verilmeyen tek nesne <span class="special">dir.

Şu anda bu size karmaşık geliyorsa endişelenmeyin — daha fazla CSS yazdıkça buna alışmaya başlayacaksınız.

Gözden geçirmek

Bu Derste, CSS kullanarak bir belgeye şekil uygulamanın birkaç yolunu inceledik. Derslerin geri kalanında ilerledikçe bu bilgiyi geliştireceğiz. Ancak artık metne şekil vermek, belgedki nesneleri hedeflemenin farklı yollarına göre CSS uygulmak ve MDN belgelerinde özellikleri ve değerleri aramak için yeterince bilgiye sahipsiniz.

Bir sonraki derste CSS'in nasıl yapılandırıldığına bir göz atacağız.

Bu kısımda

  1. CSS Nedir?
  2. CSS'e başlarken
  3. CSS nasıl yapılandırılır
  4. CSS nasıl çalışır?
  5. Öğrendiklerimizi uygulamak