CSS/XHTML ve HTML'e CSS Uygulamak

CSS, Üç yöntem kullanılarak HTML veya XHTML dokümanlarına uygulanabilir. Bağlantılı, Gömülü ve satır içi.

Bağlantılı yöntemde, CSS tanımlamaları ayrı bir dosyada saklanır, bunun yerine HTML Dokümanına bağlama yöntemiyle eklenir.
Gömülü yöntemde, CSS tanımlamaları, HTML Sayfasının başlık bölümünde kullanılır.
Satır içi yöntemde, CSS tanımlamaları, HTML etiketleri'nin içerisinde kullanılır.

Bağlantılı(Bağlayıcı, Linked)

Bağlantılı CSS ile, CSS kuralları ayrı bir dosyada saklanır. "style.css" isminde bir CSS dosyamızın olduğunu varsayalım. Bu CSS dosyasını HTML dosyasının baş kısmında(<head></head> etiketleri arasında) dahil etmek için şöyle bir bağlama yöntemi kullanılır.

<head>
 <title>Örnek Web sayfası</title>
 <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

Bu örnekteki "bağlama" üç özelliğe sahiptir. İlk özellik '''rel''' bu özellik tarayıcıya dosyanın türünü söyler. Biz dosya türünün Style Sheet (Stil Şablonu) olduğunu söyledik. İkinci özellik '''type''' bu özellik tarayıcıya Stil türünün ne olduğunu söyler. Biz Stil türünü "CSS" olarak belirttik. Ve üçüncü özellik '''href''' bu özellik'te CSS dosyasının ismi belirtilir, ve CSS dosyası HTML'e dahil olur. Peki "style.css" dosyasının içeriği ne olacak ?

p{
   font-weight:bold;
   color:blue;
 }

HTML Dosyasında kullanımı

<html>
 <head>
  <title>Örnek CSS Kullanımı</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <p>Bu etiket CSS ile biçimlendirilerek "Kalın ve Mavi renk" özelliğini aldı.</p>
 </body>
</html>

Önizleme

Bu etiket CSS ile biçimlendirilerek "Kalın ve Mavi renk" özelliğini aldı.

Gömülü(Embedding)

Dinamik olarak oluşturulan web sayfalarında gömülü CSS kullanmanız gerekebilir ama bu en az düzeyde tutulmalıdır. Hatta dinamik olan sitelerde birden fazla sayfa için aynı özellikleri taşıyan biçimlendirmelerde Bağlantılı yöntem kullanılmalıdır.

Gömülü CSS, <style></style> etiketleri arasında kullanılır. Bu etiketler HTML dosyasının baş kısmında <head></head> etiketleri arasına yazılır.

CSS Uygulanmamış basit bir HTML dosyası

<html>
 <head>
  <title>Örnek Gömülü CSS Uygulaması (Embedding)</title>
 </head>
 <body>
  <p>Biçimlendirilecek Metin</p>
 </body>
</html>

Gömülü uygulama ile CSS uygulanmış HTML Dosyası.

<html>
 <head>
  <title>Örnek Gömülü CSS Uygulaması (Embedding)</title>
  <style type="text/css">
   p{
      font-weight:bold;
    }
  </style>
 </head>
 <body>
  <p>Artık bu metin kalın oldu.</p>
 </body>
</html>

<style></style> etiketleri arasında CSS kurallarını tanımladık ve artık bu sayfada kullanılan her "p" etiketi bu özellikleri alacak.

Satır içi (Inline)

Satır içi CSS, başlangıç tagında kullanılır.

<div style="font-weight:bold; color:blue">Satır içi CSS ile biçimlendirilmiş div etiketi.</div>

Önizleme

Satır içi CSS ile biçimlendirilmiş div etiketi.