CSS Başlangıç yönergesindeki bu bölüm CSS ve HTML belgeleri arasındaki ilişkiyi anlatır. İlk bölümde yarattığınız belgeye biçim eklemeyi, alıştırmayla öğreneceksiniz.

Bilgi: Neden CSS kullanılır?

Belgenizin tasarım, yerleşim ve görünüm ile ilgili çeşitlerini içeren biçim öğelerini, farklı ekran boyutlarında ve farklı aygıtlarda tanımlamak için CSS kullanılır. CSS kodlarınızı <head> içerisine gömebilirsiniz (gömülü iç CSS) veya biçimlerinizi tanımlayan bir biçim sayfasını farklı bir dizine ekleyip çağırabilirsiniz (dış CSS). Farklı bir belgede bulunan biçim kurallarını belgenize eklemek için, <head> ögesi içerisine bağlantı vermeniz gerekir.

Dış biçim sayfalasının bir çok üstünlüğü vardır. Biçim sayfalarınızı HTML içeriğinizden farklı bir belgede saklamak:

  • Tekrarlanan kodların önlenmesine yardım eder.
  • Kolay onarım yapılmasını sağlar.
  • Tek bir yerden bütün biçimlerinizi denetlemenizi sağlar.
Örnek

h2 ögesi için oluşturduğunuz biçim kuralı ile, tanımladığınız bütün h2 ögerlerini tek bir yerden denetleyebilirsiniz.

Kullanıcı bir ağ sayfasını görüntülediğinde, sayfanın içeriğiyle birllikte tanımlanmış biçim kuralları yüklenir.

Kullanıcı bir ağ sayfasını yazdırdığında, tanımladığınız özel biçim kuralları ile sayfanın okunabilirliğini artırabilirsiniz.

CSS ve HTML nasıl birlikte çalışır? Genel olarak, HTML'yi belgenizin içeriğini belirlemek için kullanırsınız, biçim kuralları için CSS vardır. Bu öğreticiden sonra, bu düzenlemelerin nasıl yapıldığını göreceksiniz.

Daha fazla ayrıntı

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

Örneğin, HTML içerisinde <b> ögesini, yazıyı kalınlaştırmak için kullanabilirsiniz ve ardalan rengini <body> ögesi 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 kalıp hazırlamak

  1. Birinci bölümde eklediğiniz belge1.html ile aynı dizine bir belge daha ekleyin.
  2. Eklediğiniz belgeyi bicim1.css olarak adlandırın. Bu sizin biçim belgeniz olacak.
  3. CSS belgesi içerisine aşağıdaki satırı ekleyip kaydedin:
  4. strong {color: red;}
    

Biçim belgesi ile bağlantılamak

  1. Biçim belgeniz ile HTML'inizi ilişkilendirmek için, HTML belgesini 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="bicim1.css">
      </head>
      <body>
        <p>
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>
    
  2. Kaydedin ve HTML'yi tarayıcınızda açın, açıksa yenileyin. İlk harfler kırmızı olacaktır:
    Cascading Style Sheets
Alıştırma

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
Alıştırmanın yanıtını görün.

Sıradaki

Artık bir HTML belgesine bağlı bir biçim belgeniz var.

Şimdi tarayıcınızın, sayfayı oluştururken bunları nasıl birleştirdiğini öğrenebilirsiniz.

Document Tags and Contributors

Contributors to this page: alpr, pasalog
Last updated by: alpr,