Bir web sitesi tasarımı yaparken yalnızca HTML kullanılırsa oldukça sade bir sitemiz olacaktır. Ancak CSS kullanımı ile çok daha kullanışlı, göze hitap eden bir görünüm elde edebiliriz. Bir tanım yapacak olursak : CSS bir HTLM belgesinin stilini tanımlayan dildir.
Temel bir HTML sayfası alalım.
<!DOCTYPE html>
<html>
<body>
<h1>Kodlama Günlükleri'ne hoşgeldiniz :)</h1>
<h1>Divan edebiyarı şiirlerinden örnek :</h1>
<p>
'Derdi aşkı gayrıdan sorma ne bilsin çekmeyen,
Anı yine aşık-ı nalana söylen söylesi.'
(Baki)
</p>
<p>
'Cânı içün kim ki cânânın sever cânın sever,
Cânı kim cânânı içün sevse cânânın sever.'
(Fuzuli)
</p>
</body>
</html>
Bu sayfayı daha güzelleştirmek için CSS kullanalım :
CSS’i kullanmak için selector oluşturmamız gerekmektedir.selector,seçici anlamına gelir. Yani sayfamızdaki herhangi bir etiketi seçmek istersek selector kullanmamız gerekmektedir. Sayfamızdaki etiketler : h1 ve p .
h1 : Başlıkları tanımlama için kullanılır.
p : Paragraf tanımlama için kullanılır.
Şimdi bu iki etikete CSS ekleyelim. Amacımız h1 etiketi içinde yazılanların renk,font,arka plan rengini değiştirmek olsun. style tag’i içinde istediğimiz etiketi yazıp özelliklerini bu şekilde verilir:
<!DOCTYPE html>
<html>
<style>
h1{
font-size:30px;
font-family: Times New Roman;
color: blueviolet;
background-color: cornsilk;
}
</style>
<body>
<h1>Kodlama Günlükleri'ne hoşgeldiniz :)</h1>
<h1>Divan edebiyarı şiirlerinden örnek :</h1>
<p>
'Derdi aşkı gayrıdan sorma ne bilsin çekmeyen,
Anı yine aşık-ı nalana söylen söylesi.'
(Baki)
</p>
<p>
'Cânı içün kim ki cânânın sever cânın sever,
Cânı kim cânânı içün sevse cânânın sever.'
(Fuzuli)
</p>
</body>
</html>
Eğer iki başlığı birbirinden farklı yapmak istersek id vermemiz gerekecek :
<!DOCTYPE html>
<html>
<style>
/*h1{
font-size:30px;
font-family: Times New Roman;
color: blueviolet;
background-color: cornsilk;
}*/
#header1{
font-size:30px;
font-family: Times New Roman;
color:chocolate;
background-color:darkkhaki;
}
#header2{
font-size:20px;
font-family: Arial;
color:darkgreen;
background-color:darkgray;
}
</style>
<body>
<h1 id="header1">Kodlama Günlükleri'ne hoşgeldiniz :)</h1>
<h1 id="header2">Divan edebiyatı şiirlerinden :</h1>
<p>
'Derdi aşkı gayrıdan sorma ne bilsin çekmeyen,
Anı yine aşık-ı nalana söylen söylesi.'
(Baki)
</p>
<p>
'Cânı içün kim ki cânânın sever cânın sever,
Cânı kim cânânı içün sevse cânânın sever.'
(Fuzuli)
</p>
</body>
</html>
Paragraflar için özellik ekleyelim :
<!DOCTYPE html>
<html>
<style>
/*h1{
font-size:30px;
font-family: Times New Roman;
color: blueviolet;
background-color: cornsilk;
}*/
#header1{
font-size:30px;
font-family: Times New Roman;
color:chocolate;
background-color:darkkhaki;
}
#header2{
font-size:20px;
font-family: Arial;
color:darkgreen;
background-color:darkgray;
}
#baki{
font-size:20px;
font-family: Sans-serif;
color:deeppink;
background-color :deepskyblue;
}
#fuzuli{
font-size:20px;
font-family: Sans-serif;
color:darkmagenta;
background-color :bisque;
}
</style>
<body>
<h1 id="header1">Kodlama Günlükleri'ne hoşgeldiniz :)</h1>
<h1 id="header2">Divan edebiyatı şiirlerinden :</h1>
<p id="baki">
'Derdi aşkı gayrıdan sorma ne bilsin çekmeyen,
Anı yine aşık-ı nalana söylen söylesi.'
(Baki)
</p>
<p id ="fuzuli">
'Cânı içün kim ki cânânın sever cânın sever,
Cânı kim cânânı içün sevse cânânın sever.'
(Fuzuli)
</p>
</body>
</html>
CSS özelliklerini ayrı bir dosyada yazabiliriz. Eğer ayrı bir dosyada yazalım. sytle.css dosyası içindekiler :
#header1{
font-size:30px;
font-family: Times New Roman;
color:chocolate;
background-color:darkkhaki;
}
#header2{
font-size:20px;
font-family: Arial;
color:darkgreen;
background-color:darkgray;
}
#baki{
font-size:20px;
font-family: Sans-serif;
color:deeppink;
background-color :deepskyblue;
}
#fuzuli{
font-size:20px;
font-family: Sans-serif;
color:darkmagenta;
background-color :bisque;
}Bu sayfayı kullanmak için link tag’i kullanmamız gerekmektedir. Css doyasının içinde bulunduğu dosya yolu verilmelidir.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./css/style.css">
<body>
<h1 id="header1">Kodlama Günlükleri'ne hoşgeldiniz :)</h1>
<h1 id="header2">Divan edebiyatı şiirlerinden :</h1>
<p id="baki">
'Derdi aşkı gayrıdan sorma ne bilsin çekmeyen,
Anı yine aşık-ı nalana söylen söylesi.'
(Baki)
</p>
<p id ="fuzuli">
'Cânı içün kim ki cânânın sever cânın sever,
Cânı kim cânânı içün sevse cânânın sever.'
(Fuzuli)
</p>
</body>
</html>
Kodlama Günlükleri 