Web Sayfalarına CSS Eklemek

Web tarayıcılar açıldığı zaman stilleri(css dökümanlarını) okur ve ardından o stillerin kullanıldığı HTML elementlerini belirtilen özelliklere göre şekillendirir.

Web sayfalarımıza üç farklı şekilde stil ekleyebiliriz.

 

  • Stiller CSS dosyasından çağrılabilir,
  • HTML sayfası içerisinde CSS yazılabilir,
  • HTML elementi içerisinde stil belirtilir.

  

1. Stilleri CSS Dosyasından Çağırmak

  1. İlk olarak bir not defteri ya da CSS düzenleyici bir editör programı açmalısınız.
  2. CSS kodlarını CSS kod yapısına uygun olarak yazarak kaydedin.

Stil dosyalarını dışarıdan çağırmak için aşağıdaki kod bloğunu

HTML Sayfanızı açıp <head> ile </head> arasına aşağıdaki kod bloğunu tanımlayarak stil dosyanızı projenize dahil edebilirsiniz.

  

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

 

Not: href=”Dosya_ismi” ile belirttiğimiz yerde bizim kaydettiğimiz dosyanın adı yer alır ve HTML sayfası ile CSS dosyası aynı dizin klasörü içinde yer almalıdır. Farklı bir klasörde kullanırsak HTML sayfasına göre yol yazılır. Dosya adını doğru yazdıysak HTML sayfamız bağlanır. CSS dosyamızdaki stil özelliklerini HTML sayfamızda ullanabiliriz.

Dosya adını doğru yazdıysak artık CSS dosyamızı HTML sayfamıza bağladık demektir. Yani CSS dosyamızdaki stilleri rahatlıkla HTML sayfamızda kullanabiliriz.

 

2. HTML Sayfasında CSS Yazma

HTML sayfamızda <head> elementinin altında yer alan <style> elementi kullanarak stiller oluşturabiliriz. Aşağıdaki örneği inceleyelim:

 

  <html>
   <head>
      <title>HTML Sayfa Başlığı</title>
      <style type="text/css">
         body { background-color:green; color:yellow; }
         p { font-family: Calibri, Verdana; font-size: 14px; }
      </style>
   </head>
   <body>
      <p>Bu 14 piksel calibri yazı tipi kullanrak oluşturuldu..</p>
   </body>
   </html>

 

Yukarıdaki örnekte <style type=”text/css”> elementi <head> elementi içerisinde açılıp kapanmış ve içine stiller eklenmiş. Bu yazılan stiller dışarıdan bir dosyaya bağlı olmadığı için direk kullanılabilir olur.

 

3. HTML Elementi İçerisinde Stil Belirlemek

<Style> elementi kullanmadan hızlı çözümler amacı ile kullanılır. Bu tarz durumlarda her elementin style=”” özelliği kullanılabilir. CSS kodlarını <style> özelliği içerisine sıralarız. Aşağıdaki örneği inceleyelim:

 

 <p style="font-family: Calibri; font-size: 14px;">
         Bu yazı 14 piksel Calibri ile yazıldı.   
 </p>

 

  

 Arkadaşlar hem temiz kod yazımı hem de sağlıklı olması açısında biz 1 numaralı yolu kullanmanızı tavsiye ediyoruz. Tabiki seçim sizin 🙂

Lifeacode Ekibi”


Kimler Neler Demiş?

avatar
  Subscribe  
Bildir