CSS nedir? Yerel, Genel ve Harici CSS
access_time
hourglass_empty
person_outline

CSS nedir? Yerel, Genel ve Harici CSS

Giriş

CSS nedir?

CSS, Cascading Style Sheet temelde web sitenizdeki html elementlerinin renk, boyut, yazı karakteri gibi her türlü görsel özelliklerini değiştirmenizi sağlar.

Web sitenize CSS stilleri eklemek için 3 yol vardır: Genel CSS’i kullanabilir ve CSS kurallarını HTML belgesinin <head> bölümüne ekleyebilir, tüm CSS kurallarını içeren harici bir .css dosyasına bağlantı verebilir veya web sitenize kurallar uygulamak için yerel CSS kullanabilirsiniz. Bu rehberde üç yöntemi, avantajlarını ve dezavantajlarını gözden geçireceğiz.

Seçenek 1 — Genel CSS

Genel CSS kodu, belirli bir sayfanın <head> bölümüne yerleştirilir. Sınıflar(class) ve kimlikler(id), CSS kodunu belirtmek için kullanılabilir, ancak genel css yalnızca eklendiği belirli sayfada etkindir. Bu şekilde yerleştirilen CSS stilleri, sayfa her yüklendiğinde yüklenir, böylece yükleme süresi artabilir. Bununla birlikte, bazı durumlarda genel stil kullanılması yararlı olabilir. Örneğin, birisine bir sayfa şablonu gönderirken – her şey bir sayfada olacağı için, bir ön izleme görmek çok daha kolay olacaktır. Genel CSS, <style> </style> etiketlerinin arasına yerleştirilir. Bir genel stil yazımı örneği:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Genel CSS kullanmanın avantajları

  • Yalnızca bir sayfa stil kodlarından etkilenir.
  • Sınıflar ve kimlikler genel stil sayfası tarafından kullanılabilir.
  • Birden fazla dosya yüklemenize gerek kalmaz. HTML ve CSS aynı dosyada olabilir.

Genel CSS kullanmanın dezavantajları

  • Sayfa yüklenme süresini uzatır.
  • Yalnızca bir sayfa stil kodlarından etkilenir. Birden fazla sayfada aynı stili kullanmak istediğinizde kullanışlı değildir.

HTML sayfasına genel CSS eklemek

  1. HTML sayfanızı herhangi bir metin düzenleyicisiyle açın. Sayfa zaten hosting hesabınıza yüklüyse, hosting sağlayıcınızın kontrol panelindeki metin düzenleyicisini / dosya yöneticisini kullanabilirsiniz. Bilgisayarınızda bir HTML belgesi varsa, düzenlemek için herhangi bir metin düzenleyicisini kullanabilir ve daha sonra FTP istemcisi ile dosyayı hosting hesabınıza yükleyebilirsiniz.
  2. <head> açılış etiketini bulun ve hemen ardına aşağıdaki kodu ekleyin:
    <style type="text/css">
  3. Şimdi yeni bir satıra atlayın ve CSS kurallarınızı ekleyin. Örneğin:
    body {
      background-color: blue;
    }
    h1 {
      color: red;
      padding: 60px;
    }
  4. CSS kuralları eklemeyi tamamladıktan sonra kapanış stil etiketini ekleyin:
    </style>

Sonuç olarak, genel CSS kodlarını içeren HTML belgesi şu şekilde görünmelidir:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: blue;
      }
      h1 {
        color: red;
        padding: 60px;
      }
    </style>
  </head>
  <body>
    <h1>Hostinger Rehberler</h1>
    <p>İlk paragrafımız.</p>
  </body>
</html>

Seçenek 2 — Harici CSS

Muhtemelen web sitenize CSS eklemenin en uygun yolu, onu harici bir .css dosyasına bağlamaktır. Bu şekilde harici bir CSS dosyasında yaptığınız değişiklikler web sitenize global olarak yansıtılacaktır. Harici bir CSS dosyasına bir bağlantı, yine sayfanın <head> bölümüne yerleştirilir:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

style.css tüm stil kurallarını içerir. Örneğin:

.xleftcol {
  float: left;
  width: 33%;
  background:#809900;
}
.xmiddlecol {
  float: left;
  width: 34%;
  background:#eff2df;
}

Harici CSS kullanmanın avantajları

  • HTML sayfalarının boyutu küçülür ve HTML sayfaları daha temiz bir yapıya sahip olur.
  • Daha hızlı yükleme hızına sahipsiniz.
  • Aynı .css dosyası birden fazla sayfada kullanılabilir.

Harici CSS kullanmanın dezavantajları

  • Harici CSS yüklenene kadar sayfa düzgün görünmeyebilir.

Seçenek 3 — Yerel CSS

Yerel CSS, belirli bir HTML etiketi için kullanılır. <style> özniteliği, belirli bir HTML etiketini stillemek için kullanılır. Bu seçenekte her HTML elementinin tek tek stillendirilmesi gerektiği için bu şekilde CSS kullanmak önerilmez. Web sitenizi yönetmek yalnızca yerel CSS kullanırsanız çok zorlaşabilir. Ancak, bazı durumlarda da bu seçenek yararlı olabilir. Örneğin, CSS dosyalarına erişiminiz olmadığında veya yalnızca tek bir öğe için stil uygulamak zorunda olduğunuz durumlarda. Yerel CSS’e sahip bir HTML sayfası örneği şuna benzer:

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
  </body>
</html>

Yerel CSS kullanmanın avantajları

  • Değişiklikleri test edip önizlemek isterseniz kullanışlıdır.
  • Hızlı düzeltmeler için kullanışlıdır.
  • HTTP istek sayısı azalır.

Yerel CSS kullanmanın dezavantajları

  • Yerel CSS her HTML elementine uygulanmalıdır.

Sonuç

Artık web sitenize CSS eklemenin farklı yollarını biliyorsunuz ve satır içi, harici ve dahili stil sayfaları arasındaki farkları biliyorsunuzdur.

Yazar

Author

Egehan D. / @egehandulger

Egehan Hostinger'da ML ve NN ile denetimsiz öğrenme üzerinde çalışıyor. Veri analizi hakkında büyük bir tutkuya sahiptir. İşi her ne kadar hobi gibi olsa da, çeşitli aktivitelerde gönüllü olmaktan ve ormanda kamp yapmaktan da büyük oranda zevk alıyor.

İlgili Rehberler

Bir yanıt bırakın

Yorum*

İsim*

Eposta*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Şimdi Hostinger'ın bir parçası olun!