Doğrudan etiket üzerine css yazma çok tercih edilen bir yöntem değildir. fakat nadiren de olsa kullanılmaktadır.

Bu yazımda sizlere css kodlarını yazabileceğimiz üç yerden ilki olan etiket üzerine css yazmayı anlatacağım. Mantığı çok basit, css kodunu ayrı bir yere değil doğrudan etiketin içine style özelliği ile yazıyoruz.

yazım şekli aşağıdaki gibidir.

<etiket style="özellik:değer; özellik:değer;"> ... </etiket>

Burada dikkat etmeniz gereken şey her özellikten sonra noktalı virgül koymak. Koymazsanız tarayıcı sonraki özelliği okuyamaz ve sayfanız siz istediğiniz gibi görünmez.

Örnek Kullanım

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>
elementin(tag-etiket) üzerine css yazma
</title>
</head>
<body>

<div style="width:1000px; height:120px; margin-right:auto;margin-left:auto;background-color:#ff5c26;">
header(üst)
</div>

<div style="width:1000px; height:350px; margin-right:auto;margin-left:auto;background-color:#f0f0e1;">

<div style="float:left;width:700px; height:200px; background-color:#dfffbf;">
    content left(içerik sol)
</div>
<div  style="float:left;width:300px; height:280px; background-color:#dfffbf;">
    content rigt(içerik sağ)
</div>

</div>

<div style="width:1000px; height:100px; margin-right:auto;margin-left:auto;background-color:#73dcff;">
footer(alt)
</div>

</body>
</html>

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

sayfamızı header(üst), içerik ve footer(alt) olmak üzere üç parçaya ayırdık ve her parçayı bir div ile oluşturduk. Her div'in css kodlarını da doğrudan kendi style özelliğine yazdık.

width ve height ile kutuların genişliğini ve yüksekliğini verdik. margin-right:auto ve margin-left:auto ifadeleri kutuyu sayfanın ortasına almak için. background-color ile de her bölüme ayrı bir arka plan rengi verdik ki bölümler birbirinden rahatça ayırt edilsin.

içerik bölümünün içinde ise iki tane div daha var. float:left ile bu iki kutuyu yan yana diziyoruz. Soldaki 700px, sağdaki 300px olunca toplamda 1000px ediyor, yani dıştaki kutuya tam olarak sığıyorlar.

dosyayı kaydedip tarayıcıda açtığınızda üstte turuncu bir header, ortada yan yana iki kutu ve en altta mavi bir footer göreceksiniz.

Peki madem bu kadar kolay neden çok tercih edilmiyor? Şimdi bir senaryo düşünelim. Sitenizde 20 sayfa var ve her sayfada aynı header kutusu bulunuyor. Bir gün header rengini değiştirmek istediniz. Etiket üzerine css yazdıysanız 20 sayfayı tek tek açıp her birinde bu rengi değiştirmeniz gerekir. Üstelik html kodlarının arasına giren bu uzun style ifadeleri bir süre sonra kodu okumayı da zorlaştırıyor.

Peki ne zaman işimize yarar? Hızlıca bir şey denemek istediğinizde yada sadece tek bir etiketin görünüşünü değiştirmeniz gerektiğinde etiket üzerine css yazmak pratik bir çözüm. Bunun dışında kodlarınızı sayfa içine yada harici bir css dosyasına yazmanızı tavsiye ederim. Bu iki yöntemi de ilgili yazılarımda anlattım.