Merhaba arkadaşlar! Bilgisayar dünyasına hoş geldiniz. Bugün, HTML'nin büyülü dünyasına birlikte adım atacağız. Hazır mısınız? İşte 16 adımda HTML öğrenimine başlama zamanı!

color

Yazıları renklendirmek için kullanılır. Renk isminin yanı sıra rgb ve hsl gibi renk kodları da mevcuttur.

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

p {
color: red;
}

 

background-color

Web sayfasının veya belirlenen bölgenin arka plan rengini ayarlamak için kullanılır.

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

body {
background-color: gray;
}

 

background-image

Web sayfasının veya belirlenen bölgenin arka planına resim yerleştirmek için kullanılır. Resmin görüntülenememesi ihtimaline karşı genellikle arka plan resmine ek olarak renk de ayarlanır.

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

body {
background: url(image.jpg);
}

 

display

HTML etiketlerinin sayfada yerleştirilmesi ve düzenlenmesi için kullanılır. Aşağıdaki değerleri alabilir:

  • block
  • inline
  • inline-block
  • none

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

li {
display: inline;
}

 

width

Belirtilen HTML ögesinin genişlik değerini ayarlamak için kullanılır.

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

img {

  width: 50%;

}

 

height

Belirtilen HTML ögesinin yükseklik değerini ayarlamak için kullanılır.

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

img {

  height: 50%;

}

 

min-width

Belirtilen HTML ögesine minimum genişlik değeri atamak için kullanılır.

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

img {

    min-width: 30%;

}

 

min-height

Belirtilen HTML ögesine minimum yükseklik değeri atamak için kullanılır.

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

img {

    min-height: 30%;

}

 

max-width

Belirtilen HTML ögesine maksimum genişlik değeri atamak için kullanılır.

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

img {

    max-width: 70%;

}

 

max-height

Belirtilen HTML ögesine maksimum yükseklik değeri atamak için kullanılır.

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

img {

    max-height: 70%;

}

 

margin

Ögelerin border (kenar çizgisi) dışında veya iki öge arasında boşluk oluşturmak için kullanılır. Aşağıdaki değerler ile kenarlara ayrı ayrı boşluklar verebiliriz.

  • margin-top: üst kenar
  • margin-bottom: alt kenar
  • margin-left: sol kenar
  • margin-right: sağ kenar

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

p {

    margin-top: 50px;

    margin-bottom: 100px;

    margin-right: 200px;

    margin-left: 50px;

}

 

padding

Ögelerin içeriğinin, border’a (kenar çizgisi) olan uzaklığını ayarlamak için kullanılır. Margin’de olduğu gibi aşağıdaki değerler ile kenarlara ayrı ayrı uzaklık değeri verebiliriz.

  • padding-top: üstkenar
  • padding-bottom: alt kenar
  • padding-left: sol kenar
  • padding-right: sağ kenar

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

p {

    padding-top: 25px;

    padding-right: 50px;

    padding-bottom: 25px;

    padding-left: 50px;

  }

 

border

Öge içeriklerini sınırlandırmak için kullanılır. Aşağıdaki değerler bu kenarlıkların rengi ve genişliği gibi stil özelliklerini ayarlamak için kullanılır.

  • border-width: genişlik
  • border-color: renk
  • border-style: stil
  • border-radius: yuvarlak köşeler

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

p {

    border-style: solid;

    border-width: 5px;

}

 

font

Aşağıdaki değerler ile yazıların eğim, kalınlık, boyut ve tipi gibi stil özelliklerini belirlememizi sağlar.

  • font-family: yazı tipi
  • font-style: italik/normal yazı ayarı
  • font-weight: yazının kalınlığı
  • font-size: yazı boyutu

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

p {

    font-family: "Times New Roman";

    font-style: normal;

    font-weight: bold;

    font-size: 12px;

}

Ögenin web sayfasındaki konumunu tanımlar. Aşağıdaki değerleri alır:

  • static: Öge, sayfanın normal akışına göre konumlandırılır.
  • relative: Öge göreceli olarak (diğer elementlerden ayrı bir akışta) konumlandırılır.
  • absolute: Öge, varsa kendisini kapsayan bir üst ögeye göre konumlandırılır.
  • fixed: Öge, pencerede sabit bir yere konumlandırılır. Sayfa aşağı kaydırılsa dahi hareket etmez.
  • sticky: Öge, kaydırma konumuna bağlı olarak göreceli ve sabit arasında geçiş yapar.

İstenilen değer atandıktan sonra aşağıdaki örnekteki gibi yerleşim değerleri atanır.

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

p  {

      position: fixed;

      top: 30px;

      right: 5px;

   }