Yazı Tipi Boyutu

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 19 / 76.

CSS'de, font-size özelliği bir HTML öğesi içindeki metnin boyutunu kontrol etmek için kullanılır.

Yazı tipi boyutlarını belirtmek için kullanılan bazı yaygın birimler şunlardır:

Pikseller (px): Yazı tipi boyutunu piksel cinsinden belirten mutlak bir birimdir. Bu, yazı tipi boyutlarını ayarlamak için en basit ve en yaygın kullanılan birimdir.

Ems (em): Üst öğenin (parent element) yazı tipi boyutuna dayanan göreceli bir birimdir. Örneğin, üst öğenin yazı tipi boyutu 16px ise, 1em 16px'e eşittir, 2em 32px'e eşittir ve bu şekilde devam eder.

Rems (rem): Kök öğenin (<html>) yazı tipi boyutuna dayanan göreceli bir birimdir. Bu birim, üst öğelerin yazı tipi boyutundan etkilenmediği için belge genelinde daha fazla tutarlılık sağlar.

Yüzdeler (%): em birimine benzer şekilde, üst öğenin yazı tipi boyutuna dayanan göreceli bir birimdir. Örneğin, üst öğenin yazı tipi boyutu 16px ise, 100% değeri 16px'e, 150% değeri 24px'e eşittir ve bu şekilde devam eder.

Örneğin:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Bu örnekte, tüm <p> (paragraf) öğelerinin yazı tipi boyutu 16px olarak, tüm <h1> başlıkları 2.5em (üst öğelerinin yazı tipi boyutuna göre ayarlanacaktır) olarak ayarlanmıştır; belgenin temel yazı tipi boyutu 1.4rem olarak belirlenmiştir ve small-text sınıfına sahip tüm öğelerin yazı tipi boyutu 80% (üst öğelerinin yazı tipi boyutuna göre ayarlanacaktır) olarak ayarlanmıştır.

Görev

Kolay

Bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğeleri stillendirmek için font-size özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<h1> öğesini hedefleyen bir CSS kuralı yazın. font-size değerini 32px olarak ayarlayın.
<p> öğesini hedefleyen bir CSS kuralı yazın. font-size değerini 1.2em olarak ayarlayın.
<div> öğesini hedefleyen bir CSS kuralı yazın. font-size değerini 120% olarak ayarlayın.

Kopya kağıdı

font-size özelliği, bir HTML öğesi içindeki metnin boyutunu kontrol eder.

Yazı tipi boyutları için yaygın birimler:

Pikseller (px): Yazı tipi boyutunu piksel cinsinden belirten mutlak birim
Ems (em): Üst öğenin yazı tipi boyutuna dayalı göreceli birim
Rems (rem): Kök öğenin yazı tipi boyutuna dayalı göreceli birim
Yüzdeler (%): Üst öğenin yazı tipi boyutuna dayalı göreceli birim

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Kendin dene

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>