HTML CSS
CSS ile yapabilecekleriniz!
ile
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: 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:
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
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
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ü:
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
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.
CSS padding özelliği ise kenarlığın içindeki boşluk aralığını tanımlar:
CSS margin özelliği de kenarlığın dışındaki boşluk aralığını tanımlar:
|
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:
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:
class Özelliği
Özel bir öğe sınıfına veya türüne stil atamak isterseniz, öğeye bir class özelliği eklemelisiniz:
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:
|
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
Yorum Gönder