Ders_15 HTML ve CSS

HTML Elemanlarına CSS Uygulama

CSS; html elemanlarını, pratik bir şekilde biçimlendirmek, süslemek, onlara bir stil kazandırmak, makyaj yapmak için geliştirilmiş bir dildir.

CSS; Cascading Style Sheets (basamaklı biçim sayfaları) demektir.

Ders_10'da html elemanlarına stil vermekten kısaca bahsetmiştik.

Bir html dökümanındaki elemanlara stil vermek için tercih edebileceğimiz üç yol vardır:

Satıriçi (inline) stillendirme: Ders_10 da bahsedildiği gibi, başlama tagına style özelliği eklerek yapabiliriz.
Dahili (internal) stillendirme: Html dökümanının <head> kısmına bir <style> elemanı ekleyerek yapabiliriz.
Harici (external) stillendirme: Ayrı bir CSS dosyası oluşturarak yapabiliriz.

En çok önerilen yöntem, ayrı bir CSS dosyası oluşturup, sayfalarımıza ait stilleri, bu dosyayı çağırarak uygulamaktır. Fakat biz derslerimizde daha çok dahili ve satıriçi stillendirme yollarını kullanacağız. Çünkü bu yol CSS öğretmek ve örnekler verebilmek için daha kolay bir yoldur.

CSS Stil Özelliğinin Kullanım Şekli

Satır içinde yazmıyorsak, CSS stillerinin yazım kalıbı aşağıdaki gibidir:

html_elemanını_seç {
özelliği_belirt:değerini_belirt;
özelliği_belirt:değerini_belirt;
özelliği_belirt:değerini_belirt;
}

Kalıpta görüldüğü gibi, öncelikle, hangi html elemanının stilini değiştireceksek onu ya da onları seçiyoruz. Daha sonra ise, süslü parantez içinde seçtiğimiz elamanların hangi özelliklerinin hangi değerlerde olmasını istiyorsak ilan ediyoruz.

Süslü parantez içinde, renk (color), font (font-family, font-size), arkaplan (background-color) gibi istediğimiz sayıda özelliğe, istediğimiz değeri atayabiliriz. Her özellik ve değeri arasına iki nokta, değer belirttikten sonra da bir noktalı virgül koymayı ihmal etmemeliyiz.

Satır İçi Stil Verme (Inline CSS)

Satır içi CSS, tek bir html elemanına özel bir stil vermek istiyorsak kullanabileceğimiz yoldur.

Bu yöntem, html elmanının başlangıç tagından hemen sonra bir style özelliği ekleyerek Ders_10 daki kalıba göre yapılır. Aşağıdaki örneğe dikkat edelim:

<h1 style="color:blue">Bu Mavi Bir Başlıktır</h1>

Yukarıda, bir başlığın font stilinin rengini mavi yaptık.

Dahili Stillendirme (Internal CSS)

Bu yöntem, sayfadaki html elemanlarına topluca bir stil vermek için çok kullanışlı bir yoldur.

Bu yöntemde, CSS stilleri html dökümanının <head> ve </head> tagları arasında ilan edilir.

Bu stiller, <body> elamanı içinde bulunan ve seçilen, bütün alt elemanlara otomatik olarak uygulanır. Aşağıdaki örneğe dikkat edelim:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey
}
h1 {color:blue
}
p {color:green
}
</style>
</head>
<body>
<h1>Bu Bir Başlıktır</h1><p>Bu bir paragraftır.</p>
<h1>Bu Başka Bir Başlıktır</h1>
<p>Bu başka bir paragraftır.</p>
</body>
</html>

Yukarıdaki örnekte <style> ve </style> tagları arasında CSS kodlanmıştır.

Bu kodlar sırasıyla body h1 ve p elemanlarını seçmiş ve bu elemanlara stil vermiştir. Buna göre; body elemanının arkaplan renginin açık gri olacağı, bütün h1 elemanlarının mavi yazı renginde olacağı, bütün p elemanlarının yazı renginin de yeşil olacağı ilan edilmiştir.

Bu dökümanda kaç tane h1 başlığı ve paragraf olursa olsun bu CSS kodları hepsine uygulanacaktır.

Harici Stillendirme (External CSS)

İnternet sitemiz, büyük olasılıkla bir çok sayfadan ibaret olacaktır. Bu durumda, her bir sayfanın html elemanlarını teker teker stillendirmek, oldukça zaman alıcı ve kafa karışıtırıcı olacaktır.

Harici stillendirme ile; ayrı bir CSS dosyası oluşturulur ve sitemizdeki html elemanlarına ait CSS kodları bu dosyaya yazılır. Daha sonra html dökümanımızda, bu sayfayı sadece çağırarak, CSS kodlarını html sayfamıza uygulamış oluruz.

Aşağıdaki örneğe dikkat edelim:

Html editörü ile bir dosya açıp, içerisine şu kodları yazalım:

h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p {
    color:red;
    font-family:courier;
    font-size:160%;
}

Daha sonra bu dosyayı, benimStilim.css örneğinde olduğu gibi css uzantısı ile kaydedelim. Kaydettiğimiz yer de bilgisayarımızda, html sayfamızın bulunduğu yer olsun.

Html dökümanında <head> ve </head> tagları arasına şöyle bir link elemanı eklediğimizde:

CSS dosyamızı html dökümanımıza çağırmış oluruz. Bu yüzden de, otomatik olarak, html dökümanımızdaki bütün h1 ve p elemanları CSS dosyamızdaki stillere sahip olacaktır.

Sayfalarımızın stillerinde bir değişiklik yapmak istediğimizde, teker teker bütün sayfalarda değil de, sadece CSS dosyamızda değişiklik yapmak, bu CSS dosyasının çağırıldığı bütün html sayfalarımıza otomatik olarak yansıyacaktır. Böylece tek bir merkezden, html sayfalarımızın stillerini kontrol etmek mümkün olackatır.

CSS Font Stilleri

CSS color özelliği, bir html elemanının yazı rengini belirler.

CSS font-family özelliği, bir html elemanının yazı tipini belirler.

CSS font-size özelliği, bir html elemanının yazı büyüklüğünü belirler.

Aşağıdaki örneğe dikkat edelim:

p {
    color:red;
    font-family:courier;
    font-size:160%;
}

Yukarıdaki örnek, paragraf elemanlarının, yazı rengini kırmızı, yazı tipini courier, yazı büyüklüğünü ise varsayılanın %160'ı kadar ayarlar.

CSS Kenarlık-Çerçeve (border) Modelleri

Her html elemanı, bir çerçeve içindedir. Fakat bu çerçevelerin kenarlıkları (border) vasrayılan olarak görünmemektedir. CSS, bu kenarlıkları, istediğimiz stilde ayarlamamızı sağlar. Aşağıdaki örneğe dikkat edelim:

p {
border:1px solid black;
}

Bu örnek, html sayfasındaki paragrafların çerçevesini şekillendirir. Buna göre, paragraf çerçeveleri 1px kalınlığında, düz çizgi halinde (solid) ve siyah (black) renkte olacak şekilde ayarlanmıştır.

Uyarı: CSS ile sayısal bir değer yazarken bu sayının birimini belirtmek gerekir. Bu birim pixel ise px şeklinde, yüzde ise % şeklinde belirtilir.

CSS padding özelliği, html elmanının içindeki yazıların, resimlerin... çerçeveye olan uzaklığını belirler. Yani içerik ile çerçeve arasında bir boşluk oluşmasını sağlar. Aşağıdaki örneğe dikkat edelim:

p {
    border:1px solid black;
    padding:10px;
}

Bu örnekte, paragraf çerçevelerinin 1px kalınlığında, düz çizgi halinde (solid) ve siyah (black) renkte olacağı ilan edilmiştir. Bunun yanında, paragraftaki metinler, paragraf çerçevesine en fazla 10 pixel (10px) yaklaşabilecektir.

CSS margin özelliği, bir html elemanı ile ona komşu olan html elemanları arasında ne kadar boşluk olacağını belirler. Aşağıdaki örneği inceleyelim:

p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}

Bu CSS kodu, paragraflar ile çevrelerindeki html elemanları arasında 30px boşluk oluşmasını sağlar.

Id Özelliği

Yukarıdaki bütün örnekler, sayfamızdaki bütün p (paragraf) elemanlarını veya bütün h1 (başlık) elemanlarını kapsayacak şekildedir.

Mesela, bütün paragrafların değil de bazılarının farklı stillerde olmasını istersek ne yapmamız gerekir?

İşte böyle durumlarda, html elmanlarımıza tanıtıcı bir kimlik (id) özelliği eklemek işimizi görecektir. Aşağıdaki örneğe dikkat edelim:

<p id="paragraf1">bu bir paragraftır.</p>

Yurkarıda, kimliği paragraf1 olan bir paragraf elemanı oluşturduk. CSS'de bu elemanı seçmek için:

tag#id

kalıbını kullanıyoruz. Yani, html elemanının tagı ile id'sini, aralarına bir diyez (#) işareti koyarak yazmamız bu elemanı seçmek için yeterli olacaktır.

p#paragraf1 {
color:blue;
}

Yukarıdaki CSS kodu, sadece id'si paragraf1 olan paragraf elemanını seçmiştir, bu yüzden bu koddan sadece kimliği (id) paragraf1 olan paragraf elemanı etkilenecektir. Yani, sadece bir eleman etkilenecektir.

CSS Class Özelliği

CSS class özelliği; belli stil kodlarından oluşmuş bir sınıf oluşturup, bu sınıfı istediğimiz elemanda kullanmamızı sağlar. Aşağıdaki örneğe dikkat edelim:

<p class="sinif">bu bir paragraftır</p>

Yukarıda class'ı sinif olan bir paragraf elemanı oluşturulmuştur. Aşağıdaki örneğe dikkat edelim:

p.sinif {
color:red;
}

Yukarıda, html sayfamızda bulunan ve class adı sinif olan paragraf elemanları seçilmiş ve stil verilmiştir.

Class adına göre seçim yaparken diyez değil de nokta ayracını kullandığımıza dikkat edelim.

CSS kuralları hakkında, daha detaylı bilgi için CSS, derslerimizi takip etmenizi öneririz.

sonraki ders için tıklayınız

DERSİMİZ KOD - HTML