---
title: Metni stilini belirleme
slug: Learn/CSS/Styling_text
tags:
  - Acemi
  - Bağlantılar
  - Beginner
  - CSS
  - CodingScripting
  - Fonts
  - Golgelendirme
  - Hat
  - Landing
  - Links
  - Listeler
  - Mektup
  - Metin
  - Modul
  - Module
  - Text
  - Web Yazı Tipleri
  - Yazı Tipi
  - font
  - letter
  - line
  - lists
  - shadow
  - web fonts
translation_of: Learn/CSS/Styling_text
original_slug: Öğren/CSS/Styling_text
---
<div>{{LearnSidebar}}</div>

<p>CSS dilinin temelleri ele alındığında, odaklanmamız gereken bir sonraki konu, CSS ile yapacağımız en yaygın uygulamalardan biri olan metnin stilini oluşturmaktır. Bu ünitede yazı tipini, kalınlığı, italikliği, satır ve harf aralığını, alt gölgeler ve diğer metin özellikerini ayarlamak da dahil olmak üzere metin stilinin temellerine bakacağız. Sayfamıza özel yazı tiplerini uygulamak, listeleri ve bağlantıları şekillerdirmeye bakarak üniteyi tamamlayacağız.</p>

<div class="in-page-callout webdev">
<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun"><span class="highlight-span">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</span></h3>

<p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p>

<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p>
</div>

<h2 id="Ön_Koşullar">Ön Koşullar</h2>

<p>Bu üniteye başlamadan önce, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e giriş</a> ünitesinde ele aldığımız temel HTML bilgisine ve <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS'e giriş</a> ünitesinde ele aldığımız CSS'in temel ilkelerini biliyor olmanız gerekmektedir.</p>

<div class="note">
<p><strong>Not</strong>: Eğer çalışırken kullandığınız cihazınızda (bilgisayar, tablet veya diğer cihazlar) kendi örneklerinizi yazıp çalışabileceğiniz bir ortamınız bulunmuyorsa, <a href="https://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> veya <a href="https://glitch.com/">Glitch</a> ortamlarını çevrimiçi kullanabilirsiniz.</p>
</div>

<h2 id="Rehber">Rehber</h2>

<p>Bu modül, HTML metin içeriğini şekillendirmenin altındaki tüm temelleri öğretecek dersleri içerir.</p>

<dl>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi stili</a></dt>
 <dd>Bu derste yazı tipinin; kalınlığını, ailesini ve stilini, kısa tanımını, hizalanmasını, satır ve harf aralığını ve diğer efektleri ayarlama da dahil olmak üzere metnin/fontun stilini belirlemede kullanacağımız tüm yöntemleri ele alacağız.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Listeleri biçimlendirme</a></dt>
 <dd>Listelerin diğer metinler gibi davranmanın yanında kendilerine özgü bilmeniz gereken bazı davranışları ve dikkat etmeniz bazı uygulamaları vardır. Bu ders de her şeyi açıklayacağım.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Bağlantıları biçimlendirme</a></dt>
 <dd>Bağlantıları şekillendirirken, bağlantı durumlarını etkili bir şekilde biçimlendirmek için sözde sınıflardan nasıl yararlanılacağını, gezinme menüleri ve sekmeler gibi yaygın arayüz özelliklerinde kullanılan bağlantıların nasıl şekillendirileceğini anlamak önemlidir. Bu yazıda tüm bu konuların üzerinden geçeceğiz.</dd>
 <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></dt>
 <dd>Bu derste web yazı tiplerini ayrıntılı olarak inceleyeceğiz  — bunlar, sistemlerde bulunurluluğu az olan fontları veya özel metin stillerini web sayfanızda kullanmanıza olanak sağlayan yaklaşımları ele alacağız.</dd>
</dl>

<h2 id="Değerlendirmeler">Değerlendirmeler</h2>

<p>Aşağıdaki değerlendirme, yukarıdaki rehberlerde anlatılan metin şekillendirme tekniklerini ne düzeyde anladığınızı test edecektir.</p>

<dl>
 <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Bir okulun ana sayfasındaki metinleri şekillendirmek</a></dt>
 <dd>Bu değerlendirme, bir okulun ana sayfasındaki metinlerin stilini belirleme kabileyitini ve metnin şekillendirme konusundaki yaklaşımını test edecektir.</dd>
</dl>

<div class="jfk-bubble gtx-bubble">
<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>

<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 302px;">
<div class="jfk-bubble-arrowimplbefore"></div>

<div class="jfk-bubble-arrowimplafter"></div>
</div>
</div>