HTML etiketleri normalde etiketlerin içeriğinin nasıl görüntüleneceğinden sorumlu değildir.
Eski sürüm HTML standartlarında biçimlendirme etiketleri, öznitelikleri de bulunuyordu.
Bu durum zamanla içinden çıkılmaz bir hal aldı. HTML dosyalarının boyutu büyüdü, görsellikle ilgili değişiklikler yapmak eziyet haline geldi.
W3C oluşumu olaya el attı ve HTML ve görünümle ilgili kodları HTML'den çıkarttı ve CSS doğdu.
CSS (Cascading Style Sheets / Basamaklı Stil Şablonları) HTML elementlerinin nasıl görüntüleneceğinden sorumludur.
Örneğin bir yazının rengi, fontu, fontun boyutu, zemin rengi CSS ile kodlanır.
CSS HTML belgelerine 3 farklı yöntem ile eklenir:
style özniteliği kullanılarakBu yöntemler arasında harici CSS dosyası kullanmak en çok kullanılan yöntemdir.
Satır içi CSS kullanımında her elementin kendine CSS kodu yazılır.
Satır içi CSS tanımlandığı element için geçerlidir.
HTML elementine style özniteliği verilerek CSS kodu yazılır.
Aşağıdaki örnekte <h1> içindeki metnin rengi yeşil olarak ayarlanmıştır:
Dahili CSS tanımlandığı sayfa için geçerlidir. Bu sebepten kullanışlıdır, örneğin sayfadaki tüm <h1> elementleri yeşil olsun diyebilirsiniz.
Bir dahili CSS, HTML belgesinde <head> bölümüne, <style> elementi içine tanımlanır.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: #808080;}
h1 {color: #0000ff;}
p {color: #ff0000;}
</style>
</head>
<body>
<h1>Bu bir başlık.</h1>
<p>Bu bir paragraf.</p>
<h1>Bu ikinci başlık.</h1>
<p>Bu ikinci paragraf.</p>
</body>
</html>
Yukarıdaki dahili CSS örneğinde;
Harici CSS kullanımında tüm CSS kodları uzantısı .css olan bir dosyada tutulur.
HTML belgelerinden bu CSS dosyasına link verilir.
Böylelikle tüm HTML dosyaları tek bir CSS dosyası üzerinden kontrol edilebilir.
CSS dosyası üzerine yaptığınız değişiklik tüm HTML dosyalarını etkiler.
Bir HTML sayfasına dilediğiniz kadar CSS dosyası linki ekleyebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/dosyalar/stildosyam.css">
</head>
<body>
<h1>Bu bir başlık.</h1>
<p>Bu bir paragraf.</p>
</body>
</html>
CSS Dosyası herhangi bir editörde oluşturulabilir. Not defterinde dahi oluşturulabilir.
CSS dosyası CSS kodları içerir ve dosya uzantısı .css olmalıdır.
Örnekte link verilen "stildosyam.css" CSS dosyasının içeriği şu şekildedir:
body {
background-color: #808080;
}
h1 {
color: #0000ff;
}
p {
color: #ff0000;
}
CSS color özelliği yazının rengini belirlemek için kullanılır.
CSS font-family özelliği yazı tipini belirlemek için kullanılır.
CSS font-size özelliği yazının boyutunu belirlemek için kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: tahoma;
font-size: 16px;
}
p {
color: red;
font-family: courier;
font-size: 40px;
}
</style>
</head>
<body>
<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>
</body>
</html>
CSS border özelliği ile HTML elementlerinin etrafına sınır çizgisi çekebilirsiniz.
Örnekte;
CSS ile bir HTML elementinin border yani sınır çizgisi ile içeriğin arasındaki boşluğu iç boşluk, padding ile ayarlarız.
Bu örnekte HTML belgesindeki tüm <p> elementlerinin içindeki yazı ile sınır çizgisi arasında 30px boşluk olacaktır.
CSS ile bir HTML elementinin border yani sınır çizgisi ile diğer HTML elementleri arasındaki boşluğu, margin ile ayarlarız.
Bu örnekte HTML belgesindeki tüm <p> elementlerinin sınır çizgisinin dışında 50px boşluk olacaktır.
HTML elementlerinin her birine onu tanımlayan kimlik vermek mümkündür.
Bu kimlik ile o elemente erişip biçimini değiştirebiliriz.
<h2 id="altbaslik">Bu yazının başlığı</h2>
id="altbaslik" olan elemente özel CSS kodu şu şekilde yazılır:
<!DOCTYPE html>
<html>
<head>
<style>
#altbaslik {
color: blue;
}
</style>
</head>
<body>
<h2>Bu bir h2 başlık</h2>
<h2 id="altbaslik">Bu bir h2 başlık</h2>
<h2>Bu bir h2 başlık</h2>
</body>
</html>
Bir grup HTML elementi için CSS kodu yazmak isterseniz o zaman class özelliğini kullanabilirsiniz.
<p class="ozet">Bu bir özettir</p>
Yukarıdaki şekilde class tanımı yaptığınız bir HTML elementine şu şekilde CSS kodu yazabilirsiniz:
<!DOCTYPE html>
<html>
<head>
<style>
.ozet {
color: red;
}
</style>
</head>
<body>
<p>Bu bir paragraf.</p>
<p class="ozet">Bu bir paragraf.</p>
<p>Bu bir paragraf.</p>
<p class="ozet">Bu bir paragraf.</p>
</body>
</html>
Harici CSS dosyaları bir URL üzerinden veya göreceli dosya yolu girilerek HTML dosyasına yerleştirilir.
URL kullanarak CSS dosyası HTML dosyasına şu şekilde bağlanır:
<link rel="stylesheet" href="https://uzmanimakademi.net/stil.css">
Eğer CSS dosyası bir URL üzerinde değil de geçerli web sitesinde bir klasör içindeyse o zaman bağlantı şu şekilde yapılır:
<link rel="stylesheet" href="/css/stil.css">
Bunların kullanımı ile ilgili uygulamalar daha sonraki derslerde gösterilecektir.