Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

HTML CSS


CSS ile yapabilecekleriniz!

CSS

ile

Yazıları | RENKLERİ
Kutuları Manipüle edin!

HTML'e CSS ile Stil Atama

CSS (Cascading Style Sheets) Basamaklı Stil Sayfaları anlamına gelir.

HTML öğelerine stil atama işlemi 3 yolla yapılabilir.

  • Satıriçi CSS (inline) - HTML etiketleri içerisinde style özelliği kullanarak
  • Belgeiçi CSS (internal) - HTML belgesinin <head> kısmında <style> öğesini kullanarak
  • Harici CSS (external) - Dış bir kaynaktan çekilen Harici CSS dosyaları kullanarak

Stil atamada kullanılan en yaygın yöntem stilleri harici kaynaklı CSS dosyalarında tutmaktır. Biz ise örneklerimizde hem sunumu kolay olduğu için hem de sizin örnekleri kolayca deneyebilmeniz ve isteğinize göre değişiklikler uygulayabilmeniz için Belgeiçi Stilleri kullanıyoruz.

Not Not: CSS ile ilgili daha fazla bilgi ve örneği CSS Dersleri sayfamızda bulabilirsiniz

Satıriçi Stil Atama (Inline CSS)

Satıriçi stil atama tek bir HTML öğesine stil vermek için kullanılır.

Satıriçi stil biçimlendirmede style özelliği kullanılır.

Aşağıdaki örnekte <p> öğesinin yazı rengini kırmızıya dönüştürüyoruz:

Satıriçi Stil Atama Örnek


<p style="color:red;">Bu kırmızı renkle yazılmış bir paragraftır.</p>

Belgeiçi Stil Atama (Internal CSS)

Belgeiçi stiller her bir HTML sayfası için ayrı bir stili tanımlar.

Belgeiçi stiller, HTML belgesinin <head> bölümünde <style> öğesi içinde verilir.

Belgeiçi stil atama örnek


<!DOCTYPE html> <html> <head> <style> body {background-color:red;} h1 {color:green;} p {color:blue;} </style> </head> <body> <h1>Başlık</h1> <p>Paragraf......</p> </body> </html>

Harici Stil Sayfaları Oluşturma (External CSS)

Harici stil dosyaları bir çok sayfa için stil tanımlar. Harici stil sayfasıyla bir web sitesinin görünümünü sadece tek bir dosyayı değiştirerek değiştirebilirsiniz.

Harici stil sayfalarını kullanabilmeniz için .css uzantılı sayfa stil şablonu dosyanızı belgeye bir link ile çağırırsınız. Websitenizin barındırma alanı (hosting) veya başka bir barındırma alanından çağıracağınız stil sayfanızı, HTML belgesinin <head> kısmına bir link vererek ekleyebilirsiniz:

Harici Stil Sayfası Örnek


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="googledrive.css"/> </head> <body> <h1>Bu başlık link verilmiş harici bir stil dosyasıyla biçimlendirildi.</h1> <p>Bu paragraf ve sayfa arka planı da aynı şekilde biçimlendirildi.</p> </body> </html>

Harici kaynaklı stil sayfaları herhangi bir metin düzenleme programıyla yazılabilir. Yazılan dosya içerisinde HTML etiketleri yer almaz ve stil dosyanızı kaydederken kullanmanız gereken dosya uzantısı .css olmalıdır.

Örnekteki "googledrive.css" stil dosyasının görünümü:

body { background-color: yellow; } h1 { font-family: "Comic Sans MS", cursive, sans-serif; color: #0000CD; } p { font-family: Impact, Charcoal, sans-serif; color: #DC143C; }

CSS Fontlar

CSS color özelliği HTML öğesi için kullanılacak yazı rengini tanımlar.

CSS font-family özelliği HTML öğesi için kullanılacak yazı stilini tanımlar.

CSS font-size özelliği HTML öğesi için kullanılacak yazı boyutunu tanımlar.

Örnek


<!DOCTYPE html> <html> <head> <style> h1 { color: green; font-family: arial; font-size: 320%; } p { color: blue; font-family: tahoma; font-size: 150%; } </style> </head> <body> <h1>CSS Font Özellikleri</h1> <p>CSS <b>color</b> özelliği HTML öğesi için kullanılacak yazı rengini tanımlar.</p> <p>CSS <b>font-family</b> özelliği HTML öğesi için kullanılacak yazı stilini tanımlar.</p> <p>CSS <b>font-size</b> özelliği HTML öğesi için kullanılacak yazı boyutunu tanımlar.</p> </body> </html>

CSS Kutu Modeli

Göremeseniz de her bir HTML öğesinin çevresinde bir kutu vardır.

CSS border özelliği HTML öğesinin çevresinde görünür bir kutuyu tanımlar.

Örnek


p { border: 2px solid red; }

CSS padding özelliği ise kenarlığın içindeki boşluk aralığını tanımlar:

Örnek


p { border: 2px solid red; padding: 15px; }

CSS margin özelliği de kenarlığın dışındaki boşluk aralığını tanımlar:

Örnek


p { border: 2px solid red; padding: 15px; margin: 40px; }
Not CSS örneklerinde gördüğünüz px değeri, boyutların piksel birimi ile tanımlandığını ifade eder.

id Özelliği

Yukarıdaki örneklerin tamamında HTML öğelerinin CSS'i genel olarak biçimlendirdi.

Özel olarak tek bir öğe için özel bir stil atamak isterseniz, öncelikle o öğeye bir id özelliği eklemelisiniz:

<p id="farkli">Bu diğerlerinden farklı bir paragraf....</p>

Daha sonra id özelliği eklediğiniz öğe için farklı bir stil düzenleyin. Buradaki örneğimizde farklı stil atayacağımız paragraf için farkli adıyla bir id özelliği belirledik.

Şimdi farkli adında id tanımladığımız paragrafımız için CSS özelliği belirleyelim:

Örnek


p#farkli { color: red; }

class Özelliği

Özel bir öğe sınıfına veya türüne stil atamak isterseniz, öğeye bir class özelliği eklemelisiniz:

<p class="uyari">Bu diğerlerinden farklı bir paragraf....</p>

Daha sonra class özelliği eklediğiniz öğe için farklı bir stil düzenleyin. Bu örnekte de farklı stil atayacağımız paragraf için uyari adıyla bir class özelliği belirledik.

Şimdi uyari adında class tanımladığımız paragrafımız için CSS özelliği belirleyelim:

Örnek


p.uyari { color: blue; }
Not Not: id özelliğini tek bir öğe için, class özelliğini ise grup öğeler için kullanın.

HTML CSS Konu Özeti

  • Satıriçi stiller (Inline CSS) atamak için HTML style özelliğini kullanın.
  • Belgeiçi stiller (Internal CSS) atamak için HTML <style> etiketini kullanın.
  • Harici stil dosyasına (External CSS) link vermek için <link> etiketini kullanın.
  • <style> ve <link> öğelerini HTML <head> öğesi içinde kullanın.
  • Yazı renkleri için CSS color özelliğini kullanın.
  • Yazı stilleri için CSS font-family özelliğini kullanın.
  • Yazı boyutu için CSS font-size özelliğini kullanın.
  • Görünür öğe kenarlıkları için CSS border özelliğini kullanın.
  • Kenarlık içindeki boşluk aralığı için CSS padding özelliğini kullanın.
  • Kenarlık dışındaki boşluk aralığı için CSS margin özelliğini kullanın.

HTML Stil Etiketleri

Etiket Tanım
<link> Belge ve harici kaynak arasındaki bir bağlantıyı (linki) tanımlar.
<style> HTML belgesinin stil bilgisini tanımlar.

Yorumlar