CSS nedir, ne işe yarar ve nasıl kullanılır? En çok kullanılan CSS kodları ve örnekleri

Ömer Yüksel
6 Ekim 2021
E-posta Hosting Kampanya

“Cascading Style Sheets” yani Türkçesi “Basamaklanmış Stil Katmanları” olan CSS, HTML ile yazdığımız metin ve görüntü gibi kodların daha güzel ve renkli görünmesini sağlayan bir işaretleme dilidir. CSS, HTML ve JavaScript ile birlikte kullanıldığı zaman ortaya daha üst düzey web sayfaları ortaya çıkarabilirsiniz.

CSS İle Neler Yapılabilir?

Sadece HTML ile kod yazıldığında pek bir anlam ifade etmez, işin içine CSS’ide dahil ettiğiniz zaman daha renkli ve canlı web sayfaları ortaya çıkarabilirsiniz. CSS ile yapabileceğiniz bazı şeyler;

  • Yazı rengi, büyüklüğü ve genişliği
  • Nesneleri hizalama
  • Link Özellikleri
  • Biçimlendirme
  • Liste özellikleri vb.

CSS Nasıl Yazılır?

CSS kodları HTML kodlarını daha güzel görünmesini sağlamak için yazılır, yani CSS yazmak için HTML bilmenizde fayda vardır. CSS kodlarını “style” etiketinin içine yazarsınız. CSS kodlarını yazmak için 3 yöntem vardır.

Inline CSS : CSS kodlarını sadece tek bir HTML etiketine eklememize yarayan biçimdir.

Internal CSS :Internal CSS kodlarını yazdığınız sayfanın en üst kısmına <head></head> etiketleri arasına yazılır.

External CSS : Birden fazla HTML koduna CSS yazacaksanız .css uzantılı başka bir CSS dosyası oluşturup kodlarınızı buraya tanımlamanız gerekir.

CSS Kodları Ve Örnekleri

font-family : Yazı tipini değiştirir.

p { font-family: “Times New Roman”, Times, serif; }

font-size : Yazı boyutunu değiştirir.

p { font-size: 15px; }

font-style : Yazı stilini değiştirir.

p { font-style: italic; }

color : Yazı rengini değiştirir.

p { color: blue; }

background-color : Arka planın rengini değiştirir.

p { background-color: red; }

width : genişlik belirlemek için kullanılır.

p { width: 50px; border: 1px solid gray; }

height : Yükseklik belirlemek için kullanılır.

p { height: 50px; border: 1px solid gray; }

border : Kenarlık ayarlamak için kullanılır.

p { border: 5px solid red; }

padding : Kenarlık ayarlamak için kullanılır.

p { padding: 40px; }

margin : Nesnelerin birbirine olan uzaklıklarını belirlemek için kullanılır.

p { margin: 40px; }

text-align: Nesneleri konumlandırmak için kullanılır.

p { text-align: center; } p { text-align: left; } p { text-align: right; }

position : Konumlandırma yöntemini belirtmek için kullanılır.

p { position: absolute; left: 100px; top: 150px; }

text-decoration;none : Alt çizgiyi kaldırır.

p { text-decoration: none; }

text-decoration-color : Metin dekorasyonunun renginin değiştirmek için kullanılır.

p { text-decoration-color: red; }

letter spacing : Harf aralıklarını belirtmek için kullanılır.

p{ letter-spacing: 5px; }

word spacing : Kelimeler arasındaki boşluğu belirler.

p{ word-spacing: 30px; }

line height : Satır yüksekliğini belirtmek için kullanılır.

p{ line-height: 80%; }