Yazı Tipi Boyutu

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 19 / 76.

CSS'de font-size özelliği, bir HTML öğesinin 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. Yazı tipi boyutlarını ayarlamak için en basit ve yaygın olarak kullanılan birimdir.

Ems (em): Üst öğenin yazı tipi boyutunu temel alan göreli bir birimdir. Örneğin, üst öğenin yazı tipi boyutu 16px ise 1em, 16px'e; 2em ise 32px'e eşittir ve bu şekilde devam eder.

Rem'ler (rem): Kök öğenin (<html>) yazı tipi boyutunu temel alan göreli 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 boyutunu temel alan göreli birimdir. Örneğin, üst öğenin yazı tipi boyutu 16px ise 100%, 16px'e; 150% ise 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 ayarlanır, tüm <h1> başlıkları 2.5em olarak ayarlanır (bu değer, üst öğelerinin yazı tipi boyutuna göreli olacaktır), belgenin temel yazı tipi boyutu 1.4rem olarak ayarlanır ve small-text sınıfına sahip tüm öğelerin yazı tipi boyutu 80% olarak ayarlanır (bu değer, üst öğelerinin yazı tipi boyutuna göreli olacaktır).

Görev

Kolay

Size bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) içeren bir HTML belgesi verilmiştir. Göreviniz, bu öğeleri biçimlendirmek 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.

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>