HTML Nesnelerine Stil Vermek

Html nesnelerine style özelliği ile stil verilebilmektedir. Ancak bunun yerine bu stillerin CSS içerisinde id ve class olarak tanımlanarak kullanılması tercih edilen yöntemdir.

<div style="background-color:rgba(255, 220, 255, 1);
        width:200px;height:200px;border:1px solid #aaa;border-radius:4px;">
    <p style="font-family:Arial;font-size:12px;font-weight:bold;padding-left:3px;">Paragraf içeriği 1</p>
    <p style="font-family:Arial;font-size:12px;padding-left:3px;">Paragraf içeriği 2</p>
    <span style="font-family:Arial;font-size:10px;
        color:white;background-color:black;padding:3px;margin:2px;">Etiket 1</span>
    <span style="font-family:Arial;font-size:10px;
        color:white;background-color:black;padding:3px;margin:2px;">Etiket 2</span>
    <span style="font-family:Arial;font-size:10px;
        color:white;background-color:black;padding:3px;margin:2px;">Etiket 3</span>
</div>

Görünüm aşağıdaki gibi olacaktır.

CSS özellikleri web sayfasındaki nesnelere çok sayıda stil verebilmeyi sağlar. Bazı özellikler şu şekilde listelenebilir.

Boyutlar ve Konumlarla Alakalı Özellikler

• width özelliği genişliği belirler.
• height özelliği yüksekliği belirler.
• position özelliği konum türünü belirler.
• Konum özellikleri için left, right, top, bottom özellikleri kullanılır. Ancak bu özelliklerin geçerli olması için position değeri absoulte, fixed veya relative olmalıdır.
• left özelliği sola uzaklığı belirler.
• right özelliği sağa uzaklığı belirler.
• top özelliği üste uzaklığı belirler.
• bottom özelliği alta uzaklığı belirler.
• float özelliği kendisinden sonraki nesnelerin konumlarını belirler. Mesela float:left şeklinde değer vererek sonraki öğeleri alt satıra değil de sağa doğru dizebilirsiniz. Verildiği nesneyi de sola yaslayacaktır. float:right ise sağa yaslayacaktır.

Renkler ve Çerçeveler

• color yazı rengini değiştirir.
• background-color arka plan rengini değiştirir.
• border-color çerçeve rengini değiştirir.
• Konum özellikleri için left, right, top, bottom özellikleri kullanılır. Ancak bu özelliklerin geçerli olması için position değeri absoulte, fixed veya relative olmalıdır.
• border:1px solid blue şeklinde 1 piksel kalınlığında düz ve mavi renkli bir çerçeve oluşturursunuz.