Yazı Tipi Kalınlığı

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

CSS'de, font-weight özelliği, bir HTML öğesi içindeki metnin kalınlığını veya inceliğini kontrol etmek için kullanılır.

font-weight için yaygın sayısal değerler şunlardır:

100: İnce
200: Ekstra Hafif
300: Hafif

400: Normal
500: Orta
600: Yarı Kalın

700: Kalın
800: Ekstra Kalın
900: Siyah

font-weight için yaygın anahtar kelime değerleri şunlardır:

normal: 400 ile eşdeğerdir
bold: 700 ile eşdeğerdir

lighter: Üst öğeden daha ince bir ağırlık belirtir
bolder: Üst öğeden daha kalın bir ağırlık belirtir

Örneğin:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

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 stillendirmek için font-weight özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<h1> öğesini hedefleyen bir CSS kuralı yazın. font-weight değerini 900 olarak ayarlayın.
<p> öğesini hedefleyen bir CSS kuralı yazın. font-weight değerini lighter olarak ayarlayın.
<div> öğesini hedefleyen bir CSS kuralı yazın. font-weight değerini 600 olarak ayarlayın.

Kopya kağıdı

font-weight özelliği, metnin kalınlığını veya inceliğini kontrol eder.

Sayısal değerler:

100: İnce (Thin)
200: Ekstra Hafif (Extra Light)
300: Hafif (Light)
400: Normal
500: Orta (Medium)
600: Yarı Kalın (Semi Bold)
700: Kalın (Bold)
800: Ekstra Kalın (Extra Bold)
900: Siyah (Black)

Anahtar kelime değerleri:

normal: 400 değerine eşittir
bold: 700 değerine eşittir
lighter: Üst öğeden daha ince ağırlık
bolder: Üst öğeden daha kalın ağırlık

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Kendin dene

<html>
<head>
    <title>Font Weight</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>