HTML – CSS Birleştirmek

CSS dosyası, sitenizin görsel şeması demektir. CSS dosyası sayesinde HTML ile tanımladığınız, paragraf, resim vb. özelliklere görsel şekiller verebilir, sayfanıza arka plan görseli veya rengi atayabilir, yazı stillerini değiştirebilirsiniz. Sitenizin makyajını CSS dosyası ile yapabilirsiniz.

492
0
PAYLAŞ
HTML ve CSS Birleştirme
HTML ve CSS dosyalarınızı iki yöntem ile birleştirebilirsiniz.

HTML ve CSS birleştirme işlemi için iki farklı yöntem bulunmaktadır. Bu yöntemler kendi içerisinde ve gerekli kodlar bakımından değişiklik gösterir.

HTML ve CSS Genel Tanımlamalar

Sayfanızın ana hatlarını oluşturan tasarım dosyanıza HTML adı verilir. HTML dosyası ile görünmeyen yönlendirmeler, JS dosyalarının entegresi veya sitenizde yayımlayacağınız içeriğin ana hatları ile kodlama işlemini gerçekleştirebilirsiniz.

CSS dosyası ise, sitenizin görsel şeması demektir. CSS dosyası sayesinde HTML ile tanımladığınız, paragraf, resim vb. özelliklere görsel şekiller verebilir, sayfanıza arka plan görseli veya rengi atayabilir, yazı stillerini değiştirebilirsiniz. Sitenizin makyajını CSS dosyası ile yapabilirsiniz.

HTML ve CSS Birleştirme Yöntemleri

HTML ve CSS dosyalarını birbirlerine entegre etmek için iki adet yöntem bulunmaktadır. Bu yöntemler ayrı ayrı dosyalar veya tek HTML dosyası içerisinde CSS düzenlemeleri olmak üzere farklı amaçlara ve yönlendirmelere hizmet eder.

1. Yöntem

HTML ve CSS birleştirme işlemini gerçekleştirmek için iki yöntemden birincisi, ayrı bir CSS dosyasını HTML dosyanız içerisine entegre etme işlemi olarak adlandırılır. Örnek verecek olursak, oluşturduğunuz “main.css” dosyasında “index.html” dosyanız ile ilgili görsel düzenlemeleri yapacaksınız. Bu düzenlemeleri index.html dosyanızda görebilmeniz için, oluşturduğunuz main.css dosyasını html dosyanıza entegre etmek zorundasınız. Bu yöntem için izleyeceğiniz yol şu şekilde olmalıdır.

Oluşturduğunuz HTML çatı kodları içerisindeki head etiketi içerisine aşağıdaki kodu ekleyiniz. HTML çatı kodları ile ilgili detaylı bilgi için HTML Çatı Kodları başlıklı yazımızı inceleyebilirsiniz.

HTML ve CSS birleştirme
Harici CSS dosyanızı HTML dosyanıza görseldeki kod ile entegre edebilirsiniz.

Görseli görüntüleyemeyenler için HTML dosyanızdaki head etiketi içerisine ekleyeceğiniz kod;

 <link type="text/css" rel="stylesheet" href="CSS dosyanızın yolu"> 

Link kodu ile, HTML dosyamıza belirtilen URL dosyasını çağırmasını söylüyoruz. Böylece CSS dosyamız HTML kodlarımız için çalışmaya başlıyor.

2. Yöntem

HTML dosyasına CSS entegre etmek için ikinci yöntem ise, harici bir CSS dosyası olmadan HTML sayfanız içerisinde <style> kodu ile entegre bir CSS alanı oluşturmaktır. Bu işlem için style etiketini head etiketi arasına açmanız gerekmektedir. Body etiketi içerisinde açtığınızda CSS özellikleri çalışmayacak ve sitenizde bu kodlar görünecektir.

HTML dosyası içerisinde CSS çalıştırmak için izlemeniz gereken yöntem aşağıdaki görselde ki gibi olmalıdır.

html ve css birleştirme
Harici bir dosya olmadan HTML sayfanızda CSS kodlarınızı çalıştırabilirsiniz.

Görseli görüntülemekte sorun yaşayanlar için HTML dosyanız içerisinde dahili CSS çalıştırmak için head etiketi arasına eklemeniz gereken kod;


<head>
<meta charset="UTF-8">
<title>BilgiKodu.com | Webmaster Bilgi Deposu</title>

<style type="text/css">

/* CSS kodlarınızı bu alanda çalıştırabilirsiniz */

</style>

</head>

HTML tasarımların vazgeçilmezi olan CSS dosyasını projenize nasıl dahil edeceğinizi anlatmaya çalıştık. Umarız yazımız yararlı olmuştur. İyi kodlamalar!

 

E-Posta Aboneliği

E-posta bültenimize abone olarak yeni yazılardan haberdar olabilirsiniz. Web Tasarım, WordPress, SEO ve daha fazlası ile ilgili içerikleri ilk siz öğrenebilirsiniz.

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here