harici bir sayfada CSS kodu yazıp bu kodu sayfaya bağlamak (dahil etmek) en sık kullanılan yöntemdir. en kullanışlı yöntem olduğunu kesin bir dille söyleyebiliriz.

bu şekilde oluşturulan bir CSS dosyası istenilen sayfaya dahil edilerek kullanılır. bir özellikte yapılan bir değişiklik CSS dosyasının bağlı olduğu bütün web sayfalarında geçerli olacaktır.

Daha önce css kodlarını etiket üzerine ve sayfa içine yazmayı anlatmıştım. Bu yazımda aynı sayfayı bu sefer css kodlarını ayrı bir dosyaya yazarak oluşturacağız.

Yapacağımız iş çok basit. Önce html sayfamızı oluşturuyoruz, sonra aynı klasörde stil_dosyamiz.css isimli boş bir dosya açıp css kodlarımızı içine yazıyoruz. En son da html sayfasının head bölümüne yazdığımız tek bir satır ile bu dosyayı sayfaya bağlıyoruz.

örnek kullanım

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>harici css dosyası yazma ve sayfaya dahil etme</title>
<!-- harici css dosyasını sayfaya dahil etme -->
<link rel="stylesheet" href="stil_dosyamiz.css" />

</head>
<body>

<div id="header">
header
</div>

<div id="content">

<div id="article"></div>

<div id="aside"></div>

</div>

<div id="footer">

</div>

</body>
</html>

stil_dosyamiz.css içeriği

#header{
width:1000px; /*genişlik*/
height:120px; /*yükseklik*/
margin-right:auto; /*sağdan boşluk otomatik*/
margin-left:auto; /*soldan boşluk otomatik*/
background-color:#ff5c26; /*arkaplan rengi */
}

#content{
width:1000px;
height: 420px;
margin-right:auto;
margin-left:auto;
background-color:#ececfb;
}

#article{
float:left; /* divleri yan yana getirmek için */
width:700px;
height: 220px;
background-color:#ffbf00;
}

#aside{
float:right;
width:290px;
height: 320px;
background-color:#ffbf00;
}

#footer{
width:1000px;
height: 120px;
margin-right:auto;
margin-left:auto;
background-color:#4cd2ff;
}

kodların açıklamasını yapacak olursak,

işin bütün sırrı head bölümündeki link etiketinde. rel="stylesheet" ile tarayıcıya bağladığımız dosyanın bir stil dosyası olduğunu söylüyoruz, href ile de dosyanın nerede olduğunu gösteriyoruz. css dosyasının içine style etiketi yazmıyoruz, sadece css kurallarını yazıyoruz. Kuralların kendisi önceki yazıdaki ile birebir aynı, değişen tek şey yerleri.

href içine yazdığımız yol önemli. css dosyası html dosyası ile aynı klasörde ise sadece dosya adını yazmak yeterli. Ama genelde projelerde css dosyaları ayrı bir klasörde tutulur. Mesela css isimli bir klasörün içine koyduysanız yolu da ona göre yazmalısınız.

<link rel="stylesheet" href="css/stil_dosyamiz.css" />

Peki bu yöntemin ne faydası var? Şimdi bir senaryo düşünelim. Sitenizde anasayfa, hakkımda ve iletişim olmak üzere 3 sayfa var. Üç sayfanın head bölümüne de aynı link satırını yazıyorsunuz. Bir gün header rengini değiştirmek istediğinizde sadece stil_dosyamiz.css dosyasını açıp tek bir satırı değiştiriyorsunuz ve üç sayfanın da header rengi aynı anda değişiyor. Sayfa sayısı 3 değil 300 olsa da durum değişmez.

Bir sayfaya birden fazla css dosyası da bağlayabilirsiniz. Büyük projelerde genel kurallar bir dosyada, mobil görünüm kuralları başka bir dosyada tutulabilir. Bu durumda link satırlarını alt alta yazmanız yeterli. Burada sıralamaya dikkat edin, aynı etikete iki dosyada farklı değer verdiyseniz sonra bağlanan dosyadaki değer geçerli olur.

<link rel="stylesheet" href="css/genel.css" />
<link rel="stylesheet" href="css/mobil.css" />

Son olarak sık karşılaşılan bir soruna da değineyim. css dosyasında değişiklik yapıp sayfayı yenilediğinizde bazen hiçbir şeyin değişmediğini görürsünüz. Bunun sebebi tarayıcının css dosyasını daha hızlı açmak için önbelleğe (cache) almasıdır. Böyle bir durumda sayfayı CTRL+F5 ile yenilediğinizde tarayıcı dosyayı baştan yükler ve değişikliklerinizi görürsünüz.