CSS veya Cascading Styles Sheets olarak nitelendirilir.CSS, HTML de bir stil yoludur. Html ise içerik bazlıdır. İçeriğe, profosyonel anlamda CSS sayesinde renk verilir.
CSS de html gibi uzun, karışık vb. gibi kodlama durumu da yok. Tamamen sistemli bir şekilde sıralanan özellikler ve değerleri yer alır.
CSS Kodlarının Html İçinde Yer Alması
İlk olarak Css i, Html içerisinde kullanmayı gösterip, sonrasında css i farklı dosya içerisinde ele alacağız.
Misal olarak paragraf ve link renginin değiştirilmesi;
[php]
<pre><p>merhaba</p>
<a href="http://www.bilgirehberi.net" style="text-decoration: none">BilgiRehberi</a>
[/php]
Html içerisine konulması gereken kod budur.
Fakat bu css kodunun ayrı bir dosya içerisinde olmaması sebebiyle html içerisinde bağlantı yapmamız gerekir.
O kod ise şudur;
[php]
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bilgi Rehberi</title>
<style>
p {
color: red;
}
a {
color: green;
}
</style>
</pre>
[/php]
Kod içerisinde iki tane parametre var. Bunlar “a” ve “p”.
A parametresi : Link başlangıcını belirtir. Renk olarak yeşil belirtilmiş.
P parametresi : Paragraf başlangıcını belirtir. Renk olarak kırmızı belirtilmiş.
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bilgi Rehberi</title>
<style>
p {
color: red;
}
a {
color: green;
}
</style>
[/php]
Kod içerisinde iki tane parametre var. Bunlar “a” ve “p”.
A parametresi : Link başlangıcını belirtir. Renk olarak yeşil belirtilmiş.
P parametresi : Paragraf başlangıcını belirtir. Renk olarak kırmızı belirtilmiş.
CSS Kodlarının Ayrı Bir Dosya İçinde Yer Alması
Yukarıdaki örnekler css kodunun html içerisinde yer aldığı durumlardır. Şimdi ise css kodlarını ayrı bir sayfa içerisine yerleştirip, adını style yapalım. Sonra tasarımını yapmış olduğumuz sayfaya, oluşturduğumuz css sayfasını bağlayalım.
Html içerisinde bu bağlantıyı gerçekleştirebilmek için şu koda ihtiyaç duyarız.
[php]
<head>
<title>Bilgi Rehberi</title>
<link rel="stylesheet" href="style.css" />
</head>
[/php]
Bu iki sayfa aynı dosya içerisinde olursa kafanız karışmaz. href=”style.css” dizin yolunu da değiştirebilirsiniz.
Not: Dikkatinizi çektiyse kodlar head tagları arasındadır. Sıralama önemlidir.
ak-tas@msn.com