Css Boyut

Css dilinde html ögelerinin boyutunu ayarlamamız gerekebilir. Bu boyutları ayarlamak için en sık kullanılan iki özellik bulunmaktadır. Bunlar:

• Width : Genişlik
• Height: Yükseklik 

Html dilinde temel ögeleri kullanmayı öğrendik. Şimdi css ile birlikte <div> etiketinin nasıl kullanıldığını detaylı bir şekilde anlatacağız.

Div'ler css ile kullanılan önemli bir etikettir. 

Div Kullanımı :

<div>

İçerik

</div>

Css Width Özelliği

Css width özelliği sayfada kullanılan html ögelerinin genişliğini belirlemek için kullanılmaktadır.

Css Width Genişlik Özelliği Kullanımı:

<style type="text/css">

.genislik{

width:500px;
background-color:red;

}

</style>

<div class="genislik"> AZKOD GENİŞLİK </div>

Kodu Çalıştır

Css Height Özelliği

Css height özelliği sayfada kullanılan html ögelerinin yüksekliğini belirlemek için kullanılmaktadır.

Css Height Yükseklik Özelliği Kullanımı:

<style type="text/css">

.yukseklik{

height:350px;
background-color:purple;

}

</style>

<div class="yukseklik"> AZKOD YÜKSEKLİK </div>

Kodu Çalıştır

Css ile Yükseklik ve Genişlik Özelliği Birlikte Kullanımı

<style type="text/css">

.boyut{

width:250px;
height:350px;
background-color:purple;

}

</style>

<div class="boyut"> AZKOD YÜKSEKLİK ve GENİŞLİK ÖZELLİĞİ BİRLİKTE KULLANIMI </div>

Kodu Çalıştır

Css ile Div Kullanarak Kare Yapma

<style type="text/css">

.kare{

width:50px;
height:50px;
background-color:gray;


}

</style>

<div class="kare"> KARE </div>

Kodu Çalıştır