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.
örnek kullanım
[code language=”html”]
<!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>
[/code]
stil_dosyamiz.css içeriği
[code language=”css”]
#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;
}
[/code]
