CSS'e başlarken

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

Ö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ü incele)
Amaç: Bir CSS belgesini bir HTML doyasına bağlamanın temellerini anlamak ve CSS ile basit metin biçimlendirme yapabilmek.

HTML ile başlayalım

Başlangıç noktamız bir HTML belgesidir. Kendi bilgisayarında çalışmak istiyorsan şağıdaki kodu kopyalayabilirsin(Yeniden yazmak pratik için daha 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 etiketi</span> 
ve ayrıca bir <a href="http://example.com">bağlantı</a> var.</p>

    <p>Bu ikinci paragraftır. <em>vurgulanan</em> bir metin 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 bir ortamda okuyorsan endişelenme. Burada, doğrudan web sayfasında örnek kod yazmana izin veren canlı kod düzenleyicileri aşağıda verilmiştir. Fakat bu çalışmaları; kullanmayı planladığın bir editörde çalışman, editörünüzü tanımana ve onu daha etkili kullanmana olanak sağlar.

Belgene CSS eklemek

Yapman 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 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 belgenle aynı klasörde adı styles.css bir dosya oluşturun. .css dosya uzantısı bu dosyanın bir css dosyası olduğunu belirtir.

index.html belgesindeki <head> etiketinin içinde styles.css dosyasına bağlantı oluşturmak için:

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

Bu <link> etiketi 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 edebilirsin.

h1 {
  color: red;
}

HTML ve CSS dosyalarını kaydedin ve index.html dosyasını bir web tarayıcısında yükle. 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. Doğru görünmüyorsa, her şeyi doğru yazdığını kontrol edin.

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

HTML öğelerini şekillendirme

Başlığımızı kırmızı yaparak, bir HTML öğesini seçebileceğimizi ve biçimlendirebileceğimizi göstermiş olduk. Bunu, bir öğe seçiciyle yaptık — bu HTML öğe etiketiyle doğrudan eşleşen bir seçicidir. Belgedeki tüm paragrafları seçebilmek için p seçiciyi kullanırsın. Tüm paragrafları yeşile çevirmek için:

p {
  color: green;
}

seçicileri virgülle ayırarak birden çok seçiciyi aynı anda seçebilirsin. Tüm paragrafları ve tüm liste öğelerinin yeşil olmasını istersek, kural şöyle görünür:

p, li {
    color: green;
}

Bunu aşağıdaki etkileşimli düzenleyicide veya yerel uygulamanda dene.

 

Öğelerin 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 madde işaretleri var. Bunun nedeni, tarayıcların varsayılan olarak tüm sayfalara uyguladı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, bir web geliştiricisi tarayıcının yapmış olduğu tercihlerden farklı tercihleri olacaktır(yoksa tüm web sayfaları aynı gözükürdü). Bunu, görünüşünü veya davranışını değiştirmek istediğin HTML öğesini seçerek ona yeni bir CSS kuralı tanımlayarak yapabiliriz. Buna, sırasız listemiz <ul> iyi bir örnektir. Listemizde noktalar var ve bu noktaları istemediğime karar verirsem onları şu şekilde kaldırabilirim.

li {
  list-style-type: none;
}

Örneği CSS'e ekleme.

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

Bu referans sayfasına baktığında, listenin madde işaretlerini kaldırmanın yanı sıra bunları değiştirebileceğini göreceksin — square değerini kullanarak bunları kare madde imlerine dönüştürmeyi dene.

Bir sınıf eklemek

Şimdiye kadar öğeleri HTML etiket adlarına göre biçimlendirdik. Bunu, belgendeki o türdeki tüm öğelerin aynı görünmesini istediğimizde kullanırız. Bazı durumlarda belgedeki aynı türdeki tüm öğelerin yerine belirli öğeleri seçmek isteyebilirsin. Bunu yapmanın en yaygın yolu da, HTML öğelerini bir sınıfa eklemek ve bu sınıfı seçmektir.

HTML belgende, ikinci liste(<ul>) öğeni bir sınıf etiketi ekle. Listeni oluşturan kodlar artık böyle gözükmeli:

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

CSS'nde nokta ile başlayan special seçici kullanarak sınıfı seçebilirsin. Aşağıdakileri CSS kurallarını dosyana ekle:

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

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

special sınıfını bu liste öğesiyle aynı görünüme sahip olmasını istediğin herhangi bir öğeye uygulayabilirsin. Örn; <span> öğesinin içeriğininde turuncu ve kalın olmasını isteyebilirsin. bu öğeyenin class niteliğine special değerini ekle ve sayfayı yenile. Amacına ulaştığını göreceksin.

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

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

Bu sözdizimi, "special sınıfana dahil bir li öğesi seç" anlamına gelir. Bu şekilde bir kural tanımladığında, bu kuralı <span> veya başka bir öğeye yalnızca sınıf ekleyerek uygulayamazsın. Bu öğe veya öğeler içinde kural tanımlaman gerekir:

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

Bu şekilde kısıtlayıcı bir tanımlamada bulunursan, aynı kuralların uygulanmasını istediğin yeni bir öğe eklediğinde, CSS'ini yeniden düzenlemek veya yeni bir kural eklemek zorunda kalabilirsin. Bu nedenle, bir öğeye özel kural oluşturman gerektiğinden emin değilsen veya başka öğelerede bu kuralları uygulanıp uygulanmayacağından emin değilsen, bu kullanım yerine öğe seçicileri kullanmadan sınıfa kural oluşturmak en iyisidir.

Belgedeki konumlarına göre öğeleri şekillendirme

Belgede bulundukları yere bağlı olarak bir öğenin farklı görünmesini isteyeceğin zamanlar da olacaktır. Burada size yardımcı olabilecek bir dizi seçici var, ancak şimdilik sadece birkaç tanesine bakacağız. Belgemizdeki iki <em> öğesi vardır — biri bir paragrafın içinde, diğeri bir listenin içinde. Yalnızca <li> öğesinin içerisine yerleştirilen <em> öğesini seçmek için, diğer  seçiciyle arasına boşluk karakterini koyarak, soy birleştirici adı verilen bir seçici kullanabilirim.

Aşağıdaki kuralı stil sayfana ekle.

li em {
  color: rebeccapurple;
}

Bu seçici <li> içindeki (soyundan gelen) <em> öğesini 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örmelisin. 

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

Bu kuralı stil sayfana eklemeyi dene:

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

Aşağıdaki etkileşimli örnekte, yukarıdaki iki kuralı içerir. Sizde bir paragrafın içindeki <span> öğesinin içeriğinin kırmızı olmasını sağlayan kuralı ekle. İlk paragraftaki kapsam içeriğinin kırmızı olduğunu ve birinci liste öğesinin içerisindeki kapsam içeriğinin renginin değişmediğini görmek kuralın doğru yazıldığını doğrulayacaktır.

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

Öğeleri durumuna göre şekillendirme

Bu derste inceleyeceğimiz son stil türü, öğelerin durumlarına göre şekillendirme yeteneğidir. Örn. bağlantıların şekillendirilmesi. Bir bağlantıya şekil verdiğimizde <a> (anchor) öğesini seçmemiz gerekir. Bu, ziyaret edilmeme, ziyaret edilme, üzerine gelme, klavye aracılığıyla odaklanma veya tıklanma sürecine bağlı olarak farklı durumlara sahiptir. Bu farklı durumları seçmek için CSS'i kullanabiliriz — aşağıdaki CSS kuralında, ziyaret edilmeyen bağlantıların pembe ve ziyaret edilen bağlantıların ise yeşil gözükmesini sağlar.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

Kullanıcı fareyle üzerine geldiğinde bağlantının görünümünü de değiştirebilirsin. Örneğimizde farenin imleciyle bir bağlantının üzerine gelindiğinde bağlantının altında bulunan çizgi kaldırılır.

a:hover {
  text-decoration: none;
}

Aşağıdaki etkileşimli örnekte, bir bağlantı öğesinin farklı durumlarını şekillendirmek için kullanılan kuralların, değerleriyle oynamayı deneyiz. Size örnek olması için yukarıdaki kuralları sizin için ekledim ve pembe renginin oldukça açık olduğunu ve okunmasının zor olduğunu farkettim — daha iyi bir okunurluk için bu rengi neden değiştirmeyesin ki? Bunu yapmışken bağlantıların metinlerini 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ırabilirsin. Fakat gerçek bir sitede, ziyaretçilerin bir bağlantının bir bağlantı olduğunu bilmesini istediğini hatırlatmakta fayda var. Alt çizgiyi yerinde bırakmak, insanların bir paragrafın içindeki bir metnin tıklanabileceğini fark etmeleri için önemli bir ipucu olabilir — alıştıkları davranış budur. Tasarımında, CSS'de 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öreceksin. Erişilebilirlik hakkında konuştuğumuzda, web sayfalarımızın herkes tarafından anlaşılabilir ve kullanılabilir olması gerektiğinden bahsetmiş olacağız.

Ziyaretcin, 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ığında onu daha az erişilebilir hale getirmemen önemlidir.

Seçicileri ve birleştiricileri birleştirmek

Birden çok seçici ve birleştiriciyi bir araya getirebileceğini 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ştirebilirsin. Aşağıdakileri koduna eklemeyi dene:

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

Bu kural, <body> öğesinin içerisinde bulunan <h1> öğesinden sonra ilk gelen special sınıfına dahil <p> öğesini seçer. Vay be!

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

Şu anda bu size karmaşık geliyorsa endişelenme — daha fazla CSS yazdıkça buna anlamaya başlayacaksın.

Özet

Bu derste, CSS kullanarak bir belgeye şekil uygulamanın birkaç yolunu inceledik. Konunun ilerleyen bölümlerinde bu bilgiyi geliştireceğiz. Şu anda metne şekil vermeyi, öğeleri seçmenin farklı yollarıyla kurallar oluşturmayı ve MDN belgelerinde nitelikleri ve atanabilen değerler hakkında araştırma yapabilecek kadar bilgiye sahipsin.

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