CSS değerleri ve birimleri

CSS'de kullanılan her niteliğin, o nitelik için izin verilen değer kümesini tanımlayan bir değer türü vardır. Bu derste en sık kullanılan değer türlerinden bazılarına ve bunların en yaygın değerlerine ve birimlerine bir göz atacağız. Ayrıca MDN'deki nitelik sayfalarındaki açıklamalara göz atman, belirli bir nitelik için geçerli olan değer türüyle ilişkili değerleri anlamana yardımcı olacaktır.

Ö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.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: CSS niteliklerinde kullanılan farklı değer ve birimler hakkında bilgi edinmek

CSS değeri nedir?

CSS eğitiminde ve MDN'deki nitelik sayfalarında, değer türlerini açılı parantezlerle çevrili olarak göreceksin, <color> veya <length> gibi. <color>  veri türünün herhangi bir nitelik için kullanılabilir olduğunu gördüğünüzde; <color> referans sayfasında listelenen değerin, bu niteliğe uygulanabilir olduğu anlamına gelir.

Note: Veri türleri olarak adlandırılan CSS değerlerini de görürsünüz. Terimler temelde birbirinin yerine kullanılabilir. CSS'de veri türü olarak adlandırılan bir terim gördüğünüzde, bu değer türünü söylemenin süslü bir yoludur. Veri türü kullanılmak istenilen, değer türü tarafından desteklenen herhangi bir ifade anlamına gelir.

Note: Evet, CSS değer türleri ile CSS niteliklerini (örn. color nitelik, <color> değer türü). ayırt edebilmek için genellikle açılı parantezler kullanılarak gösterilir. HTML öğeleri ile CSS değer türlerinin ikiside açılı parantezler kullanılarak gösterildiklerinden, kafan karışabilir ancak işlev olarak aynı değillerdir — çok farklı kavramlar için kullanılırlar.

Aşağıdaki örnekte, bir anahtar kelime kullanarak başlığımızın ve arka plan rengimizi rgb() fonksiyonunu kullanarak ayarladık:

h1 { 
  color: black; 
  background-color: rgb(197,93,161); 
} 

CSS'de bir öğeye değer türüyle, izin verilen değerler kümesinin içinden değer atamanın tek yoludur. <color> renk değer türünün farklı şekillerde kullanıldığını gördüğünde telaşlanmana gerek yok — Anahtar kelimeler, onaltılık(hex) değerler, rgb() fonksiyounu, gibi. Ayrıca tarayıcılar tarafından desteklenen tüm <color> değerlerini kullanabilirsin. İstersen her değer için MDN sayfasında tarayıcı desteği hakkında bilgi edinebilirsin. Örn, <color> sayfasına bakarsan tarayıcı uyumluluğu bölümünün, farklı renk veri türlerinin listelediğini ve bunların hangi sürümler tarafından desteklendiği hakkında bilgi verdiğini göreceksin(rgba(), hsla(),vb).

Sıklıkla karşılaşabileceğin bazı değer ve birim türlerine örneklerle birlikte bir göz atalım, böylece farklı olası değerleri deneyebilirisin.

Sayılar, uzunluklar ve yüzdeler

CSS'de, kullanabileceğin çeşitli sayısal değer türleri vardır. Aşağıdakilerin tümü sayısal olarak sınıflandırılmıştır:

Veri tipi Açıklama
<integer> <integer> bir tamsayıyı temsil eder, 1024 veya -55 gibi.
<number> <number> ondalıklı bir sayıyı temsil eder — kesirli bileşeni olan bir ondalık basamağa sahip olabilir veya olmayabilir. Örn, 0.255, 128 veya -1.2.
<dimension>  <dimension> bir birime bağlı olan <number> tipinde bir sayıdır. Örn., 45deg, 5s, or 10px<dimension>; <length>, <angle>, <time>, ve <resolution> değer türlerini içeren bir kapsayıcı kategoridir.
<percentage> <percentage> başka bir değerin bir kısmını temsil eder. Örn., 50%. Yüzde değeri her zaman başka bir miktara bağlıdır. Örn., bir öğenin uzunluğunun, üst değerin uzunluğuna bağlı olması gibi.

Uzunluklar

En sık karşılaşacağın sayısal tür <length>'dir. Örn. 10px (pixels) veya 30em. CSS'de kullanılan iki tür uzunluk vardır — bağıl ve mutlak. işlerin ne kadar karışabileceğini anlamak için farkı bilmek önemlidir.

Mutlak uzunluk birimleri

Aşağıdakilerin tümü mutlak uzunluk birimleridir — başka hiçbir şeye bağlı değildirler ve genellikle her zaman aynı boyutta kabul edilirler.

Birim İsim Eşittir
cm Santimetre 1cm = 96px/2.54
mm Milimetre 1mm = 1/10th of 1cm
Q Çeyrek milimetre 1Q = 1/40th of 1cm
in İnç 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Point 1pt = 1/72th of 1in
px Piksel 1px = 1/96th of 1in

Bu birimlerin çoğu, ekran yerine baskı için kullanıldığında daha kullanışlıdır. Örn., genellike ekrandacm(santimetre) kullanmayız. Yaygın olarak kullanacağın tek değer px(piksel)'dir.

Bağıl uzunluk birimleri

Bağıl uzunluk birimleri başka bir şeye, belki de ana öğenin yazı tipinin boyutuna veya görünüm alanının boyutuna bağlıdır. Bağıl birimleri kullanmanın yararı, dikkatli bir planlama ile, metnin veya diğer öğelerin boyutunu sayfadaki diğer her şeye göre ölçeklenmesini sağlabilmendir.

Birim Bağıl
em Öğenin veya ebeveyninin yazı tipi boyutuna.
ex mevcut yazı tipinin x harfinin yüksekliğine.
ch Öğenin yazı tipinin "0"(sıfır) karakterinin ilerleme ölçüsü(genişliği).
rem Kök(root) öğenin yazı tipi boyutu.
lh Öğenin satır yüksekliği.
vw Görüntü alanı genişliğinin %1'i.
vh Görüntü alanı yüksekliğinin %1'i.
vmin Görüntü alanında küçük olan değerin %1'i.
vmax Görüntü alanının büyük olan değerin %1!i

Bir örnekle keşfedelim

Aşağıdaki örnekte, bazı göreli ve mutlak uzunluk birimlerinin nasıl davrandığını görebilirsin. İlk kutunun width niteliği piksel cinsinden bir değeri vardır. Mutlak bir birim olarak, bu genişlik başka ne değişirse değişsin aynı kalacaktır.

İkinci kutu, vw(görüntü alanı genişliği) birimlerinde ayarlanmış bir genişliğe sahiptir. Bu değer, görüntü alanı genişliğine bağlıdır ve bu nedenle 10vw, görüntü alanının genişliğinin yüzde 10'udur. Tarayıcı pencerenin genişliğini değiştirirsen, kutunun boyutu değişmelidir. Ancak bu örnek, bir <iframe> kullanılarak sayfaya gömüldüğü için tarayıcının genişliğinin değiştirilmesi işe yaramaz. Bunu çalışır bir şekilde görebilmek için, örneği kendi tarayıcı sekmesinde açtıktan sonra denemen gerekir.

Üçücü kutu em birimi kullanır. Bunlar yazı tipi boyutuna bağlıdır. .wrapper sınıfının yazı tipi boyutunu 1em olarak ayarladım. Bu değeri değiştirdiğinde tüm öğelerin yazı tipi boyutunun değiştiğini göreceksin, ancak genişliği yazı tipi boyutuna bağlı olan sadece son öğe olduğu için birtek onun genişliği değişecektir.

ems ve rems

em ve rem kutulardan metne kadar herhangi bir öğeyi boyutlandırırken en sık karşılaşacağın iki göreceli uzunluktur. Bunların nasıl çalıştıklarını ve aralarındaki farkları anlamak önemlidir, özellikle de stil metni veya CSS düzeni gibi daha karmaşık konulara geçmeye başladığında. Aşağıdaki örnek anlayabilmen için bir sunum sunar.

HTML, iç içe geçmiş bir dizi listeden oluşur — Toplamda üç listemiz var ve her iki örnekte de aynı HTML kodları mevcut. Tek fark, ilkinin bir ems sınıfına ve ikicinin bir rems sınıfına sahip olmasıdır.

Başlangıç olarak, <html> öğenin yazı tipi boyutu olarak 16px ayarladık.

Özetlemek gerekirse, tipografi durumunda em birimi "ana öğenin yazı tipi boyutu" anlamına gelir. <li> İçindeki <ul> öğeleri ems sınıfına dahil olan ebeveynlerinden boyutlandırma alır. Böylece, her bir ardışık iç içe geçme düzeyi giderek büyür, çünkü her birinin yazı tiği boyutu 1.3em'dir, ebeveyninin yazı tiği boyutunun 1,3 katıdır.

Özetlemek gerekirse, rem birimi "Kök(root) öğenin yazı tipi boyutu" anlamına gelir (rem "kök em" anlamına gelir). <li> öğesinin içindeki <ul> öğeleri, boyutlarını rems sınıfındaki rem tanımından dolayı kök öğenin<html> yazı tipi boyutundan alır. Birbirini izleyen her yuvada, kök öğenin yazı tipi değişmediğinden, bu öğelerdeki yazı tipi boyutlarıda sabit kalır.

Bununla birlikte, <html> öğesinin font-size niteliğini CSS'de değiştirirsen, diğer her şeyin ona göre değiştiğini göreceksin — hem rem, hemde em buyutlu metinler.

 

Yüzdeler

Çoğu durumda, bir yüzde, uzunlukla aynı şekilde ele alınır. Yüzde olan değer, her zaman başka bir değere göre ayarlanmış olmaktadır. Örneğin, bir öğeyi font-size yüzde olarak ayarlarsan, bu öğenin üst öğesinin font-size nitelik değerinin bir yüzdesi olacaktır. Bir width değer için yüzde kullanırsan, üst öğenin width nitelik değerinin yüzdesi olacaktır.

Aşağıdaki örnekte, yüzde boyutlu iki kutu ve iki piksel boyutlu kutu aynı sınıf adlarına sahiptir. Her iki set de sırasıyla 200 piksel ve %40 genişliğindedir.

Aradaki fark, iki kutudan oluşan ikinci setin 400 piksel genişliğinde bir çerçevenin içinde olmasıdır. İkinci 200 piksel genişliğindeki kutu birincisi ile aynı genişliktedir. ancak ikinci %40'lık kutu şimdi 400 pikselin %40'na sahip olduğundan ilkinden daha dardır!

Bunun nasıl çalıştığını görmek için çerçevenin genişliğini veya yüzde değerini değiştirmeyi dene.

 

Sonraki örnekte yazı tipi boyutları yüzde olarak belirlenmiştir. <li> öğesinin font-size nitelik değeri %80'lik bir paya sahip olduğu ve iç içe yerleştirilmiş liste öğelerinin, boyutlarını üstlerinden devraldığından her bir basamakta giderek küçülür.

 

Birçok değer türü bir uzunluk veya yüzdeyi kabul ederken, yalnızca uzunluğu kabul eden değer türlerinin de olduğunu unutmayın. MDN nitelik referans sayfalarında hangi değerlerin kabul edilip/edilmediğini öğrenebilirsin. İzin verilen değerler <length-percentage>'ri içeriyorsa, bir uzunluk veya yüzde kullanılabilir. izin verilen değer yalnızca <length> içeriyorsa, yüzde kullanmak mümkün değildir.

Sayılar

Bazı değer türleri, herhangi bir birim eklenmeden sayıları kabul eder. Birimsiz bir sayıyı kabul eden bir niteliğe örnek, opacity bir öğenin opaklığını(ne kadar şeffaf olduğunu) kontrol eden özelliktir. Bu özellik 0(tamamen şeffaf) ve 1(şeffaflık yok) arasında bir sayıyı kabul eder.

Aşağıdaki örnekte, opacity değerini değiştirmeyi deneyin. 0 ve 1 arasında çeşitli ondalık değerler vererek kutunun şeffaflığının nasıl değiştiğine dikkat edin.

 

Not:CSS'de değer olarak bir sayı kullandığında, bu sayı tırnak içine alınmamalıdır.

Renk

CSS'de rengi belirlemenin birçok yolu vardır ve bunlardan bazıları yeni yeni desteklenmeye başlamıştır. Metin rengini, arka plan rengini veya başka herhangi bir öğeyi belirtirken aynı rengi kullanabilirsin.

Modern bilgisayarlarda bulunan standart renk sistemi 24bit olup, kanal başına 256 farklı değerde kırmızı, yeşil ve mavi kombinasyonu aracılığıyla yaklaşık 16,7 milyon farklı rengin görüntülenmesini sağlar (256 x 256 x 256 = 16.777.216.) CSS'de renkleri belirlemenin bazı yollarına bir göz atalım.

Not: Bu eğitimde, iyi bir tarayıcı desteğine sahip olan renkleri belirlemenin yaygın yöntemlerine bakacağız, başkaları da var ama anlatacaklarım kadar iyi desteğe sahip değiller ve daha az yaygınlardır.

Anahtar kelime renkleri

Renk belirtmenin basit ve anlaşılır bir yolu oldukları için, buradaki ve MDN'nin başka bir yerindeki örneklerde sıklıkla kullanıldıklarını göreceksin. Bu anahtar kelimelerinin bazıları oldukça eğlenceli isimlere sahip! <color> değer türü için sayfada tam bir liste görebilirsin.

Nasıl çalıştıklarını hakkında daha fazla fikir edinmek için aşağıdaki canlı örneklerde farklı renk değerleriyle oynamayı deneyebilirsin.

Onaltılık RGB değerleri

Karşılaşacağın sonraki renk veri türü değeri onaltılık kodlardır. Her bir onaltılık değer, bir karma/pound sembolünden(#) ve ardından altı onaltılık sayıdan oluşur; bunların her biri 0 ile f(15'şi temsil eder) arasında 16 değerden birini alabilir. yani 0123456789abcdef. Her bir değer çifti, kanallardan birini (kırmızı, yeşil ve mavi) temsil eder ve her biri için mevcut 256 değerden herhangi birini belirlememize olanak tanır (16 x 16 = 256).

Bu değerler biraz daha karmaşık ve anlaşılması daha zordur, ancak anahtar kelimelerden çok daha yönlüdürler — renk düzeninde kullanmak istediğin herhangi bir rengi temsil etmek için onaltılık değerleri kullanabilirsin.

 

Renklerin nasıl değiştiğini görmek için değerleri değiştirmeyi deneyin.

RGB ve RGBA deperleri

Burada bahsedeceğimiz üçüncü şema RGB'dir. RGB değeri, kırmızı, yeşil ve mavi renklerinin kanal değerlerini, onaltılık değerlerle hemen hemen aynı şekilde temsil eden üç parametre verilen bir fonsiyondur — rgb(). onaltılık sistemle arasındaki fark, her kanalın iki onaltılık rakamla değil, 0 ile 255 arasında bir sayıyla temsil edilmesidir — anlaşılması biraz daha kolaydır.

RGB renklerini kullanmak için son örneğimizi yeniden yazalım:

 

Ayrıca RGBA veri türünü de kullanabilirsin — bunlar RGB renkleriyle tamamen aynı şekilde çalışır ve herhangi bir RGB değerini kullanabilirsin. Sadece, şeffaflığı kontrol eden rengin alfa kanalını temsil eden dördüncü bir değeri vardır. Bu değeri 0 olarak ayarlarsan rengi tamamen şeffaf hale getirir, 1 olarak ayarlarsan tamamen opak hale getirir. Ara değerler farklı şeffaflık düzeyi verir.

Not:  Bir renk üzerinde bir alfa kanalı ayarlamanın, daha önce baktığımız opacity niteliğini kullanmaktan önemli bir farkı vardır. Opaklığı kullandığında, öğeyi ve içindeki her şeyi opak yaparsın, RGBA renklerini kullanmak ise yalnızca belirttiğin rengi opak yapar.

Aşağıdaki örnekte, renkli kutularımızın bulunduğu bloğa bir arka plan resmi ekledim. Daha sonra kutuları farklı opaklık değerlerine sahip olacak şekilde ayarladım — alfa kanalı değeri daha küçük olduğunda arka planın nasıl daha fazla göründüğüne dikkat edin.

Bu örnekte, renk çıktısını nasıl etkilediğini görmek için alfa kanalı değerlerini değiştirmeyi deneyin.

Not: rgba() ile rgb()  ve hsl() ile hsla()(aşağıya bakın) birbirinden saf takma ad ile ayrılan ve aynı şekilde hareket edecek şekilde tarayıcılar tarafından güncellendi. Yani, örneğin hem rgba(), hemde rgb() ile alfa kanalı değerleri olmadan renkleri oluşturabiliyoruz. Yukarıdaki örneğin rgba() fonksiyonunu rgb() olarak değiştirin ve renklerin hala çalışıp çalışmadığını görün! Hangi stili kullanacağın size bağlıdır, ancak farklı işlevleri kullanmak, şeffaf olmayan ve şeffaf olan renk tanımlarını ayırmak için daha iyi tarayıcı desteği sağlar ve kodunuzda şeffaf renklerin nerede tanımlandığının görsel bir göstergesi olarak işlev görebilir.

HSL ve HSLA değeri

RGB'den biraz daha az desteklenen HSL renk modelidir(IE'nin eski sürümlerinde desteklenmez) ve tasarımcıların büyük ilgisinden sonra uygulanmıştır. hsl() fonksiyonu, kırmızı, yeşil ve mavi değerleri yerine 16,7 milyon rengi ayırt etmek için kullanılan ton, doygunluk ve açıklık değerlerini kabul eder, ancak farklı bir şekilde:

  • Ton: Rengin temel tonudur. Bu, renk tekerleği etrafındaki açıları temsil eden, 0 ile 360 arasında bir değer alır.
  • Doygunluk: Renk ne kadar doygun? Bu, 0'ın renk olmadığı (gri gölgesi olarak görünecektir) ve %100'ün tam renk doygunluğu olduğu %0 ile %100 arasında bir değer alır.
  • Hafiflik: Renk ne kadar açık veya parlak? Bu, 0'ın ışık olmadığı (tamamen siyah görünür) ve %100'ü tam ışık olduğu(tamamen beyaz görünür) %0 ile %100 arasında bir değer alır

HSL renklerini şu şekilde kullanmak için RGB örneğini güncelleyebiliriz:

 

RGB'nin RGBA'ya sahip olması gibi, HSL'nin de bir HSLA tipinde bir eşdeğeri vardır, bu da alfa kanalını belirtmen için size aynı yeteneği verir. Bunu aşağıda RGBA örneğimi HSLA renklerini kullanacak şekilde değiştirerek gösterdim.

 

Bu renk değerlerinden herhangi birini projelerinde kullanabilirsin. Çoğu proje için bir renk paletine karar vermen ve ardından bu renkleri — ve seçtiğin rengi belirleme yöntemini — tüm proje boyunca aynı modeli kullanman muhtemeldir. Renk modellerini karıştırıp kullanabilirsin, ancak tutarlılık için genellikle en iyisi projenin bütününde, aynı modeli kullanmandır!

Görüntüler

<image> değer türü kullanıldığı herhangi bir yerde geçerli bir görüntü değeri taşır. Bu, bir url() fonksiyonu ile işaret edilen gerçek bir görüntü dosyası veya bir gradyan olabilir.

Aşağıdaki örnekte, CSS background-image niteliğine tanımlanan bir görüntü ve gradyanı gösterdik.

 

Not: <image> için olası başka veri türleri de vardır, ancak bunlar daha yenidir ve şu anda daha az tarayıcı desteğine sahiptir. Daha fazla bilgi edinmek istiyorsan, MDN'deki <image> sayfasına bakabilirsin.

Konum

<position> değer türü, arka plan görüntüsünü, 2 Boyutlu koordinat sistemine göre öğeye konumlandırmak(background-position üzerinden) için kullanılan bir değerdir. Değer türü, top, left, bottom, right, ve center gibi anahtar kelimeleri alabilir, kutunun üst ve sol kenarından uzaklıkları temsil eden 2 boyutlu bir koordinatlamayı da kullanabilir.

Tipik bir konum değeri iki değerden oluşur — birincisi konumu yatay, ikincisi dikey olarak ayarlar. Yalnızca bir eksen için değerler belirtirsen, diğeri varsayılan olacaktır: center.

Aşağıdaki örnekte, bir anahtar kelime kullanarak kabın üstünden 40 piksel uzaklıkta, sağ tarafa dayalı bir arka plan yerleştirdik:

 

Görüntünün nasıl hareket ettirebileceğini görebilmek içn bu değerlerle oynayabilirsin.

Dizeler ve tanımlayıcılar

Daha önceki örneklerde, anahtar kelimelerin nerede ve nasıl kullanıldıklarını gördük(Örn., <color> değer türünde kullandığımız red, black, rebeccapurple, ve goldenrod  anahtar kelimeleri gibi). Bu anahtar kelimeler, tanımlayıcılar olarak ifade edilir ve CSS'de onların özel değer olduklarını anlar. Bu nedenle, alıntı yapılmaz — dizeler olarak değerlendirilmezler.

CSS'de dizeleri kullandığımız yerler de var. örneğin oluşturulan içeriği belirtirken. Bu durumda, değer bir dizge olduğunu göstemek için tırnak içine alınır. Aşağıdaki örnekte, tırnak içinde oluşturulmuş bir içerik dizesi ile birlikte alıntılanmamış renk anahtar sözcükleri kullanıyoruz.

 

Fonksiyonlar

Bakacağımız son değer türü, fonksiyonlar olarak bilinen değerler grubudur. Programlamada, bir fonksiyon, hem geliştirici hem de bilgisayar tarafından minimum çabayla tekrar eden bir görevi tamamlamak için birden çok kez çalıştırılabilen ve yeniden kullanılabilir olan kod bölümüdür. Fonksiyonlar genellikle JavaScript, Python veya C++ gibi dillerle ilişkilendirilir, ancak nitelik değerleri olarak CSS'de de bulunurlar. Zaten renkler bölümünde eylem fonksiyonlarını gördük — rgb(), hsl() ve bir dosyadan görüntüyü döndürmek için kullanılan url() gibi.

calc() geneneksel bir programlama dilinde bulabileceğin fonksiyonlara benzeyen bir CSS fonksiyonudur. Bu fonksiyon, basit hesaplamalar yapabilmeni sağlar. Projen için CSS'i yazarken tanımlayamadığın değerleri hesaplamak istiyorsan ve tarayıcının çalışma zamanında sizin için hesaplama yapmasını istediğin durumlarda yararlıdır.

Örneğin, aşağıda calc() fonksiyonunu kutunun genişliğini %20 + 100px yapmak için kullanıyoruz. %20, ebeveyn öğesinin genişliğinden hesaplanır. .wrapper sınıfında tanımlanan genişlik değeri değişirse oğul öğenin genişliğide değişir. Bu hesaplamayı önceden yapamayız çünkü ebeveynin %20'sinin ne olacağını bilmiyoruz, bu yüzden calc() fonksiyonunu kullanarak tarayıcıya bunu bizim için yapmasını söyleyebiliriz.

Becerilerini test et!

Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. Becerilerini test et: Değerler ve birimler.

Özet

Bu, karşlaşabileceğin en yaygın değer ve birim türlerinin hızlı bir şekilde gözden geçerilmesi olmuştur. CSS Değerleri ve birimleri referans sayfasındaki tüm farklı türlere göz atabilirsin; bu derslerde çalışırken bunların çoğuyla karşılaşacaksın.

Unutulmaması gereken en önemli konu, her özelliğin izin verilen değer türlerinin tanımlanmış bir listesine sahip olması ve her değer türünün değelerinin ne olduğunu açıklayan bir tanıma sahip olmasıdır. Daha sonra MDN'de ayrıntılara bakabilirsin.

Örneğin <image>  bir renk gradyanı oluşturmana da izin veren yaklaşımı yararlıdır, ancak yazılışından bu yaklaşıma sahip olduğunun anlaşılması zordur.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de elemanların boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme