Görüldüğü gibi bu şekilde birden fazla CSS kuralını peş peşe dizebiliyoruz ve bu şekilde yazdığımız bir kod bütün sayfaya etki ediyor. Yani a{ diye başlayan kural sayfadaki bütün linkleri, p diye başlayan kural da sayfadaki bütün p HTML taglarını etkiliyor.
c) Bir CSS Dosyasından Sayfamıza Çağırmak;
CSS dosyası, uzantısı .css olan dosyadır. Amacı çağrıldığı bütün sayfaların CSS kurallarını taşımaktır. Sayfa içine yerleştirilen CSS kodlarından tek farkı sadece bir sayfaya değil, çağrıldığı bütün sayfalara etki etmesidir. Bir CSS dosyasının içerisinde sadece CSS kuralları bulunur. Örneğin bir CSS dosyasının içeriği;
a{font-color: blue; margin: 5px;}
p{font:12px;}
div{width:100px; height;100%;}
gibi olabilir. CSS dosyası oluşturmak için içine yerleştireceğiniz bütün CSS kurallarını bir not defterine yazıp uzantısını .css olacak şekilde kaydetmeniz yeterlidir.
Tamam, CSS dosyamızı oluşturduk. Peki bu dosyayı nasıl istediğimiz HTML sayfalarına ekleyeceğiz? Onu da HTML sayfamızdaki <head> tagından sonra ekleyeceğimiz <link> koduyla başaracağız. Bu kod;
<link rel="stylesheet" type="text/css" href="http://dosyanın-bulunduğu-adres/stildosyanızınadı.css">
kodudur. Kodu kendinize göre düzenleyip HTML sayfanıza eklediğinizde CSS dosyanızdaki kurallar sayfanıza etki etmeye başlayacaktır.
HTML Kodlarındaki Sınıf(class) ve Kimlik(id)
HTML kodlarındaki sınıflar ve kimlikler CSS kodları için çok güzel seçici'lerdir. Tabi seçicileri HTML içine entegre CSS kurallarında kullanamıyorduk. Bu nedenle seçicileri .css dosyamızda veya sayfa içindeki CSS kodları arasında kullanıyoruz. Neyse. Bir HTML kodu yazayım da başlayalım;
<img src="http://resimlinki/resimismi.jpg" border="0" class="ali1" id="veli2" />
-Bu kodda class="ali1" sınıfını seçici olarak kullanmak istersek, CSS kurallarını yazdığımız bölüme kuralımızı şu şekilde yazacağız;
.ali1 {width:100px; height:100px;}
Görüldüğü gibi sınıflar(class) seçici olarak kullanılırken başına nokta alıyor.
-Eğer üstteki HTML kodundaki id="veli2" kimliğini seçici olarak kullanmak istersek, CSS kuralını şu şekilde oluşturacağız;
#veli2 {width:100px; height:100px;}
Görüldüğü gibi kimlikler(id) seçici olarak kullanılırken başına kare(#) alıyor.
Eğer aynı id ve class'ları başka HTML ögelerine de verirseniz, bu CSS kuralları onları da etkiler. Örneğin veli2 id'sini bir resime(img) de ekleseniz bir bir div'e bir linke(a) de ekleseniz CSS kuralı çalışır. Ama kuralın seçicisini a veya img gibi herhangi bir HTML tagıyla kısıtlarsanız, yani şunun gibi bir biçimde yazarsanız;
img.ali1 {width:100px; height:100px;}
Seçiciyi bu şekilde kısıtlarsak, CSS kuralımız sadece sınıfı(class) ali1 olan resimleri(img) etkileyecektir. Kural seçicisindeki img yerine a yazarsak da sadece sınıfı(class) ali1 olan linkleri(a) etkileyecektir.
-> ÖNEMLİ NOT; Bir kuralın yazılışında kelimeler arası boşlukların hiçbir anlamı yoktur. Örneğin;
a{color:black; font:12pt;}
kuralı ile
a {
color: black;
font: 12pt;
}
kuralı arasında hiçbir fark yoktur.
______________
- Teknik Destek Personeli 
konulur. Sadece tek değer giriliyorsa konulmayabilir ancak değerin sonuna eklemenin de bir sakıncası yoktur. Ayrıca aynı değerleri vereceğimiz iki seçiciyi aralarına virgül koyarak tek seferde tanımlayabiliriz de;
