Handan Erdağ Bilişim Sektöründe Bir Kadın
CSS yani Cascading Style Sheets web sitenize ait tüm stillerinin oluşturulan tek bir css dosyası ile tanımlanmasıdır. CSS tanımlaması yaparak az zamanda az çaba harcayarak pek çok değişiklik yapabilirsiniz. Css ile sayfalarımızda kullanacağımız font, renk, font boyutu, arkaplan düzenlemeleri, satır yükseklikleri gibi bir çok farklı düzenlemeyi sadece bir kaç satır Css kodu yazarak düzenleyebiliriz.
CSS dosyalarının uzantısı .css ‘dir. CSS dosyası default olarak style.css olarak web sitelerine eklenir. Web sitenizin back up dosyalarında gördüğünüz style.css ya da .css uzantılı dosyalar web sitenize ait stil şablonlarının kodlandığı alanlardır. Web sitenize css eklemek için illaki ayrı bir css dosyası oluşturmanızı gerek yok. Farklı şekillerde de css kullanabilirsiniz.
Web sitenize css eklemenin yollarından biri de web sitenizdeki anasayfanıza yani index.php, index.html, master.page yada kullandığınız programa göre anasayfanızdaki <head>…. </head> tagları arasında
-<style type=”text/css”>
.style2
{
text-align: left;
}
.style3
{
width: 627px;
}
</style>
şeklinde de css kod tanımlamaları ekliyebilirsiniz. Ya da daha basit bir şekilde gerekli yerlerde css dosyasını eklemeden ya da ayrı bir css stili tanımlamadan html tagının içine css kodunu gömebiliriz. Şöyle ki:
<h1 style=”font-size:25pt; color:red”>Hayata Devam… </h1>
yukarıda oluşturduğumuz <h1> başlık tagının içine ona özel font boyutunu ve rengini ayrı bir css dosyasında tanımlamadan eklemiş olduk. Bu kod ile bu <h1> tagının arasında kalan yazıların fontunu ver rengini belirtmiş olduk. Halbuki css dosyası oluşturup orada <h1> tagının özelliğini bu şekilde belirtseydik web sitemizde kullanılıcak tüm <h1> başlık taglarını 25 font büyüklüğünde ve kırmızı renkte göstericekti. Bu da bize neden css kullanmalıyız sorusunun cevabını veriyor. CSS dosyası oluşturarak ayrı ayrı sayfalar içinde kod tanımlamaları yapmak yerine tek bir dosyada parametleri ile css tanımlaması yapabiliriz. Şöyle ki:
/* Menu */
#menu {
float: left;
width: 640px;
height: 50px;
}
#menu ul {
margin: 0;
padding: 17px 0 0 20px;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
float: left;
}
#menu a {
display: block;
float: left;
margin-right: 5px;
padding: 0px 15px;
text-decoration: none;
font: 14px Georgia, “Times New Roman”, Times, serif;
color: #FFFFFF;
}
#menu a:hover { text-decoration: underline; }
#menu .current_page_item a {
color: #FFFFFF;
}
yukarıdaki menüye ait css kodlarında menünün üzerine geldiğinizde menüye link verdiğinizde ya da tıkladığınızda yapılıcak her işleme ait css kendine ait bir parametre ile tanımlanmıştır.
Oluşturduğunuz css dosyasını web sitenize eklemek için <head>……</head> tagı arasına
<link href=”style.css” rel=”stylesheet” type=”text/css” /> kodunu eklemeniz yeterli olacaktır.
