Web sitelerimizi tasarlama aşamasında yerde CSS kullanırız. Bu kullandığımız CSS kodlarını yerine göre farklı şekillerde kullanmamız gerekebilir. Bu yazımızda CSS kullanım şekilleri konusundan bahsedeceğiz.

CSS kodlarını 3 farklı şekilde kullanabiliriz. Bunlar;

  • Harici Stil Kullanımı (External Style Sheet)
  • Dahili Stil Kullanımı (Internal Style Sheet)
  • Etiket İçinde Kullanımı (Inline Style)

Harici Stil Kullanımı (External Style Sheet)

Bu kullanım şeklinde isminden de anlayacağınız üzere ayrı bir CSS dosyamız olması gerekmektedir. Bu CSS dosyasının uzantısı .css şeklinde olmalıdır. Sonrasında bu CSS dosyasını HTML dosyasında çağırmamız gerekiyor. Daha anlaşılabilir olması için bir örnek ile açıklayalım.

Örnek Harici Stil Kullanımı :

Bir stil dosyası açıyoruz. Örneğin dosyamızın ismi stil.css olsun 

p{
    font-size: 15px;
}

Sonrasında index.html adında bir HTML sayfası açalım. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="stil.css" /> <!-- Burada stil.css dosyamızı bağladık.-->
    <title>Evrensel Kod - Harici Stil Kullanımı</title>
</head>
<body>
    <p>Evrensel Kod</p>
</body>
</html>

Artık HTML dosyamızda bulunan tüm <p> etiketlerinin içerisinde bulunan yazılar 15px boyutunda olacaktır.

NOT : CSS kullanım şekillerinden ilk tercih edilmesi gereken harici stil yöntemidir.

Dahili Stil Kullanımı (Internal Style Sheet)

İkinci yöntemimiz ise dahil stil kullanımı. Bu yöntemde CSS kodlarımızı, HTML dosyamızın içerisinde <head> etiketleri içerisinde <style> etiketleri içerisinde yazıyoruz. Yani bu yöntemde tek bir HTML dosyamız var. Yine örnek kullanım ile görelim.

Örnek Dahili Stil Kullanımı :

Yine index.html adlı bir HTML dosyası açıyoruz ve kodlarımızı ekliyoruz. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evrensel Kod - Harici Stil Kullanımı</title>
    <style> <!-- Burada css kodlarımızı yazdık. -->
        p{
            font-size: 15px;
        }
    </style>
</head>
<body>
    <p>Evrensel Kod</p>
</body>
</html>

NOT : Bu yöntem html dosyamızdaki satır sayısını çok arttıracağı için pek tercih etmeyiniz.

Bu yazı dikkatini çekebilir.   CSS ile Duyarlı (Responsive) Tasarım: Farklı Ekran Boyutlarına Uyumlu Web Deneyimi

Etiket İçinde Kullanımı (Inline Style)

Bu yöntemde de dahili kullanımda olduğu gibi sadece HTML dosyasına ihtiyacımız var. Stil verilecek olan etikete style parametresi ekleyerek kullanırız. Hemen örnek bir kullanımını görelim.

Örnek Etiket İçi CSS Kullanımı :

Yine index.html adında bir HTML sayfası açıyoruz. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evrensel Kod - Harici Stil Kullanımı</title>
</head>
<body>
    <p style="font-size: 15px;">Evrensel Kod</p> <!-- Burada css kodlarımızı yazdık. -->
</body>
</html>

NOT : Bu yöntem dahili stil kullanımında olduğu gibi html dosyamızdaki satır sayısını çok arttıracağı için pek tercih etmeyiniz.

NOT : Burada yazılan CSS kodları sadece yazıldığı parametreyi etkiler.

Bu yazımızda CSS kullanım şekilleri konusunda harici stil (External Style Sheet), dahili stil (Internal Style Sheet) ve etiket içinde (Inline Style) kullanımını gördük. Ayrıca diğer CSS derslerimizi de görmek isterseniz buradan tümüne ulaşabilirsiniz.