H1

Heading Başlıklarını CSS ile Şekillendirme (H1 Örnek – Yazı Fontu , Boyutu , Rengi)

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>

 

 

3.7 3 votes
Article Rating
Subscribe
Bildir
guest
1 Yorum
Eskiler
En Yeniler Beğenilenler
Inline Feedbacks
View all comments
trackback
4 ay önce

[…] H Başlıklarının CSS ile Şekillendirilmesi İsimli Örneği CSS Konusunu Öğrendikten Sonra İn… […]