Why use CSS?

Go to Previous Section:
What is CSS?This second section of the CSS Getting Started tutorial explains the relationship between CSS and documents. In the exercise you'll learn how to add a CSS stylesheet to the sample document you created in the first section.

Bilgi: Neden CSS kullanılır?

Belgenizin dizayn, yerleşim ve görünüm ile ilgili çeşitli varyasyonlarını içeren stil öğelerini, farklı ekran boyutlarında ve farklı cihazlarda, tanımlamak için CSS kullanılır. CSS kodlarınızı <head> tagi içerisine gömebilirsiniz (embedded internal CSS) veya stillerinizi tanımlayan dış bir stil sayfasını farklı bir klasöre ekleyebilirsiniz (external CSS). Farklı bir dosyadaki stillerinizi belgenize bağlamak için, <head> tagi içerisine basitçe link vermeniz gerekir.

Dış stil sayfalasının bir çok avantajı vardır. Stil sayfalarınızı HTML içeriğinizden farklı bir dosyada saklamak:

Tekrarlanan kodların önlenmesine yardım eder.
Kolay onarım yapılmasını sağlar.
Tek bir yerden bütün stilleriniz kontrol etmenizi sağlar.

Örnek

h2 elementine belirlediğiniz stil ile, tanımladığınız bütün h2 elementleri için tek bir yerden kontrol sağlayabilirsiniz.

Kullanıcı bir web sayfasını görüntülediğinde,sayfanın içeriğiyle beraber tanımlanmış stilleri yüklenir.

Kullanıcı bir web sayfasını yazdırdığında, tanımladığınız stillerle sayfanın okunabilirliğini artırabilirsiniz.

CSS ve HTML nasıl beraber çalışır? Genel olarak, HTML'yi belgenizin içeriğini belirlemek için kullanırsınız, stilleri için değil. CSS'i ise belgenizin stillerini tanımlamak için kullanırsınız, içeriği için değil. Bu öğreticiden sonra, bu düzenlemelerin nasıl yapıldığını göreceksiniz.

Daha fazla detay

HTML gibi bir biçimlendirme dili stil tanımlamak için bir kaç yol sağlar.

Örneğin, HTML içerisinde <b> tagını kalınlaştırmak için kullanabilirsiniz ve arkaplan rengini <body> tagı içerisinde tanımlayabilirsiniz.

CSS ile bu özellikleri kullanamazsınız fakat bunlara gerek de kalmaz. Kullanmanız gereken bütün kodları tek bir yerde kullanabilirsiniz.

Çalışma: Bir şablon hazırlamak

Birinci bölümde eklediğiniz belge1.html ile aynı dizine bir text belgesi daha ekleyin.
Eklediğiniz belgeyi stil1.css olarak isimlendirin. Bu sizin stil dosyanız olacak.
CSS dosyası içersine aşağıdaki satırı ekleyin ve kaydedin:
```
strong {color: red;}
```

Stil dosyası ile bağlantı kurmak

Stil dosyanız ile HTML'inizi ilişkilendirmek için, HTML dosyasını düzenleyin. Aşağıdaki işaretli satırı ekleyin:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>örnek belge</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p>
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

Kaydedin ve HTML'yi tarayıcınızda açın, açıksa yenileyin. İlk harfler kırmızı olacaktır:

Cascading Style Sheets

View above Demo

Challenge

CSS bazı renkler için rengin ingilizcesine izin verir.

Possible solution

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

Hide solution

See a solution for the challenge.

What next?

Go to Next Section:
How CSS works.Now you have a sample document linked to a separate stylesheet, you are ready to learn more about how your browser combines them when it displays the document.

Why use CSS?

Bilgi: Neden CSS kullanılır?

Çalışma: Bir şablon hazırlamak

Stil dosyası ile bağlantı kurmak

What next?

Document Tags and Contributors