HTML Dosyasına CSS Ekleme Yolları

Gold

Mahmut Esat Ayancık

ABONE OL

News

0 yorum

4,304 okunma

Okunuyor HTML Dosyasına CSS Ekleme Yolları

Bir web tarayıcısı açıldığı zaman öncelikle css stillerini okur ve Html elementinin özelliklerine göre şekil vermeye başlar siteye.

Bir web sayfasına üç şekilde stil ekleyebiliyoruz:

•HTML elementinin içerisinde CSS stili belirtmek.

•HTML sayfası içinde CSS stili yazmak

•CSS dosyası üzerinden stilleri çağırmak

İçindekiler

1. HTML elementinin içerisinde CSS stili belirtmek

Bazı durumlarda style elementi yada ayrı bir stil dosyası kullanmak yerine pratik olması açısından her elemente style=”” kodunu vererek CSS stilimizi oluşturabiliriz.Bunu yapmak bize pratiklilik ve hız kazandırır.Size kullanımını kısaca gösterirsek şu şekilde kullanılır;

<p1 style="font-family: Tahoma; color: blue; font-size: 18px;">
Bu yazımız 18 piksel, mavi renkte ve Tahoma yazı fontu ile yazıldı.
</p1>

2.HTML sayfası içinde CSS stili yazmak

HTML sayfamızda Head taglarının arasında style elementini kullanarakta stil oluşturabiliriz.Bu da pratik bir yoldur.Kullanımını aşağıda ki örneği inceleyerek görelim;

<html>
<head>
<title>Sayfa Başlığı</title>
<style type="text/css">
body { background-color:blue; color:red; }
p { font-family: Tahoma, Verdana; font-size: 18px; }
</style>
</head>
<body>
<p>Bu yazımız 18 piksel boyutunda ve arka plan rengi kırmızı yazı rengi ise mavi olarak Tahoma yazı fontu ile yazıldı.</p>
</body>
</html>

3.CSS dosyası üzerinden stilleri çağırmak

İlk olarak bir yazı editörüne normal HTML kodlarımızı oluşturuyoruz.Daha sonra <head> </head> taglarımızın arasına şu kodu yazıyoruz;

<link href="css_dosyamizin_adi.css" type="text/css" rel="stylesheet"/>

Href taglarının arasına belirttiğimiz gibi css dosyamızın adını giricez ve dosya adını girmeden önce şunuda unutmayın HTML dosyamız ile CSS dosyamız aynı klasör içerisinde bulunması gerekir.Eğer ki CSS dosyamızı farklı bir klasör içerisinde kullanacaksak onunda yolunu belirtmemiz gerekiyor.Kodları doğru belirttiysek HTML sayfamız ile CSS sayfamız bağlanmıştır demektir.Genel olarak HTML dosyamıza CSS ekleme yolları bunlar.

Bir önceki yazımızda ise size kısaca CSS’ de ID ve Class kullanımını anlatmıştık o yazımıza ise buradan ulaşabilirsiniz.

Bugün sizlere HTML sayfasına CSS ekleme yollarını kısaca anlatmaya çalıştık, elimizden geldiğince bilgi vermeye çalıştık sürçü lisan ettiysek affola diyerek cümlemize son noktayı koyuyoruz.