HTML ile web tasarımlarında default olarak bulunan başlıklar (h1) aşırı büyük biçimsiz olabilir. Tasarımımıza uyarlamak için bu başlıklar üzerinde belirli stil değişiklikleri yapabiliriz. Bunu html’de style tag’i arasına yapabilceğimiz gibi ayrı css kodları olarak da ekleyebiliriz. Basit bir örnek ile devam edelim;
H1 Yazı Fontu , Büyüklüğü ve Rengi Değiştirme Örneği
H1 Başlığı Nasıl Oluşturulur ?
<h1>Başlık Metni Buraya Gelecek</h1>
Önizleme
Başlık Metni Buraya Gelecek
Yazının boyutunu ve rengini değiştirmek için gerekli css kodlarımızı <style> tagleri arasına ekleyelim.
<style> h1 { font-size:16px; color: #dddddd; } </style>
Not: <h1> gibi html kodları her zaman <body> içerisinde bulunur. <style> içerisindeki css kodları ise <head> içerisinde bulunur.
Önizleme:
Başlık metni buraya Gelecek
Göründüğü gibi metin gri oldu ve fontu küçüldü. Ancak başlık ve başlık 1 özelliğini kaybetmedi.
Şimdi de yazı fontunu değiştirelim. Yazı fontunu değiştirmek için desteklenen fontlardan birine karar vermemiz gerekmektedir. Veya google fonts üzerinden seçtiğimiz kodun css kısmını head kodları arasına yazarak başlığımızda tanımlayabiliriz.
<head> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <!--- Head Tagleri arasına yapıştırılacak --> <style> h1 { font-family: 'Roboto', sans-serif; font-size:16px; color: #dddddd; } </style> </head>