Şimdi arkadaşlar bundan önceki dersimizde bahsettiğim gibi, html tarafından hazır olarak bulunan elementlerden bahsetmiştik. Örneğin body elementi sayfanın genel olarak özelliklerine atayacağımız stilleri içeriyordu. Bunun yanında mesela hr yani horizontal rule elementine de stiller atayabiliriz. Keza a, h1, h2, h3, h4, p gibi elementlere de stiller atamak olası. Bu stilleri atarken css sayfasını yazdığımız esnada direkt yazıp özellikleri süslü parantezler arasına yerleştiriyorduk.
Peki stil tanımlarken her zaman hazır elementler mi kullanacağız. Tabi ki hayır. Şunu bilmeliyiz ki, CSS ile kodladığımız ve geliştirdiğimiz sitelerde mümkün olduğunca table kullanmaktan kaçınmalıyız. Table kullanımı, hem tarayıcının yavaş yorumlamasına yol açmakta, hem farklı tarayıcıların farklı yorumlamaları yüzünden sitelerde kaymalar meydana gelmektedir. Bununla beraber, table sistemi ile, asla divlerle yakaladığımız esnekliği yakalayamayız. Eğer iyi bir tasarımcı olmak istiyorsak, mümkün mertebe CSS’in faydalarından yararlanmalıyız.
Peki bilmeyenler için div ne demek onu anlatalım. Arkadaşlar divler, aslında web sitesinde kullandığımız tabloların hücreleri gibidir. Ancak CSS sayesinde divleri kullanarak,, çok rahat şekilde bağımsız ve esnek bir biçimde web sitesinin mizanpajını yaratabiliriz.
Divler <div> şeklinde açılır ve </div> şeklinde kapatılır. Normal HTML elementlerinde de bu böyledir zaten. peki divlere nasıl stiller verebiliriz. Arkadaşlar önceki derslerde de yazdığım gibi, ben id yerine class kullanılması taraftarıyım. CSS’de classlar, css sayfasında tanımlanır.
Örneğin web sitemizde içerisine banner resmi koyacağımız bir divimizin olacağını varsayalım. Öncelikle stil sayfasında banner isminde bir class tanımlayacağız. Yazım şu şekilde olmalıdır.
Gördüğünüz gibi class tanımlarken, classa vereceğimiz ismi yazarken öncesinde mutlaka bir nokta işareti koyuyoruz yoksa belirtiğimiz class çalışmayacaktır.
Burada yazılan tanımlayıcıları da kısaca açıklayalım:
margin-top:100px; BANNERİN DURACAĞI DİVİN (KULLANDIĞIMIZ İLK DİV OLDUĞU İÇİN) SAYFANIN ÜSTÜNDEN KAÇ PİKSEL UZAKTA OLACAĞINI BELİRLER.
margin-left:100px; BANNERİN DURACAĞI DİVİN (KULLANDIĞIMIZ İLK DİV OLDUĞU İÇİN) SAYFANIN SOLUNDAN KAÇ PİKSEL UZAKTA OLACAĞINI BELİRLER.
width:900px; BANNERİN DURACAĞI DİVİN GENİŞLİĞİNİ BELİRLER
height:300px; BANNERİN DURACAĞI DİVİN YÜKSEKLİĞİNİ BELİRLER
padding:10px; PADDİNG, MARGİNE BENZER, YANİ MESAFE BELİRTİR. AMA MARGİN DİVİN DIŞINDAKİ MESAFEYİ BELİRLERKEN, PADDİNG, DİVİN DIŞ SINIRI İLE DİVİN İÇERİSİNDEKİ YAZILARIN, RESİMLERİN, VB ÖGELERİN ARASINDAKİ MESAFEYİ BELİRLER. LEFT, RİGHT, TOP, BOTTOM DİYE AYRI AYRI STİL VERİLEBİLİR. SADECE PADDİNG YAZMAK, DİVİN 4 KENARINDAN DA EŞİT UZAKLIKTA ÖGELER YERLEŞECEK DEMEKTİR.
lütfen resmi inceleyiniz kavrayacaksınız 
evet diğer dersimizde, belirttiğimiz classları, html sayfalarımızda nasıl çaıracağımızı, divlere nasıl bu classları atamayı öğreneceğiz. Diğer dersimizde banner class’ını tamamen oluşturup, divlerle çalışmaya başlamış olacağız. Görüşmek üzere
BU DERS SİZİN İÇİN FAYDALI OLDUYSA LÜTFEN REKLAMLARA TIKLAYARAK DEVAMLILIĞINA KATKIDA BULUNUNUZ. TEŞEKKÜRLER