unslug tr: move

6 files changed, 1285 insertions, 0 deletions

diff --git a/files/tr/learn/css/first_steps/getting_started/index.html b/files/tr/learn/css/first_steps/getting_started/index.html
new file mode 100644
index 0000000000..b3d18a095a
--- /dev/null
+++ b/files/tr/learn/css/first_steps/getting_started/index.html
@@ -0,0 +1,272 @@
+---
+title: CSS'e başlarken
+slug: Öğren/CSS/Ilk_adimlar/Getting_started
+tags:
+  - Acemi
+  - Beginner
+  - CSS
+  - Classes
+  - Durum
+  - Elements
+  - Example
+  - Learn
+  - Ogeler
+  - Ornekler
+  - Selectors
+  - Sozdizimi
+  - Syntax
+  - Sınıflar
+  - oğrenin
+  - seçiciler
+  - state
+translation_of: Learn/CSS/First_steps/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">Bu derste, basit bir HTML belgesi alıp ona CSS uygulayacağız. Bu sırada dil hakkında bazı pratik bilgiler öğreneceksini.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Ön koşullar:</th>
+   <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve  HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü incele)</td>
+  </tr>
+  <tr>
+   <th scope="row">Amaç:</th>
+   <td>Bir CSS belgesini bir HTML doyasına bağlamanın temellerini anlamak ve CSS ile basit metin biçimlendirme yapabilmek.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_ile_başlayalım">HTML ile başlayalım</h2>
+
+<p>Başlangıç noktamız bir HTML belgesidir. Kendi bilgisayarında çalışmak istiyorsan şağıdaki kodu kopyalayabilirsin(Yeniden yazmak pratik için daha iyi olacaktır). Aşağıdaki kodu dosya adı <code>index.html</code> olacak şekilde bir klasöre kaydedin.</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html lang="tr"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;CSS'ye başlarken&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;h1&gt;Ben birinci seviye bir başlığım&lt;/h1&gt;
+
+    &lt;p&gt;Bu bir paragraf metnidir. Metinde bir &lt;span&gt;span etiketi&lt;/span&gt;
+ve ayrıca bir &lt;a href="http://example.com"&gt;bağlantı&lt;/a&gt; var.&lt;/p&gt;
+
+    &lt;p&gt;Bu ikinci paragraftır. &lt;em&gt;vurgulanan&lt;/em&gt; bir metin içerir.&lt;/p&gt;
+
+    &lt;ul&gt;
+        &lt;li&gt;Öğe bir&lt;/li&gt;
+        &lt;li&gt;Öğe iki&lt;/li&gt;
+        &lt;li&gt;Öğe &lt;em&gt;üç&lt;/em&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: Bunu bir cihazda veya kolayca dosya oluşturamadığın bir ortamda okuyorsan endişelenme. Burada, doğrudan web sayfasında örnek kod yazmana izin veren canlı kod düzenleyicileri aşağıda verilmiştir. Fakat bu çalışmaları; kullanmayı planladığın bir editörde çalışman, editörünüzü tanımana ve onu daha etkili kullanmana olanak sağlar.</p>
+</div>
+
+<h2 id="Belgene_CSS_eklemek">Belgene CSS eklemek</h2>
+
+<p>Yapman gereken ilk şey, HTML belgesine, kullanmasını istediğimiz bazı CSS kurallarımız olduğunu söylemektir. Sıklıkla karşılaşacağın bir HTML belgesine CSS'si eklemenin üç farklı yolu vardır. Ancak şimdilik bunu yapmanın en olağan ve kullanışlı yoluna bakacağız — <em>CSS'i belgemizin başından bağlamak.</em></p>
+
+<p>HTML belgenle aynı klasörde adı <code>styles.css</code> bir dosya oluşturun. <code>.css</code> dosya uzantısı bu dosyanın bir css dosyası olduğunu belirtir.</p>
+
+<p><code>index.html</code> belgesindeki {{htmlelement("head")}} etiketinin içinde <code>styles.css</code> dosyasına bağlantı oluşturmak için:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
+
+<p>Bu {{htmlelement("link")}} etiketi tarayıcıya,  <code>rel</code> niteliği ile bu dosyanın bir stil sayfası olduğunu ve <code>href</code> niteliğiylede dosyanın bulunduğu konumu söyler. <code>styles.css</code> dosyası içerisine bir kural ekleyerek CSS'in çalışıp çalışmadığını kontrol edebilirsin.</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: red;
+}</pre>
+
+<p>HTML ve CSS dosyalarını kaydedin ve <code>index.html</code> dosyasını bir web tarayıcısında yükle. Belgenin üst kısmındaki birinci düzey başlık şimdi kırmızı olmalıdır. Eğer öyleyse tebrik ederim — bir HTML belgesine bir miktar CSS'i başarıyla uyguladın. Doğru görünmüyorsa, her şeyi doğru yazdığını kontrol edin.</p>
+
+<p><code>styles.css</code> yerel olarak çalışmaya devam edebilir veya bu eğiticiye devam etmek için aşağıdaki etkilşimli düzenleyiciyi kullanabilirsin. Etkileşimli düzenleyici, yukarıdaki belgemizde olduğu gibi ilk paneldeki CSS'i HTML belgesine bağlıymış gibi davranır.</p>
+
+<h2 id="HTML_öğelerini_şekillendirme">HTML öğelerini şekillendirme</h2>
+
+<p>Başlığımızı kırmızı yaparak, bir HTML öğesini seçebileceğimizi ve biçimlendirebileceğimizi göstermiş olduk. Bunu, bir <em>öğe seçiciyle</em> yaptık — bu HTML öğe etiketiyle doğrudan eşleşen bir seçicidir. Belgedeki tüm paragrafları seçebilmek için <code>p</code> seçiciyi kullanırsın. Tüm paragrafları yeşile çevirmek için:</p>
+
+<pre class="brush: css notranslate">p {
+  color: green;
+}</pre>
+
+<p>seçicileri virgülle ayırarak birden çok seçiciyi aynı anda seçebilirsin. Tüm paragrafları ve tüm liste öğelerinin yeşil olmasını istersek, kural şöyle görünür:</p>
+
+<pre class="brush: css notranslate">p, li {
+    color: green;
+}</pre>
+
+<p>Bunu aşağıdaki etkileşimli düzenleyicide veya yerel uygulamanda dene.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>
+
+<h2 id="Öğelerin_varsayılan_davranışlarını_değiştirme">Öğelerin varsayılan davranışlarını değiştirme</h2>
+
+<p>İyi işaretlenmiş bir HTML belgesine baktığımızda, örneğimiz kadar basit bile olsa, tarayıcının bazı varsayılan stil ekleyerek HTML'yi nasıl okunabilir hale getirdiğini görebilirz. Başlıklar büyük ve kalın ve listemizde madde işaretleri var. Bunun nedeni, tarayıcların varsayılan olarak tüm sayfalara uyguladıkları vasayılan stilleri içeren dahili stil sayfalarına sahip olmasıdır. Onlar olmadan tüm metin bir yığın halinde bir araya gelir ve her şeyi sıfırdan şekillendirmemiz gerekirdi. Tüm modern tarayıcılar, varsayılan olarak HTML içeriğini hemen hemen aynı şekilde görüntüler.</p>
+
+<p>Ancak, bir web geliştiricisi tarayıcının yapmış olduğu tercihlerden farklı tercihleri olacaktır(yoksa tüm web sayfaları aynı gözükürdü). Bunu, görünüşünü veya davranışını değiştirmek istediğin HTML öğesini seçerek ona yeni bir CSS kuralı tanımlayarak yapabiliriz. Buna, sırasız listemiz <code>&lt;ul&gt;</code> iyi bir örnektir. Listemizde noktalar var ve bu noktaları istemediğime karar verirsem onları şu şekilde kaldırabilirim.</p>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+}</pre>
+
+<p>Örneği CSS'e ekleme.</p>
+
+<p><code>list-style-type</code> niteliğinin desteklediği değerleri görmek için MDN içerisindeki <code><a href="/tr/docs/Web/CSS/list-style-type">list-style-type</a></code> sayfasına bakabilirsin. Sayfanın üst kısmında bazı farklı değerleri denemek için etkileşimli bir örnek bulacaksın ve izin verilen tüm değerler sayfanın altında ayrıntılı olarak verilmiştir. </p>
+
+<p>Bu referans sayfasına baktığında, listenin madde işaretlerini kaldırmanın yanı sıra bunları değiştirebileceğini göreceksin — <code>square</code> değerini kullanarak bunları kare madde imlerine dönüştürmeyi dene.</p>
+
+<h2 id="Bir_sınıf_eklemek">Bir sınıf eklemek</h2>
+
+<p>Şimdiye kadar öğeleri HTML etiket adlarına göre biçimlendirdik. Bunu, belgendeki o türdeki tüm öğelerin aynı görünmesini istediğimizde kullanırız. Bazı durumlarda belgedeki aynı türdeki tüm öğelerin yerine belirli öğeleri seçmek isteyebilirsin. Bunu yapmanın en yaygın yolu da, HTML öğelerini bir sınıfa eklemek ve bu sınıfı seçmektir.</p>
+
+<p>HTML belgende, ikinci liste(<code>&lt;ul&gt;</code>) öğeni bir <a href="/tr/docs/Web/HTML/Global_attributes/class">sınıf etiketi</a> ekle. Listeni oluşturan kodlar artık böyle gözükmeli:</p>
+
+<pre class="brush: html; highlight[3] notranslate">&lt;ul&gt;
+  &lt;li&gt;Öğe bir&lt;/li&gt;
+  &lt;li class="special"&gt;Öğe iki&lt;/li&gt;
+  &lt;li&gt;Öğe &lt;em&gt;üç&lt;/em&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>CSS'nde nokta ile başlayan <code>special</code> seçici kullanarak sınıfı seçebilirsin. Aşağıdakileri CSS kurallarını dosyana ekle:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Sonucun ne olduğunu görmek için kaydedin ve yenile.</p>
+
+<p><code>special</code> sınıfını bu liste öğesiyle aynı görünüme sahip olmasını istediğin herhangi bir öğeye uygulayabilirsin. Örn; <code>&lt;span&gt;</code> öğesinin içeriğininde turuncu ve kalın olmasını isteyebilirsin. bu öğeyenin <code>class</code> niteliğine <code>special</code> değerini ekle ve sayfayı yenile. Amacına ulaştığını göreceksin.</p>
+
+<p>Bazen, sınıfla birlikte HTML öğelerinin birlikte kullanıldığı kurallar görürsünüz:</p>
+
+<pre class="brush: css notranslate">li.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Bu sözdizimi, "special sınıfana dahil bir <code>li</code> öğesi seç" anlamına gelir. Bu şekilde bir kural tanımladığında, bu kuralı <code>&lt;span&gt;</code> veya başka bir öğeye yalnızca sınıf ekleyerek uygulayamazsın. Bu öğe veya öğeler içinde kural tanımlaman gerekir:</p>
+
+<pre class="brush: css notranslate">li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Bu şekilde kısıtlayıcı bir tanımlamada bulunursan, aynı kuralların uygulanmasını istediğin yeni bir öğe eklediğinde, CSS'ini yeniden düzenlemek veya yeni bir kural eklemek zorunda kalabilirsin. Bu nedenle, bir öğeye özel kural oluşturman gerektiğinden emin değilsen veya başka öğelerede bu kuralları uygulanıp uygulanmayacağından emin değilsen, bu kullanım yerine öğe seçicileri kullanmadan sınıfa kural oluşturmak en iyisidir.</p>
+
+<h2 id="Belgedeki_konumlarına_göre_öğeleri_şekillendirme">Belgedeki konumlarına göre öğeleri şekillendirme</h2>
+
+<p>Belgede bulundukları yere bağlı olarak bir öğenin farklı görünmesini isteyeceğin zamanlar da olacaktır. Burada size yardımcı olabilecek bir dizi seçici var, ancak şimdilik sadece birkaç tanesine bakacağız. Belgemizdeki iki <code>&lt;em&gt;</code> öğesi vardır — biri bir paragrafın içinde, diğeri bir listenin içinde. Yalnızca <code>&lt;li&gt;</code> öğesinin içerisine yerleştirilen <code>&lt;em&gt;</code> öğesini seçmek için, diğer  seçiciyle arasına <strong>boşluk karakterini</strong> koyarak, <code>soy birleştirici</code> adı verilen bir seçici kullanabilirim.</p>
+
+<p>Aşağıdaki kuralı stil sayfana ekle.</p>
+
+<pre class="brush: css notranslate">li em {
+  color: rebeccapurple;
+}</pre>
+
+<p>Bu seçici <code>&lt;li&gt;</code> içindeki (soyundan gelen) <code>&lt;em&gt;</code> öğesini seçecektir. Dolayısıyla, örnek belgemizde, <code>&lt;em&gt;</code> içerisindeki üçüncü listedeki ifadenin mor olduğunu, ancak dışında kalan ifadenin değişmediğini görmelisin. </p>
+
+<p>Denemek isteyebileceğin başka bir şeyde, HTML'den aynı hiyerarşi düzeyindeki bir başlıktan hemen sonra gelen bir paragfarın stilini belirlemektir. Bunu yapmak için seçiciler arasına bir <code>+</code> (<strong>Komşu kardeş birleştirici</strong>) yerleştirin.</p>
+
+<p><span>Bu kuralı stil sayfana eklemeyi dene:</span></p>
+
+<pre class="brush: css notranslate">h1 + p {
+  font-size: 200%;
+}</pre>
+
+<p>Aşağıdaki etkileşimli örnekte, yukarıdaki iki kuralı içerir. Sizde bir paragrafın içindeki <code>&lt;span&gt;</code> öğesinin içeriğinin kırmızı olmasını sağlayan kuralı ekle. İlk paragraftaki kapsam içeriğinin kırmızı olduğunu ve birinci liste öğesinin içerisindeki kapsam içeriğinin renginin değişmediğini görmek kuralın doğru yazıldığını doğrulayacaktır.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: Gördünüz gibi, CSS bize öğeleri hedeflememiz için birkaç yol sunuyor ve şimdiye kadar sadece yüzeyi gördük! Konumuzun ilerleyen bölümlerinde <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">Seçiciler</a> dersimizde bu seçicilerin tümüne ve çok daha fazlasına düzgün bir şekilde göz atacağız.</p>
+</div>
+
+<h2 id="Öğeleri_durumuna_göre_şekillendirme">Öğeleri durumuna göre şekillendirme</h2>
+
+<p>Bu derste inceleyeceğimiz son stil türü, öğelerin durumlarına göre şekillendirme yeteneğidir. Örn. bağlantıların şekillendirilmesi. Bir bağlantıya şekil verdiğimizde <code>&lt;a&gt;</code> (anchor) öğesini seçmemiz gerekir. Bu, ziyaret edilmeme, ziyaret edilme, üzerine gelme, klavye aracılığıyla odaklanma veya tıklanma sürecine bağlı olarak farklı durumlara sahiptir. Bu farklı durumları seçmek için CSS'i kullanabiliriz — aşağıdaki CSS kuralında, ziyaret edilmeyen bağlantıların pembe ve ziyaret edilen bağlantıların ise yeşil gözükmesini sağlar.</p>
+
+<pre class="brush: css notranslate">a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}</pre>
+
+<p>Kullanıcı fareyle üzerine geldiğinde bağlantının görünümünü de değiştirebilirsin. Örneğimizde farenin imleciyle bir bağlantının üzerine gelindiğinde bağlantının altında bulunan çizgi kaldırılır.</p>
+
+<pre class="brush: css notranslate">a:hover {
+  text-decoration: none;
+}</pre>
+
+<p>Aşağıdaki etkileşimli örnekte, bir bağlantı öğesinin farklı durumlarını şekillendirmek için kullanılan kuralların, değerleriyle oynamayı deneyiz. Size örnek olması için yukarıdaki kuralları sizin için ekledim ve pembe renginin oldukça açık olduğunu ve okunmasının zor olduğunu farkettim — daha iyi bir okunurluk için bu rengi neden değiştirmeyesin ki? Bunu yapmışken bağlantıların metinlerini kalın yapabilir misin?</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
+
+<p>Bağlantımızın üzerine fareyle gelindiğinde altındaki çizginin kaldırılmasını sağladık. Alt çizgiyi bir bağlantının tüm durumlarından kaldırabilirsin. Fakat gerçek bir sitede, ziyaretçilerin bir bağlantının bir bağlantı olduğunu bilmesini istediğini hatırlatmakta fayda var. Alt çizgiyi yerinde bırakmak, insanların bir paragrafın içindeki bir metnin tıklanabileceğini fark etmeleri için önemli bir ipucu olabilir — alıştıkları davranış budur. Tasarımında, CSS'de dökümanı daha az erişilebilir hale getirme potansiyeli vardır — uygun yerlerde olası tuzakları vurgulamayı hedefleyeceğiz.</p>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: Bu derslerde ve MDN genelinde <a href="/tr/docs/Learn/Accessibility">erişilebilirlilikten</a> sık sık bahsedildiğini göreceksin. Erişilebilirlik hakkında konuştuğumuzda, web sayfalarımızın herkes tarafından anlaşılabilir ve kullanılabilir olması gerektiğinden bahsetmiş olacağız.</p>
+
+<p>Ziyaretcin, faresi yada izleme panali olan bir bilgisayarda veya dokunmatik ekranlı bir telefonda olabilir. Ya da belgenin içeriğini okuyan bir ekran okuyucu kullanıyor olabilirler, ayrıca çok daha büyük metinler kullanmaları yada sadece klavyeyi kullanarak gezinmeleri gerekebilir.</p>
+
+<p>Düz bir HTML belgesine genel olarak herkes erişebilir — bu belgeyi biçimlendirmeye başladığında onu daha az erişilebilir hale getirmemen önemlidir.</p>
+</div>
+
+<h2 id="Seçicileri_ve_birleştiricileri_birleştirmek">Seçicileri ve birleştiricileri birleştirmek</h2>
+
+<p>Birden çok seçici ve birleştiriciyi bir araya getirebileceğini belirtmekte fayda var. Örneğin:</p>
+
+<pre class="brush: css notranslate">/* &lt;article&gt; içinde bulunan &lt;p&gt;'nin içndeki &lt;span&gt; seçer  */
+article p span { ... }
+
+/* &lt;h1&gt;'den sonra gelen &lt;ul&gt;'den sonraki &lt;p&gt;'yi seçer.  */
+h1 + ul + p { ... }</pre>
+
+<p>Birden çok türü bir arada da birleştirebilirsin. Aşağıdakileri koduna eklemeyi dene:</p>
+
+<pre class="brush: css notranslate">body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}</pre>
+
+<p>Bu kural, <code>&lt;body&gt;</code> öğesinin içerisinde bulunan <code>&lt;h1&gt;</code> öğesinden sonra ilk gelen <code>special</code> sınıfına dahil <code>&lt;p&gt;</code> öğesini seçer. Vay be!</p>
+
+<p>Orjinal HTML'de şekil verilmeyen tek öğe <code>&lt;span class="special"&gt;</code>dir.</p>
+
+<p>Şu anda bu size karmaşık geliyorsa endişelenme — daha fazla CSS yazdıkça buna anlamaya başlayacaksın.</p>
+
+<h2 id="Özet">Özet</h2>
+
+<p>Bu derste, CSS kullanarak bir belgeye şekil uygulamanın birkaç yolunu inceledik. Konunun ilerleyen bölümlerinde bu bilgiyi geliştireceğiz. Şu anda metne şekil vermeyi, öğeleri seçmenin farklı yollarıyla kurallar oluşturmayı ve MDN belgelerinde nitelikleri ve atanabilen değerler hakkında araştırma yapabilecek kadar bilgiye sahipsin.</p>
+
+<p>Bir sonraki derste CSS'in nasıl yapılandırıldığına bir göz atacağız.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="Bu_kısımda">Bu kısımda</h2>
+
+<ol>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS Nedir?</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır?</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerimizi uygulamak</a></li>
+</ol>
diff --git a/files/tr/learn/css/first_steps/how_css_is_structured/index.html b/files/tr/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..4a40f8481d
--- /dev/null
+++ b/files/tr/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,551 @@
+---
+title: CSS nasıl yapılandırılır
+slug: Öğren/CSS/Ilk_adimlar/How_CSS_is_structured
+tags:
+  - Acemi
+  - Beginner
+  - CSS
+  - HTML
+  - Learn
+  - Ogrenim
+  - Ozellikler
+  - Selectors
+  - Structure
+  - Yapı
+  - beyaz boşluk
+  - comments
+  - değerler
+  - kısaltmalar
+  - nitelikler
+  - properties
+  - seçiciler
+  - shorthand
+  - values
+  - whitespace
+  - yorumlar
+translation_of: Learn/CSS/First_steps/How_CSS_is_structured
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">Artık CSS'in amacını ve kullanımını anlamaya başladığına göre, CSS'in yapısını inceleyelim.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Önkoşullar:</th>
+   <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler,  HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü incele) ve <a href="/tr/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS'in nasıl çalıştığı hakkın</a> bilgi.</td>
+  </tr>
+  <tr>
+   <th scope="row">Amaç:</th>
+   <td>CSS'in temel sözdizimi yapılarını ayrıntılı olarak öğrenmek.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSSi_HTMLye_uygulama">CSS'i HTML'ye uygulama</h2>
+
+<p>İlk olarak, bir belgeye CSS uygulamak için üç yöntemi inceleyelim: harici bir stil sayfasıyla, dahili bir stil sayfasıyla ve satır içi stillerle.</p>
+
+<h3 id="Harici_stil_sayfası">Harici stil sayfası</h3>
+
+<p>Harici bir stil sayfası, <code>.css</code> uzantısına sahip, içerisinde CSS kurallarını içeren ayrı bir dosyadır. Bu, CSS'i bir HTML belgesine getirmenin en yaygın ve kullanışlı yöntemidir. Tek bir CSS dosyasını birden çok web sayfasına bağlayarak hepsini aynı CSS stil sayfasıyla şekillendirebilirsin. <a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e Başlarken</a> bölümünde harici bir stil sayfasını web sayfamıza bağlamıştık.</p>
+
+<p>Bir HTML <code>&lt;link&gt;</code> etiketi ile harici bir CSS stil sayfası dosyasına başvuruyoruz :</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;CSS deneyimim&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Merhaba Dünya!&lt;/h1&gt;
+    &lt;p&gt;Bu benim ilk CSS örneğim&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>CSS stil sayfası dosyası aşağıdaki şekilde görünebilir:</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}</pre>
+
+<p>{{htmlelement("link")}} etiketi <code>href</code> niteliğinde belirtilen yokdaki bir dosyaya işaret ediyor. Yukarıdaki örnekte, CSS dosyası HTML belgesiyle aynı klasördeydi, ancak dosya farklı bir klasöre de yerleştirilip yolu belirtebiliriz. İşte üç tane örnek:</p>
+
+<pre class="brush: html notranslate">&lt;!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerisinde  --&gt;
+&lt;link rel="stylesheet" href="styles/style.css"&gt;
+
+&lt;!-- CSS dosyası geçerli dizinin içindeki 'styles' alt klasörünün içerindeki 'general' alt klasörünün içinde--&gt;
+&lt;link rel="stylesheet" href="styles/general/style.css"&gt;
+
+&lt;!-- CSS dosyası geçerli dizinin bir üst klasöründe bulunan 'styles' klasörünün içinde --&gt;
+&lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
+
+<h3 id="Dahili_stil_sayfası">Dahili stil sayfası</h3>
+
+<p>Dahili bir stil sayfası, HTML belgesinin içinde bulur. Dahili bir stil sayfası oluşturmak için, CSS'i  HTML içindeki {{htmlelement("head")}} etiketi içerisinde ki, {{htmlelement("style")}} etiketi içerisinde yetleştirmeliyiz.</p>
+
+<p>Dahili bir stil sayfasının HTML'si şöyle görünebilir:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;CSS deneyimim&lt;/title&gt;
+    &lt;style&gt;
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Merhaba Dünya!&lt;/h1&gt;
+    &lt;p&gt;Bu benim ilk CSS örneğim&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Bazı durumlarda, dahili stil sayfaları faydalı olabilir. Örneğin, harici CSS dosyalarını değiştirmenin engellendiği bir içerik yönetim sistemiyle çalşıyorsundur.</p>
+
+<p>Ancak birden fazla sayfası olan siteler için dahili stil sayfası daha az verimli bir çalışma yöntemi haline gelir. Dahili stil sayfalarını kullanarak, birden çok sayfaya tek bir CSS stili uygulamak için, stili kullanacak her web sayfaya dahili CSS sayfalarını eklemen gerekmektedir. Verimlilik kaybı site bakımınada yansır, çünkü dahili stil sayfalarında ki CSS içerisinde basit bir stil değişikliğini bile birden çok web sayfasında düzenlemek zorunda kalırsın.</p>
+
+<h3 id="Satır_içi_stiller">Satır içi stiller</h3>
+
+<p>Satır içi stiller, bir <code>style</code> niteliği içinde bulunan tek bir HTML öğesini etkileyen CSS bildirimleridir. Bir HTML belgesinde satır içi stilin uygulanması şu şekilde görünebilir:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;CSS deneyimim&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;Merhaba Dünya!&lt;/h1&gt;
+    &lt;p style="color:red;"&gt;Benim ilk CSS örneğim&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>Mümkünse CSS'i bu şekilde kullanmaktan sakının.</strong> En iyi uygulamanın tam tersidir. Birincisi, bakım için CSS'in en az verimli uygulamasıdır. Bir stil değişikliği, tek bir web sayfasında birden fazla düzenleme gerektirebilir. İkincisi, satır içi CSS kodlarıyla HTML içeriklerini karıştırarak her şeyin okunmasını ve anlaşılmasını zorlaştırır. Kodu ve içeriği ayırmak, web sitesinde çalışan herkes için bakımı kolaylaştırır.</p>
+
+<p>Satır içi stillerin daha yaygın olduğu birkaç durum vardır. Çalışma ortamın çok kısıtlayıcıysa, satır içi stilleri kullanmaya başvurman gerekebilir. Örn; belki bir CMS'n yalnca HTML gövdesini düzenlemene izin verir. Ayrıca, olabildiğince çok e-posta istemcisiyle uyumluluk sağlamak için, e-posta içindeki HTML'de çok sayıda satır içi stil kullanabilirsin.</p>
+
+<h2 id="CSS_ile_oynamak">CSS ile oynamak</h2>
+
+<p>Aşağıdaki alıştırma için bilgisayarında bir klasör oluşturun. Klasörü istediğin gibi adlandırabilirsin. Klasörün içinde, iki dosya oluşturmak için aşağıdaki metni kopyalayın:</p>
+
+<p><strong>index.html:</strong></p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;CSS deneyimim&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;p&gt;Test HTML'ni burada oluşturun&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>styles.css:</strong></p>
+
+<pre class="brush: css notranslate">/* Create your test CSS here */
+
+p {
+  color: red;
+}</pre>
+
+<p>Denemek ve değişiklik yapmak için hem HTML dosyandaki <code>&lt;body&gt;</code> etiketi arasına hemde CSS stil sayfana öğeler ve kurallar ekle.</p>
+
+<p>Aşağıdaki etkileşimle düzenleyiciyi de kullanabilirsin..</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+
+<p>Oku ve eğlen!</p>
+
+<h2 id="Seçiciler">Seçiciler</h2>
+
+<p>Bir seçici, stil uygulayacağı içerik için HTML'yi hedefler. <a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a> dersinde çeşitli seçiciler keşfetmiştik. Eğer CSS içeriğe istenildiği gibi uygulanmıyorsa, seçicin istediğin şekilde eşleşmiyor olabilir.</p>
+
+<p>Her CSS kuralı, tarayıcıya kuralların hangi öğe veya öğelere uygulanması gerektiğini söylemek için bir seçici veya seçici listesi ile başlar. Aşağıdaki tüm örnekler geçerli seçicilerdir.</p>
+
+<pre class="brush: css notranslate">h1                   /*seçici*/
+a:link               /*seçici*/
+.manythings          /*seçici*/
+#onething            /*seçici*/
+*                    /*genel seçici*/
+.box p               /*seçici*/
+.box p:first-child   /*seçici*/
+h1, h2, .intro       /*seçici listesi*/</pre>
+
+<p>Yukarıdaki seçicileri kullanan bazı CSS kuralları oluşturmayı dene. Seçiciler tarafından şekillendirilecek HTML öğeleri ekle. Yukarıdaki sözdiziminden herhangi birine aşina değilsen, MDN'yi aramayı dene.</p>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: bir sonraki kısımda seçiciler hakkında daha fazla bilgi edineceksini <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>.</p>
+</div>
+
+<h3 id="Özgüllük"><u>Özgüllük</u></h3>
+
+<p>İki seçicinin aynı HTML öğesini hedeflediği senaryolarla karşılaşabilirsin. Paragraf <code>&lt;p&gt;</code> metnini maviye ayarlayan ayrıca tanımlandığı öğenin rengini kırmızıya ayarlayan bir sınıf kuralı olan stil sayfasını düşünün</p>
+
+<pre class="brush: css notranslate">.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>HTML belgemizde de bir <code>special</code> sınıfına ait paragrafımız olduğunu varsayalım. Her iki kural da uygulanır. Fakat hangi kural baskındır? Mavi veya kırmızı paragraf menini görmeyi bekliyor musun?</p>
+
+<pre class="brush: html notranslate">&lt;p class="special"&gt;Benim rengim nedir?&lt;/p&gt;</pre>
+
+<p>CSS dili, bir çakışma durumunda hangi seçicinin daha güçlü olduğunu kontrol etmek için bazı kurallara sahiptir. Bu kurallara <strong>art arda denetim</strong> ve <strong>özgüllük</strong> denir. Aşağıdaki kod bloğunda, seçici için iki kural tamınlarız. Ancak <code>&lt;p&gt;</code> paragraf metni mavi olacaktır. Bunun nedeni, paragraf metnini mavi olarak ayarlayan bildirimin diğer bildirimden daha sonra tanımlanmış olması. Seçimlerin çakışması durumunda sonraki stiller, kendilerinden önce tanımlanmış stil kurallarını geçersiz kılıp yerlerine geçerler. Bu <strong>art arda denetim</strong> kuralıdır.</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>Bununla birlikte, sınıf seçicisi ile öğe seçicisi arasındaki çakışmaya sahip bir önceki örneğimizde, sınıf seçici kırmızı paragraf metnini oluşturarak baskın seçici olduğunu kanıtlar. Peki çakışan bir stil daha sonraki satırlada görünen bir seçiçiye nasıl baskın olabilir? Bir sınıf, öğe seçiciden daha fazla özgüllüğe sahip olduğu gibi daha karakteristik olarak derecelendirilir, bu nedenle diğer çakışan stil bildirimini iptal eder.</p>
+
+<p>Kendin için bunu dene! Bir HTML ekle ve ardından bu iki kuralı stil sayfana ekle. Ardından <code>p.special</code> kuralının <code>p{....</code>} kuralına baskın geldiğini izle.</p>
+
+<p>Özgüllük ve art arda denetim kuralları ilk bakışta karmaşık görünebilir. CSS'e aşına oldukça bu kuralları anlamak daha kolay olcak. Bir sonraki kısımda <a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Ard arda denetim ve miras</a> bölümü özgüllüğün nasıl hesaplanacağı da dahil olmak üzere bunu ayrıntılı olarak açıklamaktadır.</p>
+
+<p>Şimdilik, özgüllüğün var olduğunu unutmayın. Bazen, stil sayfasındaki başka bir şeyin daha karakteristik olması nedeniyle CSS beklediğin gibi uygulanmayabilir. Bir öğeye birden fazla kuralın uygulanabileceğini anlamak, bu tür sorunları çözmenin ilk adımıdır.</p>
+
+<h2 id="Nitelikler_ve_değerler">Nitelikler ve değerler</h2>
+
+<p>En basit düzeyinde, CSS iki bileşenden oluşur:</p>
+
+<ul>
+ <li><strong>Nitelik</strong>: Bunlar, değiştirmek istediğin stilin niteliklerini gösteren, okunabilir tanımlayacılardır. Örn; <code><a href="/tr/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/tr/docs/Web/CSS/width">width</a></code>, <code><a href="/tr/docs/Web/CSS/background-color">background-color</a></code>.</li>
+ <li><strong>Değer</strong>: Her niteliğe bir değer atanır. Bu değer, niteliğin nasıl biçimlendirileceğini gösterir.</li>
+</ul>
+
+<p>Aşağıdaki örnek, tek bir niteliği ve değeri vurgulamaktadır. Nitelik adı <code><strong>color</strong></code> ve değeri <code><strong>blue</strong></code>.</p>
+
+<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Bir nitelik bir değerle eşleştirildiğinde, bu eşlemeye CSS bildirimi adı verilir. CSS bildirimleri CSS Bildirim Blokları içinde bulunur. Aşağıdaki örnekte, vurgulanan CSS bildirim bloğunu tanımlar.</p>
+
+<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Son olarak, CSS kural kümeleri(veya CSS kuralları) oluşturmak için CSS bildirim blokları seçicilerle eşleştirilir. Aşağıdaki örnekte iki kural içerir: biri <code>&lt;p&gt;</code> etiketi için, diğeri <code>&lt;h1&gt;</code> etiketi için. Renkli vurgulanan CSS kuralı <code>&lt;h1&gt;</code> etiketinin stilini tanımlar.</p>
+
+<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>CSS niteliklerini belirli değerlere ayarlamak, bir belge için düzen ve stil tanımlamanın birincil yoludur. CSS motoru, bir sayfanın her öğesi için hangi bildirimlerin geçerli olduğunu hesaplar.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Önemli: </strong>CSS nitelikleri ve değerleri büyük/küçük harfe duyarlıdır. Her çifteki nitelik ve değer iki nokta üst üste ile ayrılır. (<code>:</code>)</p>
+</div>
+
+<p><strong>Aşağıda listenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kurallar yazın: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("font-size")}}</strong></li>
+ <li><strong>{{cssxref("width")}}</strong></li>
+ <li><strong>{{cssxref("background-color")}}</strong></li>
+ <li><strong>{{cssxref("color")}}</strong></li>
+ <li><strong>{{cssxref("border")}}</strong></li>
+</ul>
+
+<div class="warning">
+<p><strong>Önemli</strong>: Bir nitelik bilinmiyorsa veya belirli bir nitelik için bir değer geçerli değilse, beyan geçersiz olarak işlenir. Tarayıcının CSS motoru tarafından tamamem yok sayılır.</p>
+</div>
+
+<div class="warning">
+<p><strong>Önemli</strong>: CSS'de (ve diğer web standartlarında), dil varyasyonunun veya belirsizliğin olduğu yerlerde ABD yazımının standart olduğu kabul edilmiştir. </p>
+</div>
+
+<h3 id="Fonksiyonlar">Fonksiyonlar</h3>
+
+<p>Değerlerin çoğu nispeten basit anahtar kelimeler veya sayısal değerler olsa da, bir işlev biçimini alan bazı değerler vardır. <code>calc()</code> fonksiyonu ele alalım, CSS içinde matematiksel işlev yapabilen bir fonksiyondur.</p>
+
+<div id="calc_example">
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;&lt;div class="box"&gt;İç kutu genişliği 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}</pre>
+</div>
+
+<p>Bu şu şekilde çalışır:</p>
+
+<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
+
+<p>Bu işlev, işlev adı ve işlevin değerlerini kapsayan parantezlerden oluşur. <code>calc()</code> yukarıdaki örnekte, kutunun genişliğini değerler içeren blok genişliğinin %90 eksi 30piksel olmasını tanımlar. Hesaplamanın sonucu, önceden hesaplanabilen ve sabit bir değer olarak girilebilen  değer değildir.</p>
+
+<p>Başka bir örnek {{cssxref("transform")}} niteliği,  <code>rotate()</code>fonksiyonundan dönen değerleri alabilir.</p>
+
+<div id="transform_example">
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}</pre>
+</div>
+
+<p>Yukarıdaki kodun çıktısı şuna benzer:</p>
+
+<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p>
+
+<p><strong>Aşağıdaki listelenen niteliklerin farklı değerlerini arayın. Farklı HTML öğelerine stil uygulayan CSS kuralları yazın: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("transform")}}</strong></li>
+ <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li>
+ <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li>
+</ul>
+
+<h2 id="ruleskurallar">@rules(kurallar)</h2>
+
+<p>CSS <code><a href="/tr/docs/Web/CSS/At-rule">@rules</a></code> ("et-rules" olarak teleffuz edilier), CSS'in ne yapması gerektiği ve nasıl davranması gerektiği konusunda talimatlar sağlar. Bazıları <code>@rules</code> sadece bir anahtar ve bir değerden ibarettir. Örn; <code>@import</code> bir stil sayfasını başka bir CSS stil sayfasına aktarır:</p>
+
+<pre class="brush: css notranslate">@import 'styles2.css';</pre>
+
+<p>Karşılaşabileceğin en yaygın <code>@rule</code> kurallarından birtanesi <code>@media</code>, <a href="/tr/docs/Web/CSS/Media_Queries">medya sorguları</a> oluşturmak için kullanılr. Medya sorguları, CSS stilini uygualamak için koşullu mantık kullanır.</p>
+
+<p>Aşağıdaki örnekte, stil sayfası <code>&lt;body&gt;</code> öğesi için pembe renkli bir arka plan tanımlayan bir medya sorgusu izler.</p>
+
+<pre class="brush: css notranslate">body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}</pre>
+
+<p>Eğitimler boyunda diğer <code>@rules</code> kurallarıyla karılaşacaksın.</p>
+
+<p><strong>Görünüm genişliğine göre stilleri değiştiren bir ortam sorgusu ekleyip ekeleyemeceğini görün. Sonucu görmek için tarayıcı pencerenin genişliğini değiştirin.</strong></p>
+
+<h2 id="Kısaltmalar">Kısaltmalar</h2>
+
+<p>{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, ve {{cssxref("margin")}} gibi bazı niteliklere <strong>kısaltmalar</strong> denir<strong>.</strong> Bunun nedeni tekbir satırda birden fazla değer alabilmeleridir.</p>
+
+<p>Örneğin, bu tek satırlık kod:</p>
+
+<pre class="brush: css notranslate">/* dolgu ve kenar boşluğu gibi 4 ayrı değer uygulanır.
+   Sırasıyla üst, sağ, alt, sol (üsten başlayarak saat
+   yönünde). Ayrıca kısaltma olarak kullanılan başka
+   niteliklerde vardır.*/
+padding: 10px 15px 15px 5px;</pre>
+
+<p>şu dört kod satırına eşdeğerdir:</p>
+
+<pre class="brush: css notranslate">padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;</pre>
+
+<p>Bu tek satır:</p>
+
+<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+
+<p>Şu beş satıra eşdeğerdir:</p>
+
+<pre class="brush: css notranslate">background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-attachment: fixed;</pre>
+
+<p>Kursun ilerleyen bölümlerinde, birçok kısaltma örneğiyle karşılaşacaksın. MDN'nin <a href="/tr/docs/Web/CSS/Reference">CSS referensı</a> sayfaları herhangi bir kısaltma niteliği hakkında daha fazla bilgi için iyi bir kaynaktır.</p>
+
+<p><strong>Nasıl çalıştığına daha iyi aşina olmak için kendi CSS alıştırmanda yukarıdaki bildirimleri kullanmayı dene. Ayrıca farklı değerleri deneyebilirsin.</strong></p>
+
+<div class="blockIndicator warning">
+<p><strong>Uyarı</strong>: CSS kısaltmasını kullanmanın dikkat edilmesi gekeren yönü, atlanan değerlerin sıfırlanmasıdır. CSS kısaltmasında belirtilmeyen bir değer, tarayacının varsayılan değerine geri döner. Bu da,  <strong>önceden ayarlanmış değeri geçersiz kılabileceği</strong> anlamına gelir.</p>
+</div>
+
+<h2 id="Açıklamalar">Açıklamalar</h2>
+
+<p>Herhangi bir kodlama çalışmasında olduğu gibi, CSS ile birlikte açıklama yazmak iyi bir uygulamadır. Bu, daha sonra düzeltmeler veya geliştirmeler için geri döndüğünde kodun nasıl çalıştığını hatırlamana yardımcı olur. Ayrıca başkalarının da kodu anlamasına yardımcı olur.</p>
+
+<p>CSS açıklamaları <code>/*</code> ile başlar ve <code>*/</code> ile biter. Aşağıdaki örnekteki açıklamalar, kodun farklı bölümlerinin başlangıcını işaret etmektedir. Bu, kod tanımlamasında büyüdükçe gezinmeye yardımcı olur. Bu tür açıklamalar yerinde olduğunda, kod düzenleyicinde açıklama aramak, bir kod bölümünü verimli bir şekilde bulmanın bir yolu haline gelir.</p>
+
+<pre class="brush: css notranslate">/* Temel öğe elamanını biçimlendirin. */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Genel yazı tipi boyutunu özel olarak inceleyelim. Büyük ekran
+     veya pencerede daha iyi okunabilirlilik için yazı tipi
+     boyutunu arttırıyoruz. */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* DOM'da yuvalanmış belili öğeleri biçimlendirin  */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}</pre>
+
+<p>"Kod açıklamaları" CSS kodunu deneme için devre dışı bırakmak için de yararlıdır. Aşağıdaki örnekte, <code>.special</code> sınıfı açıklama içerisine alınıp devre dışı bırakılmıştır.</p>
+
+<pre class="brush: css notranslate">/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}</pre>
+
+<p><strong>CSS'ne açıklamalar ekle!</strong></p>
+
+<h2 id="Beyaz_boşluk">Beyaz boşluk</h2>
+
+<p>Beyaz boşluk; gerçek boşluklar, sekmeler ve yeni satırlar(Enter) anlamına gelir. Tarayıcıların HTML'deki beyaz boşluğu yok sayması gibi, tarayıcılar da CSS içindeki beyaz boşluğu yok sayar. Beyaz boşluklar okunabilirliliği nasıl geliştirdiklerini görebilirsin.</p>
+
+<p>Aşağıdaki örnekte, her bildirim (Kural bağlangıcı ve bitişi) kendi satırına sahiptir. Bu da CSS yazmanın iyi bir yolur. CSS'i okumayı ve anlamayı kolaylaştırır.</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+</pre>
+
+<p id="Very_compact">Aşağıdaki örnek, yukarıdaki CSS kodunun sıkıştırılmış(fazlalık boşlukların temizlenmiş) halidir. Yukarıdaki örnekle aynı işi yapmaktadır fakat okunurluluğu oldukça zordur.</p>
+
+<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+/*Ve hatta*/
+body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;}
+</pre>
+
+<p>Kendi projelerin için, kodunu kişisel tercihine göre biçimlendireceksin. Takım projeleri için, bir takımın veya projenin kendi stil rehberi olduğunu göreceğin çalışmalarında olacaktır.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Önemli:</strong> CSS bildirimlerindeki beyaz boşuk değerleri ayırsa da, <strong>nitelik adlarında hiçbir zaman boşluk olmaz</strong>.</p>
+</div>
+
+<p>Örneğin, bu geçerli bir CSS beyanıdır:</p>
+
+<pre class="brush: css notranslate">margin: 0 auto;
+padding-left: 10px;</pre>
+
+<p>Fakat bu beyanlar geçersizdir:</p>
+
+<pre class="brush: css notranslate">margin: 0auto;
+padding- left: 10px;</pre>
+
+<p>Aralık hatalarını görüyor musun? ilk olarak <code>margin</code> niteliği <code>0auto</code> değerini geçerli bir değer olarak tanımaz. Tanımın <code>0auto</code> yu iki ayrı değer olarak alması amaçlanmıştır. <code>0</code> ve <code>auot</code> olarak. İkinci <code>padding-</code> geçerli bir nitelik olarak tanınmıyor. Doğru nitelik adı (<code>padding-left</code>) hatalı bir boşlukla ayrılmıştır.<br>
+ <br>
+ Her zaman birbirinden farklı değerleri en az bir boşlukla ayırdığından emin olmalısın. Nitelik adlarını ve nitelik değerlerini, bölünmüş tek dizeler olarak bir arada tutun.</p>
+
+<pre class="brush: css notranslate">/* bölünmüş tek dizeler */
+margin: 0 auto; /*tek dize*/
+padding-left: 10px; /*tek dize*/
+
+/* aşağıdaki kodlar çalışır fakat okuması zor*/
+margin:
+0
+auot;
+padding-left:
+10px;
+</pre>
+
+<p><strong>Boşluğun CSS'i nasıl bozabileceğini öğrenmek için test CSS'izin içinde boşluk bırakarak oynamayı dene.</strong></p>
+
+<h2 id="Sıradaki_ne">Sıradaki ne?</h2>
+
+<p>Tarayıcının bir web sayfasını görüntülemek için HTML ve CSS'i nasıl kullandığını anlamak faydalıdır. Sonraki makale <a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a>, bunu açıklar.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="Bu_kısımda">Bu kısımda</h2>
+
+<ol>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir?</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygulama</a></li>
+</ol>
diff --git a/files/tr/learn/css/first_steps/how_css_works/index.html b/files/tr/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..c2cb95aa43
--- /dev/null
+++ b/files/tr/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,157 @@
+---
+title: CSS nasıl çalışır
+slug: Öğren/CSS/Ilk_adimlar/CSS_nasil_calisir
+tags:
+  - Başlangıç
+  - Beginner
+  - CSS
+  - DOM
+  - Eğitim
+  - Learn
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">CSS'in temellerini, ne için kullanıldığını ve basit stil sayfalarının nasıl yazılacağını öğrendin. Bu derste, bir tarayıcının CSS ve HTML'yi nasıl ele alıp bir web sayfasına dönüştürdüğüne bir göz atacağız.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Ön koşullar:</th>
+   <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve  HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Amaç:</th>
+   <td>CSS ve HTML'nin tarayıcı tarafında naısl ayrıştırıldığının ve bir tarayıcı CSS ile karşılaştığında ne olduğunun temellerini anlamak.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_gerçekten_nasıl_çalışır">CSS gerçekten nasıl çalışır?</h2>
+
+<p>Tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ile stil bilgisini birleştirmektedir. Bunuda aşağıda listelediğimiz birkaç aşamada işler. Bunun, tarayıcının bir web sayfasını yüklediğinde sergilediği davranışın çok basite indirgenmiş bir sürümü olduğunu ve farklı tarayıcıların işlemi farklı şekillerde ele alabileceğini unutma . Ancak kabaca olan budur.</p>
+
+<ol>
+ <li>Tarayici HTML'yi yükler(Örn. onu ağdan alır).</li>
+ <li>{{Glossary("HTML")}}'yi bir  {{Glossary("DOM")}}'a (<em>Belge Nesnesi Modeli</em>) dönüştürür. DOM, bilgisayarın belleğindeki belleği temsil eder. DOM, sonraki bölümde biraz daha ayrıntılı olarak açıklanacak.</li>
+ <li>Tarayıcı daha sonra gömülü resimler ve videolar gibi HTML belgesi ile bağlantılı kaynaların çoğunu ve bağlantılı CSS'leri yükler! JavaScript süreç içinde biraz daha sonra ele alınacaktır. Ancak burada kafanda karışıklık olmaması için hakkında konuşmayacağız.</li>
+ <li>Tarayıcı, yüklenen CSS'de bulduğu seçicilere bağlı olarak kural seçici türlerine göre(örn, öğe, sınıf, kimlik vb.) kümeler. DOM'daki hangi düğümlere hangi kuralların uygualanması gerektiğini belirler ve bunlara gerektiği şekilde stil ekler(Bu ara adıma işleme ağacı denir).</li>
+ <li>Ağacı oluşturma, kurallar uygulandıktan sonra görünmesi gereken şekil yapıya yerleştirilir.</li>
+ <li>Sayfanın görsel görüntüsü ekrana getirilir(bu aşamaya boyama denir).</li>
+</ol>
+
+<p>Aşağıdaki şema, işlemin basit bir görünümünü sunar.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p>
+
+<h2 id="DOM_hakkında">DOM hakkında</h2>
+
+<p>DOM'un ağaca benzer bir yapısı vardır. Biçimlendirme dilindeki her öğe, nitelik ve metin parçası ağaç yapsında bir {{Glossary("Node/DOM","DOM düğümü")}} haline gelir. Düğümler, diğer DOM düğümleriyle olan ilişkileriyle tanımlanır. Bazı öğeler, alt düğümlerin ebeveynleridir ve alt düğümlerin de kardeşleri vardır.</p>
+
+<p>DOM'u anlamak, CSS'ni tasarlamana, hataları ayıklamana ve bakımını yapmana yardımcı olur. Çünkü DOM, CSS'in ve belgenin buluştuğu yerdir. Tarayıcıda DevTools ile çalışmaya başladığında, hangi kuralların geçerli olduğunu görmek için öğeleri seçerken DOM'da geziyor olacaksın.</p>
+
+<h2 id="Gerçek_bir_DOM_örneği">Gerçek bir DOM örneği</h2>
+
+<p>Uzun ve sıkıcı bir açıklamadan ziyade, gerçek bir HTML kesitinin DOM'a nasıl dönüştürüldüğünü görmek için bir örneğe bakalım.</p>
+
+<p>Aşağıdaki HTML kodunu ele alalım:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<p>DOM'da, <code>&lt;p&gt;</code> nesnemize karşılık gelen düğüm(<code>P</code>) bir ebeveyndir. Düğümümüzün çocukları bir adet metin düğümü ve üç adet <code>&lt;span&gt;</code> öğemize karşılık gelen (<code>SPAN</code>) düğümüdür. <code>SPAN</code> Düğümlerimizde kendi metin düğümlerinin ebeveynleridir.</p>
+
+<pre class="notranslate">P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"</pre>
+
+<p>Bir tarayıcının önceki HTML kesitini nasıl yorumladığını gösterdik. Tarayıcı yukarıdaki DOM ağacını işler ve ardından bunu tarayıcıda şu şekilde görüntüler :</p>
+
+<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">p {margin:0;}</pre>
+</div>
+
+<h2 id="DOMa_CSS_uygulama">DOM'a CSS uygulama</h2>
+
+<p>Diyelim ki belgemize stil vermek için biraz CSS ekledik. HTML kesitimiz aşağıdaki gibidir:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<p>Diyelimki ona aşağıdaki CSS'i uyguladık:</p>
+
+<pre class="brush: css notranslate">span {
+  border: 1px solid black;
+  background-color: lime;
+}</pre>
+
+<p>Tarayıcı HTML'yi çözümleyecek ve bundan bir DOM oluşturacak, ardından CSS'i çözümleyecektir. CSS'de bulunan tek kuralın bir <code>span</code> seçicisi olması nedeniyle, tarayıcı CSS'i çok hızlı bir şekilde sıralayabilecektir. Bu kuralı <code>&lt;span&gt;</code> öğelerinin üçünede uygulayacak ve son görseli renklendirecektir.</p>
+
+<p>Güncellenen çıktı aşağıdaki gibidir:</p>
+
+<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p>
+
+<p>Bir sonraki kısımdaki <a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS Hata Ayıklama</a> dersimizde, CSS sorunlarını ayıklamak için tarayıcıda DevTools'u kullanacağız ve tarayıcının CSS'i nasıl yorumladığı hakkında daha fazla bilgi edineceğiz.</p>
+
+<h2 id="Tarayıcı_anlamadığı_bir_CSS_ile_karşılaşırsa_ne_olur">Tarayıcı anlamadığı bir CSS ile karşılaşırsa ne olur?</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">Daha önceki bir derste</a> tarayıcıların aynı anda yeni çıkan CSS kodlarını uygulamadığından bahsetmiştim. Ayrıca, birçok kişi bir tarayıcının en son sürümünü kullanmamaktadır. CSS'in her zaman geliştirildiği ve bu nedenle tarayıcıların tanıyabileceklerinin ötesinde olduğu göz önüne alındığında, bir tarayıcı tanımadığı bir CSS seçici veya bildirimiyle karşılaştığında ne olacağını merak edebilirsin.</p>
+
+<p>Cevap; hiç bir şey yapmaması ve sadece bir sonraki CSS parçasına geçmesidir!</p>
+
+<p>Bir tarayıcı kurallarını çözümlediğinde anlamadığı bir özellik veya değerle karşılaşırsa, onu yok sayar ve bir sonraki bildirime geçer. Bir hata yaptıysan yada bir nitelik veya değer çok yeniyse ve tarayıcın bunu henüz desteklemiyorsa bildirimi veya kuralı yok sayar.</p>
+
+<div id="Skipping_example">
+<pre class="brush: html notranslate">&lt;p&gt; I want this text to be large, bold and blue.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p {
+  font-weight: bold;
+  colour: blue; /* incorrect spelling of the color property */
+  font-size: 200%;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>
+
+<p>Tarayıcıların bu yaklaşımı çok faydalıdır. Bu, bildirimin anlaşılmadığında herhangi bir hata almayacağını bilerek, yeni CSS bildirimlerini bir geliştirme olarak kullanabileceğin anlamına gelir — tarayıcı yeni özelliği alıp almaması bizim için sorun teşkil etmez. Cascade (art arda denetimin)'ın çalışma şekli ve tarayıcıların aynı nitelikte iki kuralın olduğu bir stil sayfasıyla karşılaştıklarında son CSS'i kullanmaları gerçeğiyle birleştiğinde, yeni CSS'i desteklemeyen tarayılar için alternatifler sunabilirsin.</p>
+
+<p>Bu, yeni ve her tarayıcı tarafından desteklenmeyen bir nitelik/değer kullanmak istediğinde işine yarar. Örneğin, bazı eski tarayıcılar <code>calc()</code> fonksiyonunu bir değer olarak desteklemez. Peki bunun için ne yapabilirim? Bir kutu için piksel cinsinden genişlik verebilirim (<code>width: 500px)</code>, sonrada <code>calc(100% - 50px)</code> fonksiyonuyla bir değer vermeye devam edebilirim. Eski tarayıcılar, <code>calc()</code> fonksiyonunu anlamadıkları için ilgili satırı yok sayarak piksel sürümünü kullanırlar. Yeni tarayıcılarda çizgiyi piksel kullanarak yorumlacak ancak daha sonraki basamakta <code>calc()</code> fonksiyonunu görüp bu kuraldaki değeri uygulayacaklardır. Önceki satırdaki değer geçersiz sayacaklardır.</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}</pre>
+
+<p>Sonraki derste çeşitli tarayıcıları desteklemenin daha birçok yolunu inceleyeceğiz.</p>
+
+<h2 id="Ve_sonunda">Ve sonunda</h2>
+
+<p>Bu kısmı neredeyse bitirdin; yapacak sadece bir işimiz kaldı. Bir sonraki makalede  <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">öğrendiklerini uygulacak</a> ve bu süreçte bazı CSS'leri test edeceksin.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="Bu_kısımda">Bu kısımda</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS Nedir?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygula </a></li>
+</ol>
diff --git a/files/tr/learn/css/first_steps/index.html b/files/tr/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..eca80e4e76
--- /dev/null
+++ b/files/tr/learn/css/first_steps/index.html
@@ -0,0 +1,64 @@
+---
+title: CSS'e ilk adım
+slug: Öğren/CSS/Ilk_adimlar
+tags:
+  - Acemi
+  - Beginner
+  - CSS
+  - Landing
+  - Learn
+  - Modul
+  - Module
+  - first steps
+  - İlk Adım
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS (Basamaklı Stil Sayfaları), web sayfalarını biçimlendirmek ve düzenlemek için kullanılır — örn., içeriğinin yazı tipini, rengini, boyutunu ve aralığını değiştirmek; birden çok sütuna bölmek, animasyonlar ve diğer dekoratif özellikler eklemek gibi. Bu bölüm, nasıl çalıştığını, söz diziminin neye benzediğini ve bunu HTML'ye, stil ekelemek için nasıl kullanmaya başlayabileceğinle ilgili, temel bilgilerle CSS uzmanlığına doğru giden yolunda yumuşak bir başlangıç sağlar.</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="Önkoşullar">Önkoşullar</h2>
+
+<p>Bu bölüme başlamadan önce sağlama gereken koşullar şunlardır:</p>
+
+<ol>
+ <li>Bilgisayarları ve interneti basit bir şekilde kullanma (örn., gazete okumak, konu araştırmak) hakkında bilgi sahibi olmalısın.</li>
+ <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" rel="nofollow">Gerekli yazılımların kurulumu</a> dersinde ayrıntılı olarak açıklandığı gibi gerekli yazılımların kurulu olduğu bir sistem, <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" rel="nofollow">Dosyalarla çalışma</a> dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceğini öğrenmiş olmalısın.</li>
+ <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a>  konusunda anlatıldığı gibi temel HTML bilgisi sahibi olmalısın.</li>
+</ol>
+
+<div class="note">
+<p><strong>Not</strong>: Kendi dosyalarını oluşturma yeteneğin olmayan bir bilgisayar, tablet veya başka bir cihaz üzerinde çalışıyorsan, <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi kodlama yapabileceğin bir sitede kod örneklerini(çoğunu) deneyebilirsin.</p>
+</div>
+
+<h2 id="Bölümler">Bölümler</h2>
+
+<p>Bu eğitim serisi, sizi tüm temel CSS teorilerine götürecek ve bazı becerileri test etmen için fırsatlar sunacak bölümleri içerir.</p>
+
+<dl>
+ <dt><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir?</a></dt>
+ <dd><strong><a href="/tr/docs/Glossary/CSS">CSS</a></strong> (Basamaklı stil sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, fakat kaputun altında nasıl çalışır? Bu bölümde, basit bir sözdizimi örneğiyle CSS'in ne olduğunu ve dil hakkındaki bazı temel terimleri açıklayacağız.</dd>
+ <dt><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></dt>
+ <dd>Bu Yazıda basit bir HTML belgesini alıp ona CSS uygulayacağız, bu sırada dil hakkında bazı pratik bilgiler öğreteceğiz.</dd>
+ <dt><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></dt>
+ <dd>Artık CSS'in ne olduğu ve onu kullanmanın temelleri hakkında bir fikrin olduğuna göre, dilin kendi yapısına biraz daha derinlemesine bakmanın zamanı geldi. Burada tartışılan kavramların çoğuyla zaten tanıştık; daha sonraki kavramları kafa karıştırıcı bulursan, bir özet geçmek için bu bölüme geri dönebilirsin.</dd>
+ <dt><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır?</a></dt>
+ <dd>CSS'in temelerini, ne için olduğunu ve basit stil sayfalarının nasıl yazılacağını öğrendik. Bu  bölümde, bir tarayıcının CSS ve HTML'yi nasıl alıp bir web sayfasına dönüştürdüğüne bir göz atacağız</dd>
+ <dt><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini kullanın</a></dt>
+ <dd>Son birkaç derste öğrendiğin bilgilerle, basit metin belgelerini CSS kullanarak, onlara kendi stilini eklemek için biçimlendirebileceğini keşfetmelisin. Bu makale size bunu yapma şansı veriyor.</dd>
+</dl>
+
+<h2 id="Göz_at">Göz at</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Orta Düzey Web Okuryazarlığı 1:CSS'e Giriş</a></dt>
+ <dd>CSS'ye giriş bölümünde bahsedilen birçok beceriyi araştıran ve test eden mükemmel bir Mozilla hazırlık kursu. Bir web sayfasında, CSS seçicilerin, niteliklerin ve değerlerin bir HTML sayfasındaki öğelerin stilini belirlemesi hakkında bilgi edinin.</dd>
+</dl>
diff --git a/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html b/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html
new file mode 100644
index 0000000000..3282953c36
--- /dev/null
+++ b/files/tr/learn/css/first_steps/using_your_new_knowledge/index.html
@@ -0,0 +1,105 @@
+---
+title: Öğrendiklerini uygula
+slug: Öğren/CSS/Ilk_adimlar/Ogrendiklerinizi_Uygulayın
+tags:
+  - Acemi
+  - Başlangıç
+  - Beginner
+  - CSS
+  - Eğitim
+  - Learn
+  - Playground
+  - oyun alanı
+translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
+---
+<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">Son birkaç derste öğrendiklerinle, basit bir metin belgesine CSS'i kullanarak, onlara kendi stilini uygulayabileceğini gördün. Bu makele öğrendiklerini uygulayabileceğini gösterecektir.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Ön Koşul:</th>
+   <td>Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış  ve HTML temellerini anlamış olman gerekir (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Amaç:</th>
+   <td>Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Başlangıç_noktası">Başlangıç noktası</h2>
+
+<p>Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">örnek dosyayı </a>indirebilirsin. Bu, HTML içeren tek bir dosyadır ve içerisinde "Dahili CSS" tanımları vardır. Alternatif olarak çevrimiçi(online) kod düzenleyebileceğin şu sayfalarıda kullanabilirsin: <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, ve <a href="https://glitch.com/" rel="noopener">Glitch</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: Takıldığın noktalarda bizden yardım isteyebilirsin — <a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge#Assessment_or_further_help">Değerlendirme ve daha fazlası</a> bölümüne bakabilirsin.</p>
+</div>
+
+<h2 id="CSS_ile_çalışmak">CSS ile çalışmak</h2>
+
+<p>Aşağıdaki etkileşimli örnek, CSS kullanılarak şekillendirilmiş bir biyografiyi göstermektedir. Kullandığım CSS nitelikleri aşağıdaki gibidir — her biri MDN'deki nitelik sayfasına bağlanır, bu size kullanımıyla ilgili daha fazla örnek verecektir.</p>
+
+<ul>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
+
+<p>Seçicilerden, h1 ve h2 gibi stil etiketlerinin bir karışımını kullandım, ancak aynı zamanda iş başlığı için bir sınıf oluşturdum ve onu şekillendirdim.</p>
+
+<p>Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.</p>
+
+<ol>
+ <li>CSS <code>color</code> niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(<code>hotpink)</code> yap.</li>
+ <li>Birinci seviye başlığın altına {{cssxref("border-bottom")}} niteliği ile 10px boyutunda noktalı(<code>dotted</code>) çizgi atın ve rengini mor(<code>purple</code>) yap.</li>
+ <li>2. düzey başlığı italik yap.</li>
+ <li><code>ul</code> etikemizin arka plan renk {{cssxref("background-color")}}  değerini #eeeeee yap ve ayrıca mor(<code>purple</code>) renginde ve 5px kalınlığında çerçeve({{cssxref("border")}}) ekle. İçeriği çerçeveden uzaklaştırmak için <code>paddin</code> niteliğine kullan.</li>
+ <li>Linklerin üzerine gelindiğinde renginin yeşil(<code>green</code>) olmasını sağla.</li>
+</ol>
+
+<p>Çıktının resimdeki gibi gözükmesi gerekmektedir.</p>
+
+<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
+
+<p><a href="/tr/docs/Web/CSS/Reference">MDN CSS reference</a> safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!</p>
+
+<p>Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
+
+<h2 id="Değerlendirme_ve_daha_fazlası">Değerlendirme ve daha fazlası</h2>
+
+<p>Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:</p>
+
+<ol>
+ <li>Çalışmanı <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, veya <a href="https://glitch.com/" rel="noopener">Glitch</a> gibi çevrimiçi bir düzenleyiciye kaydet.</li>
+ <li><a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler:
+  <ul>
+   <li>"CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.</li>
+   <li>Hali hazırda denediklerini ve bizden ne yapmamızı istediğinle ilgili ayrıntılar. Örneğin, bir niteliğe değer atarken sorunla karşılaşırsan veya yaptığının değerlendirilmesini istiyorsan.</li>
+   <li>Yukarıdaki 1. adımda bahsedilen çevrim içi düzenleyicilere kaydettiğin kodun bağlantısı. Bu, bizden istediğin değerlendirme ve yardım için gereklidir. Göremediğimiz kod üzerinden birisine yardım etmek çok zordur.</li>
+   <li>Yardım istediğin konunun <em><u>sorusunu</u> </em>içeren sayfanın bağlantısı.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Sıradaki_ne">Sıradaki ne?</h2>
+
+<p>Bu ilk üniteyi tamamladığın için tebrikler. Artık CSS hakkında iyi bir genel anlayışa sahip olmalısın ve bir stil sayfasında olup bitenlerin çoğunu anlayabiliyorsundur. bir sonraki ünite olan <a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşlarında</a>, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.</p>
+
+<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="Bu_ünitede">Bu ünitede</h2>
+
+<ol>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/What_is_CSS">CSS nedir</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/Getting_started">CSS'e başlarken</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS nasıl yapılandırılır</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/How_CSS_works">CSS nasıl çalışır</a></li>
+ <li><a href="/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Öğrendiklerini uygulama</a></li>
+</ol>
diff --git a/files/tr/learn/css/first_steps/what_is_css/index.html b/files/tr/learn/css/first_steps/what_is_css/index.html
new file mode 100644
index 0000000000..8433d2e196
--- /dev/null
+++ b/files/tr/learn/css/first_steps/what_is_css/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Nedir?
+slug: Öğren/CSS/Ilk_adimlar/CSS_Nedir
+tags:
+  - Beginner
+  - CSS
+  - CSS Giriş
+  - Introduction to CSS
+  - Learn
+  - Modules
+  - Modüller
+  - Ogrenim
+  - Ozellikler
+  - Sozdizimi
+  - Specifications
+  - Syntax
+translation_of: Learn/CSS/First_steps/What_is_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary"><strong>{{Glossary("CSS")}}</strong>(Basamaklı Stil Sayfaları) harika görünen web sayfaları oluşturmana olanak tanır, ancak arka planda nasıl çalışır? Bu makale, basit bir sözdizimi örneğiyle CSS'in ne olduğunu açıklar ve ayrıca dil hakkında ki bazı temel terimleri ele alır.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Ön Koşullar:</th>
+   <td><a class="external new external-icon" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" rel="nofollow noopener">Gerekli yazılımların kurulumu</a> dersinde ayrıntılı olarak açıklandığı gibi, gerekli yazılımların kurulu olduğu bir sistem; <a class="external new external-icon" href="https://wiki.developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files" rel="nofollow noopener">Dosyalarla çalışma</a> dersinde ayrıntılı olarak anlatıldığı şekilde dosyaların nasıl oluşturulacağını ve yönetileceği hakkında bilgi, <a href="https://wiki.developer.mozilla.org/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a>  konusunda anlatıldığı gibi temel HTML hakkında bilgi sahibi olmalısın.</td>
+  </tr>
+  <tr>
+   <th scope="row">Amaç:</th>
+   <td>CSS'in ne olduğunu öğrenmek</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="https://wiki.developer.mozilla.org/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> kısmında HTML'nin ne olduğu ve belgeleri oluşturmak için nasıl kullanıldığını ele aldık. Oluşturulan bu belgeler bir web tarayacısından okunabilir olacaktır. Başlıklar normal metinden daha büyük görünecek, parafraflar yeni bir satıra bölünecek ve aralarında boşluk olacaktır. Bağlantılar, onları diğer metinlerden ayırmak için renkli ve altı çizilmiş olacaktır. Sayfa üzerinde ki gördüğün farklılıklar,  sayfanın yazarı tarafından açık bir stil belirtilmemiş olsa bile sayfanın okunabilir olması için HTML'ye tarayıcının uyguladığı varsayılan stillerdir.</p>
+
+<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
+
+<p>Ancak, tüm web siteleri böyle görünseydi web gerçekten sıkıcı bir yer olurdu. CSS kullanarak, HTML öğelerinin tarayıcıda tam olarak nasıl göründüğünü kontrol edebilir, istediğin tasarımı kullanarak sayfanı oluşturabilirisin.</p>
+
+<p>Tarayıcının varsayılan stilleri hakkında daha fazla bilgi için aşağıdaki videoyu izle.</p>
+
+<p>{{EmbedYouTube("spK_S0HfzFw")}}</p>
+
+<h2 id="CSS_ne_içindir">CSS ne içindir?</h2>
+
+<p>Daha öncede bahsettiğimiz gibi, CSS belgelerin kullanıcılara nasıl sunulacağını, nasıl biçimlendirileceğini, nasıl yerleştirileceklerini vb. gibi şeyleri belirleyen bir dildir.</p>
+
+<p>Bir <strong>belge</strong> genellikle bir biçimlendirme dili kullanılarak yapılandırılmış bir metin dosyasıdır. — <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/HTML">HTML</a> en yaygın biçimlendirme dilidir, ancak <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/SVG">SVG</a> veya <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/XML">XML</a> gibi başka biçimlendirme dilleriyle de karşılaşabilirsin.</p>
+
+<p>Bir dökümanı bir kullanıcıya <strong>sunmak</strong>, onu ziyaretçinin anlayabileceği bir forma dönüştürmek anlamana gelir. <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Web_Taray%C4%B1c%C4%B1s%C4%B1">Tarayıcılar</a>, sevdiğim <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Mozilla_Firefox">Firefox</a>, <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Google_Chrome">Chrome</a> veya <a href="https://wiki.developer.mozilla.org/tr/docs/Glossary/Microsoft_Edge">Edge</a>, belgeleri bir bilgisayar ekranında, projektörde veya yazıcıda görsel olarak sunmak için tasarlanmıştır.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Tarayıcıya bazen {{Glossary("User agent","kullanıcı aracı")}} denir ve bu temelde bir bilgisayar sistemi içerisindeki bir kişiyi temsil eden bir bilgisayar programı anlamına gelir. Tarayıcılar, CSS hakkında konuşurken aklımıza gelen ana kullanıcı arayüzüdür, fakat sadece bunlar değildir. Kullanılabilir başka kullanıcı aracıları da vardır - HTML ve CSS belgelerini yazdırılabilen PDF'lere dönüştüren programlar gibi.</p>
+</div>
+
+<p>CSS, en basit şekilde belge metninin şekillendirimesi için kullanılabilir — örn; başlıkların ve bağlantıların <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/color_value" rel="nofollow">rengi</a> ve <a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/font-size">boyutunu</a> değiştirmek ve düzen oluşturmak için de kullanılabilinir — örn; <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/Layout_cookbook/Column_layouts" rel="nofollow">tek bir metin sütununu bir düzene dönüştürmek</a>. <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/CSS_Animations" rel="nofollow">Animasyon</a> gibi efektler için bile kullanılabilir. Belirli örnekler için bu paragraftaki bağlantılara bir göz atın.</p>
+
+<h2 id="CSS_sözdizimi">CSS sözdizimi</h2>
+
+<p>CSS kural tabanlı bir dildir — web sayfandaki belirli öğelere veya öğe gruplarına uygulanmasını istediğin stilleri belirleyen kurallar tanımlarsın. Örn; "Sayfamdaki ana başlığın büyük ve kırmızı bir metin olarak gösterilmesini istiyorum".</p>
+
+<p>Aşağıdaki kod, yukarıda açıklanan stili elde edecek çok basit bir CSS kuralını gösterir:</p>
+
+<pre class="brush: css notranslate">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>Kural, bir öğe {{Glossary("CSS Selector", "seçici")}} ile başlar. Bu, biçimlendireceğimiz HTML öğesini <em>seçer</em>. Bu başlangıç ile birinci seviye başlıkların stilini belirleyeceğimizi {{htmlelement("h1")}} belirtiyoruz.</p>
+
+<p>Daha sonra bir dizi süslü parantezimiz <code>{ }</code>var. Bunların içinde, <strong>nitelik</strong> ve <strong>değer</strong>  çifti biçimini alan bir veya daha fazla <strong>beyan</strong> olacaktır. Her bir çift, seçtiğimiz öğelerin bir niteliğini ve ardından niteliğe vermek istediğimiz bir değeri belirtir.</p>
+
+<p>İlk önce niteliğimiz ve niteliğe atayacağımız değerimiz var. CSS {{Glossary("property/CSS","niteliğinin")}} kendisine bağlı olarak, atayabileceğin farklı değerlere sahip olabilir. Örneğimizde, çeşitli renk değeri alabilen <code>color</code> niteliğine sahibiz. Ayrıca <code>font-size</code> niteliğinede sahibiz. Bu nitelik, çeşitli <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages" rel="nofollow">boyut birimlerini</a> değer olarak alabilir. Fakat <code>color</code> niteliğine biri uzunluk birimi atamana izin verilmez.</p>
+
+<p>Bir CSS stil sayfası, birbiri ardına yazılmış birçok kuralı içerecektir.</p>
+
+<pre class="brush: css notranslate">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>Bazı değerleri hızlı bir şekilde öğrendiğini, bazılarını ise araştırman gerektiğini göreceksin. MDN'deki nitelik referans sayfaları, unuttuğun da veya bir değer olarak başka neleri kullanabileceğini bilmek istediğinde, nitelikler ve değerleri hakkında bulabileceğin kapsamlı bilgiler sunar.</p>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: MDN <a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/Reference">CSS referans</a>'da listelenen tüm CSS niteliklerinin açıklama sayfalarına bağlantılar bulabilirsin. Alternatif olarak, bir CSS niteliği hakkında daha fazla bilgi edinmen gerektiğinde, favori arama motorun da "mdn <em>css-feature-name</em>" diye aramaya alışmalısın. Örn; "mdn color" ve "mdn font-size"!</p>
+</div>
+
+<h2 id="CSS_modülleri">CSS modülleri</h2>
+
+<p>CSS kullanarak stil verebilceğin pek çok şey olduğundan, dil modüllere bölünmüştür. MDN'yi keşfederken bu modüllere atıfta bulunacağımızı göreceksin ve belge sayfalarının çoğu belirli bir modül için düzenlenmiştir. Örn; ne için kullanıldığı ve alabileceği farklı nitelikleri görebilmek için <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/CSS_Backgrounds_and_Borders" rel="nofollow">Arka Palanlar ve Kenarlıklar</a> modüllerine MDN refaransından bakabilirsin. Ayrıca, teknolojiyi tanımlayan CSS Spesifikasyonuna bağlantılar da bulacaksın (aşağıya bak).</p>
+
+<p>Bu aşamada CSS'in nasıl yapılandırıldığı konusunda çok fazla endişelenmene gerek yok, ayrıca bir niteleğin diğer öğelerde de kullanılabildiğinin farkındaysan bu aradığın bilgiye ulaşmanı kolaylaştırabilir, bir öğe için öğrendiğin nitelik bigileri, kullanılabildiği diğer öğe içinde aynı kural düzenine sahiptir.</p>
+
+<p>Kesin bir örnek vermek gerekirse, Arka Planlar ve Kenarlıklar modülüne geri dönelim — bu modülde tanımlacak <code><a href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/background-color">background-color</a></code> ve <code><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/border-color" rel="nofollow">border-color</a></code> nitelik değerlerinin aynı değerleri alabileceğini düşünebilirsin. Haklısında!</p>
+
+<h3 id="CSS_özellikleri">CSS özellikleri</h3>
+
+<p>Tüm web teknolojileri (HTML, CSS, JavaScript, vb.), <span class="ILfuVd"><span class="hgKElc">Standardizasyon</span></span> konsorsiyumları ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} veya {{glossary("Khronos")}} gibi) tarafından yayınlanan standartlar adı verilen dev dokümanlarda tanımlanır.</p>
+
+<p>CSS'de farklı değildir — W3C içindeki <a class="external external-icon" href="https://www.w3.org/Style/CSS/" rel="noopener">CSS Working Group</a> adı verilen bir grup tarafından geliştirilmiştir. Bu grup; tarayıcı sağlayıcılarının, CSS ile ilgilenen diğer şirketlerin temsilcileri ve bağımsız olarak hareket eden, <em>davetli uzmanlar</em> olarak bilinen ve üye bir kuruluşa bağlı olmayan kişilerden oluşmaktadır.</p>
+
+<p>Yeni bir CSS özelliği, CSS Working Group tarafından belirlenir veya geliştirilir. Bu yenilik için bir tarayıcı bir yeteğene sahip olmak istemiş olabilir, web tasaraımcıları ve geliştiricileri bir nitelik isteğinde bulunmuş olabilirler veya çalışma grubunun kendisi bir gereksinim olduğunu düşünmüş olabilir. Bunlar gibi durumlarda organizasyondan yeni CSS niteliği için çalışma başlatır ve yeni niteliğin eski web sitelerini bozacak bir şekilde tanımlama yapılmaması için grub çok çalışmaktadır. 2000 yılında yayınlanan ve o zamanki sınırlı CSS niteliklerini kullanan bir web sayfası bugün hala kullanılabiliyor olması gerekir.</p>
+
+<p>CSS'e yeni başlayan biri olarak, CSS niteliklerini ezici bulman olasıdır. Bir çok deneyimli geliştirici, MDN belgelerine veya diğer eğitimlere başvurmayı tercih eder. Bu sayede, her zaman bir kaynak bulabileceğini bildiğinde, kullandığın CSS'i, tarayıcı desteğini(aşağıya bakın) ve nitelikler arasındaki ilişkiyi anlamak için zaman harcamaya değer.</p>
+
+<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2>
+
+<p>CSS belirlendikten sonra, sadece bir veya daha fazla tarayıcı tarafından desteklenmiş ise web sayfalarının geliştirilmesinde kullanılabilir. Bu, CSS dosyamızdaki talimatın ekrana çıktısı alınabilecek bir kurala dönüştürmek için desteklendiği anlamına gelir. <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_works" rel="nofollow">CSS Nasıl Çalışır</a> dersinde bu sürece daha fazla bakacağız. Tüm tarayıcıların bir niteliği aynı anda uygulaması alışılmadık bir durumdur ve bu nedenle genellikle bazı tarayıcılarda CSS'in bir kısmını kullanıp, bir kısmını da kullanamayacağız. Bu nedenle, tarayıcıların CSS'in hangi niteliklerini desteklediğini kontrol etmek faydalıdır. MDN'deki her nitelik sayfasında, ilgilendiğimiz niteliğin desteklenme durumunu görebilir ve onun her tarayıcıda çalışıp çalışmayacağını anlayabiliriz.</p>
+
+<p>Aşağıda, CSS  <code><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Web/CSS/font-family" rel="nofollow">font-family</a></code> niteliği için destek tablosu yer almaktadır.</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="Sırada_ne_var">Sırada ne var?</h2>
+
+<p>Artık CSS'in ne olduğunu biraz anladığına göre, CSS'i kendin yazmaya başlabileceğin <a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Getting_started" rel="nofollow">CSS ile Başlarken</a> bölümüne geçebiliriz.</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="Bu_kısımda">Bu kısımda</h2>
+
+<ol>
+ <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/What_is_CSS" rel="nofollow">CSS nedir?</a></li>
+ <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Getting_started" rel="nofollow">CSS'ye başlarken</a></li>
+ <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_is_structured" rel="nofollow">CSS nasıl yapılandırılır</a></li>
+ <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/How_CSS_works" rel="nofollow">CSS nasıl çalışır</a></li>
+ <li><a class="new" href="https://wiki.developer.mozilla.org/tr/docs/Learn/CSS/First_steps/Using_your_new_knowledge" rel="nofollow">Öğrendiklerimizi uygulamak</a></li>
+</ol>