CSS Kullanım Şekilleri
CSS'i kullanmanın üç farklı yolu vardır.
- HTML etiketinin içinde kullanmak. (inline style sheet)
- HTML dosyasında "head" etiketleri içinde kullanmak. (internal style sheet)
- Ayrı bir CSS dosyası oluşturup HTML dosyasına dahil etmek. (external style sheet)
1. HTML etiketinin içinde kullanmak. (inline style sheet)
Bu yöntemde biçimlendirmek istediğimiz HTML etiketinin içine CSS özellikleri yazılır. Açılış etiketinde "style" özelliği içinde tanımlanır.
2. HTML dosyasında "head" etiketleri içinde kullanmak. (internal style sheet)
Bu yöntemde CSS kodları "head" etiketi içerisinde kullanılır. Bu sefer "style" etiketi içeresinde kullanılarak biçimlendirme yapılır.
Burada genişliği ve yüksekliği 100px olan bir alan oluşturduk ve arkaplan rengini mavi yaptık. Kullanmak istediğimiz elemanın adını yazıp süslü parantezler arasında istediğimiz özellikleri kullanabiliriz.
Son olarakta tarayıcıda görüntüleğimiz belgemiz bu şekilde gözükecek.
3. Ayrı bir CSS dosyası oluşturup HTML dosyasına dahil etmek. (external style sheet)
Bu kullanım şeklinde artık iki farklı dosyada çalışacağız. Projemize ayrı bir CSS dosyası ekleyip sonra o dosyayı HTML dosyasına dahil edeceğiz. Şimdi aşağıdaki fotoğrafları inceleyelim.
Burada "link" etiketi kullanarak CSS dosyasını HTML dokümanına dahil ettik. "href" özelliği içerisinde CSS dosyasının adını belirmemiz gerekir.
Burada da CSS dosyasında elementimizi biçimlendirdik ve tarayıcıda görüntüledik.