Sayfa içine doğrudan css yazılması da sık kullanılan yöntemlerden biridir. özellikle sadece bir sayfaya özel ve kısa olan css kodlarının yazılmasında tercih edilir.

en büyük dezavantajı ise yazılan css kodlarının sadece yazıldığı sayfa içinde kullanılmasıdır ki diğer sayfalarda kullanılamaz.

Daha önce etiket üzerine css yazımı yazımda css kodlarını doğrudan etiketin style özelliğine yazmıştık. Bu yazımda ise aynı sayfayı bu sefer css kodlarını sayfanın head bölümüne, style etiketleri arasına yazarak oluşturacağız. Böylece iki yöntem arasındaki farkı da daha rahat görmüş olacaksınız.

örnek kullanım. (kullanılan css özelliklerinin ne anlama geldiği yanlarında açıklanmıştır.)

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>sayfa içinde sayfaya özel css yazma</title>
<style type="text/css">
/*
burada css tanımlamaları yapılır.
*/
#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;
}
</style>
</head>
<body>
<div id="header">header(üst)</div>
<!--
header isimli id atamasına örnek
-->
<div id="content">
<div id="article">content left(içerik sol)</div>
<div id="aside">content right(içerik sağ)</div>
</div>
<div id="footer">footer(alt)</div>
</body>
</html>

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

body içindeki div etiketlerine baktığınızda hiçbirinde style özelliği olmadığını göreceksiniz. Onun yerine her div'e bir id verdik. header, content, article, aside ve footer. css kodlarını da head bölümündeki style etiketleri arasına yazdık ve her kuralın başına #header, #content gibi ilgili id ismini koyduk. Tarayıcı sayfayı açarken bu kuralları okuyor ve id'si eşleşen etikete uyguluyor.

#article kutusuna float:left, #aside kutusuna ise float:right verdik. Böylece içerik kutusu sola, yan menü sağa yaslanarak yan yana durdu. 700px ile 290px toplamda 990px ediyor, aradaki 10px de iki kutu arasında boşluk olarak kalıyor.

Peki etiket üzerine yazmaya göre ne kazandık? İlk olarak html kodlarımız çok daha temiz ve okunaklı hale geldi. İkincisi tüm css kodları tek bir yerde toplandı. Header rengini değiştirmek istediğinizde artık html kodlarının arasında aramanıza gerek yok, style bölümünde #header kuralını bulup değiştirmeniz yeterli. Aynı class'ı birden fazla etikete verip tek kuralla hepsini biçimlendirmek de bu yöntemle mümkün oluyor.

Ama başta söylediğimiz dezavantaj hala duruyor. Sitenizde 10 sayfa varsa ve hepsinde aynı header kullanılıyorsa bu style kodlarını 10 sayfaya da ayrı ayrı yazmanız gerekir. Bir değişiklik yaptığınızda da 10 sayfayı tek tek güncellersiniz. Bu yüzden bu yöntemi tek sayfalık çalışmalarda yada sadece o sayfaya özel birkaç satırlık kodlarda kullanmanızı tavsiye ederim.

Birden fazla sayfada kullanılacak css kodları için en doğru yöntem kodları ayrı bir dosyaya yazmaktır. Bunu da Harici CSS dosyası oluşturma ve sayfaya dahil etme yazımda anlattım.