Temel Seviye

İleri Seviye

CSS Kullanım Şekilleri - How to

3 farklı CSS kullanım şekli vardır.

CSS Harici Stil Kullanımı (External Style Sheet)

Bu kullanım şekli, bizim kullanmamız gereken CSS kullanım şeklidir. İsminden de anlaşılacağı gibi CSS kodlarımız ayrı bir dosyada olacaktır ve biz bu dosyayı <link> etiketi içinde çağıracağız. CSS dosyamızın uzantısı ".css" olmalıdır ve ".css" dosyamızda sadece CSS kodları olmalıdır.

HTML/XHTML dosyamızda CSS 'i nasıl çağırıyoruz görelim...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

   <head>

      <meta http-equiv="content-type" content="text/html; charset=utf-8;" />

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

      <title>Başlık Buraya</title>

   </head>

   <body>

      <p>İçerik Buraya</p>

   </body>

</html>

CSS Dahili Stil Kullanımı (Internal Style Sheet)

Bu kullanım şeklinde CSS kodlarımızı <head> etiketi altında <style> etiketi içine yazacağız.

<style> etiketi içinde nasıl CSS kodu yazıyoruz görelim...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

   <head>

      <meta http-equiv="content-type" content="text/html; charset=utf-8;" />

      <style>

           p {
              color:black;
              text-align:center;
           }       

      </style>

      <title>Başlık Buraya</title>

   </head>

   <body>

      <p>İçerik Buraya</p>

   </body>

</html>

CSS Etiket İçinde Stil Kullanımı (Inline Style)

Bu kullanım şeklinde ise CSS kodlarımızı HTML/XHTML etiketleri içine "style" özniteliği ile birlikte yazacağız.

"style" özniteliği ile nasıl CSS kodu yazıyoruz görelim...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

   <head>

      <meta http-equiv="content-type" content="text/html; charset=utf-8;" />

      <title>Başlık Buraya</title>

   </head>

   <body>

      <p style="color:black; text-align:center;">İçerik Buraya</p>

   </body>

</html>

CSS İpucu - Birden Fazla Kullanım Şekli Kullanılırsa Ne Olur?

Eğer dosyalarımızda 3 kullanım şeklide varsa öncelik " Harici Kullanım " şeklinde (External Style Sheet) olacak ve daha sonra da öncelik " Dahili Kullanım " şeklinde (Internal Style Sheet) olacak. En son öncelikte " Etiket İçinde " ki (Inline Style) kullanım şeklinde olacak. Daha öncede belirttiğimiz gibi biz sadece " Harici Kullanım " şeklini (External Style Sheet) kullanacağız.

© Copyright 2009 - 2010
Sercan Eraslan