CSS Genel Tasarım Yapısı (4. Ders Alan Oluşturma)

Artık Css ile eğleneceğiniz, sinirleneceğiniz, olmuyor diye isyan edeceğiniz kısımlara başladık ama pratiğiniz arttıkça geriye dönüp baktığınızda, “ben bunda mı takıldım” diyeceğiniz dersler bundan sonra başlıyor. Html ve Css ile artık bir web sayfası iskeletini hazırlama zamanımız geldi. Bir web sayfası tasarımı yapmaya başlarken kafanızda nasıl bir site olmasını planlayın, her ne kadar da css ile kodlama yaparken “aaaa böyle daha güzel oldu” deyip, ilk kafanızdaki tasarımdan uzaklaşsanız da daha güzel işler çıkaracaksınız. Görünüş olarak birçok oynama yapabilirsiniz ancak bazı şeyleri kesinleştirmeniz lazım. Logo alanı, menü alanı, yazı alanı, gibi sitenizin belirli iskelet yapısını oluşturmanız gerekmektedir. Resimde Görünen sayfa iskeletini oluşturacağız ve bunun için birkaç html etiketi açıp onları Css ile düzenleyeceğiz lafı fazla uzatmadan sayfa iskeletini oluşturalım.

Sayfamızı ilk olarak sayfa boyutunu ayarlayarak işe başlamalıyız günümüzdeki bilgisayar monitörlerinin 1280p de olduğunu varsayarak sayfamızı 1024p genişliğinde olmasını düşündük ancak Html ve Css de kendinizi geliştirdikten sonra bu boyutlandırmayı pixel tipinde değil %biçiminde yapmanızı öneririm. Html5 ve Css3 derslerine de geçtiğimizde çeşitli boyutlardaki Bilgisayar monitörü, Cep Telefonu Ekranı, Tabletlere, hatta Tv Ekranlarına uyumlu şekilde Web tasarımları yapmaya başlayacağız.

Yukarıda belirttiğimiz gibi 1024px genişliğinde bir çalışma alanı oluşturmak için <div id=”tumalan”> adında çalışma alanımızı kapsayacak bir div açıp bunun içine bundan sonraki alanlarımızı yerleştireceğiz.

#tumalan{
margin:0px auto;
width:1024px;
text-align:center;
}

#tumalan ile <div id=”tumalan”> div alanımızı Css alanımıza tanıttık.

margin:0px auto; Komutumuz ile tumalan divimizi  kapsayan boşlukları sıfırlayıp ortaladık alanımızı.

width:1024px; Komutumuz ile çalışma alanımızın 1024 px genişliğinde olmasını istedik. Boyut olarak bir birim bildirmedik çünkü aşağıya doğru uzayacaktır alanımız.

text-align:center; Komutumuz ile bu alan içinde yazılan bütün yazıların ortalanmasını istedik.

	<div id="tumalan">

		<div id="ustalan">
			<div class="logo">Logo Alanı 200x90</div>
			<div class="reklam">728x90 Reklam Alanı</div>
			<div class="temizle"></div>
		</div>

		<div id="menu">Menü Alanı</div>
		
		<div id="ortaalan">
			<div class="icerik">İçerik  Alanı 750 x min 300
			</div>
			<div class="yanmenu">Yan menü Boyutları 200 x auto
				<div class="yanmenualani">Yan Menü Alanı 1</div>
				<div class="yanmenualani">Yan Menü Alanı 2</div>
				<div class="yanmenualani">Yan Menü Alanı 3 </div>
				<div class="yanmenualani">Yan Menü Alanı 4</div>
			</div>
			<div class="temizle"></div>
		</div>

		<div id="alt">
			<div class="alan">1.alan 23% x auto</div>
			<div class="alan">2.alan 23% x auto</div>
			<div class="alan">3.alan 23% x auto</div>
			<div class="alan">4.alan 23% x auto</div>	
			<div class="temizle"></div>
		</div>
		
	</div>

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/CSS-Genel-Tasarım-Yapısı-4.-Ders-Alan-Oluşturma.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Tüm alanımızı oluşturduk artık diğer tüm alanlarımızı bu alan içinde yerleştireceğiz bu alanın içine;

üst reklam ve logo alanı için <div id=”ustalan”> adında bir alan oluşturduk. İçerisine logo için <div class=”logo”> Reklam Alanımız İçinde <div class=”reklam”> diye çalışma alanlarını oluşturduk.

Menü  alanı için <div id=”menu”> adında bir alan oluşturduk. Menü içeriğini bu dersimizde yapmayacağız ileri ki derslerde menü yapımı ile ilgili derslerimiz olacaktır.

Orta Alanda bulunan İçerik Alanı ve Yan Menü alanı için <div id=”ortaalan”> adında bir alan oluşturduk. İçerik alanımız İçin <div class=”icerik”> Adında bir alan oluşturduk. Yan menü alanımız içinde <div class=”yanmenu”> adında menü alanlarımızı oluşturduk ve bunların içine 4 tane kutucuk yerleştirdik bunlar için <div class=”yanmenualani”> alanları oluşturduk.

Alt Alanda bulunan kutucuk alanı için <div id=”alt”> adında bir alan oluşturduk. İçindeki kutucuklar içinde <div class=”alan”> adında 4 tane alan tanımladık.

<div class=”temizle”></div> Alanımız kafanızı karıştırmasın bunu div alanlarımızdaki kayma sorununu düzeltmek için kullandık. Div Kayma Sorunu Başlıklı Konumuzdan Detaylı Bilgiye Bakabilirsiniz.

Html ile alanlarımız açtık şimdi sıra alanlarımızı şekillendirmeye geldi. İlk olarak üst alandaki logo ve reklam alanlarımız için aşağıdaki css komutlarını tanımlayacağız.

#ustalan{
background:#ED2C2C;
margin-bottom:5px; 
padding:10px;
}
.logo { 
background:#D2D0D1; 
padding:10px; 
font-size:25px; 
font-weight:bold; 
width:200px; 
height:90px;
float:left; 
border-radius: 25px;
}
.reklam { 
background:#D2D0D1; 
padding:10px; 
font-size:25px; 
font-weight:bold; 
width:728px; 
height:90px; 
float:right; 
}

#ustalan{ Alanımız Css alanımıza tanımlayarak şu komutları verdik.

background:#ED2C2C; Komutu ile arka planımızın kırmızı olmasını istedik.

margin-bottom:5px; komutumuzla altına yerleştireceğimiz menü alanı ile 5px boyutunda bir boşluk olmasını istedik.

padding:10px; Komutumuz ile İçine yerleştireceğimiz logo ve reklam alanlarının 10px genişliğinde bir boşlukla başlamasını istedik.

}

.logo {  Alanımız Css alanımıza tanımlayarak şu komutları verdik.

background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.

padding:10px; İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik bunu fazla takılmayın genelde resim kullanıldığı için bunu kullanmayabilirsiniz.

font-size:25px; font-weight:bold; Komutları ile yazı boyunu ve Yazının kalın yazı olmasını istedik.

width:200px; Komutumuz ile genişliğinin 200px genişliğinde olmasını istedik.

height:90px; Komutumuz ile yüksekliğinin 90px yüksekliğinde olmasını istedik.

float:left; Komutumuz ile logo alanı için oluşturduğumuz alanı sol tarafa yasladık.

border-radius: 25px; Komutu ile oluşturduğumuz alanın kenarlarını ovalleştirdik.

}

.reklam { Alanımız Css alanımıza tanımlayarak şu komutları verdik:

background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.

padding:10px; İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik bunu fazla takılmayın genelde resim kullanıldığı için bunu kullanmayabilirsiniz.

font-size:25px; font-weight:bold; Komutları ile yazı boyunu ve Yazının kalın yazı olmasını istedik.

width:728px; Komutumuz ile genişliğinin 728px genişliğinde olmasını istedik.

height:90px; Komutumuz ile yüksekliğinin 90px yüksekliğinde olmasını istedik.

float:right; Komutumuz ile Reklam alanı için oluşturduğumuz alanı Sağ tarafa yasladık.

}

Üst Alanımızı bu şekilde oluşturmuş olduk. Menü alanını detaylı yapmasak da alanımızı oluşturmak için css komutlarımızı şu şekilde hazırladık.

#menu{	
background:#D2D0D1; 
margin:5px 0px 5px 0px; 
padding:10px; 
height:30px;
}

#menu{ Alanımız Css alanımıza tanımlayarak şu komutları verdik.

background:#D2D0D1;  Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.

margin:5px 0px 5px 0px; Komutumuz ile Üstten 5px Sağdan 0px Aşağıdan 5px Soldan 0px  Boşluklar oluşturmasını ve istedik bu sayede üstten üst alana altından da orta alanla birbirine yapışmasını engelledik.

padding:10px; komutumuz ile İçine yerleştireceğimiz yazının 10px aralığında bir boşlukla başlamasını istedik.

height:30px; Komutumuz ile yüksekliğinin 30px yüksekliğinde olmasını istedik.

}

Menü Alanımızı da oluşturduk ancak fazla detaya girmedik şimdi sıra orta alanda bulunan içerik ve yan menü alanımızı düzenlemeye geldi bunun için <div id=”ortaalan”> adında açtığımız alanın içine üsteki logo ve reklam alanını yerleştirdiğimiz gibi alanlarımızı yerleştireceğiz.

#ortaalan{
background: #ED2C2C; 
padding:10px; 
margin:0px 0px 5px 0px;
}
.icerik{
background:#D2D0D1; 
position: relative; 
float:left; 
width:750px; 
min-height:300px; 
padding:10px; 
border-radius: 40px;
}
.yanmenu{
background:#D2D0D1; 
position:relative; 
float:right; 
width:200px; 
height:auto; 
padding:10px;
}
.yanmenualani {
background:red; 
margin-top:5px; 
margin-bottom:5px; 
width:auto; 
height:95px;
}

 

#ortaalan{  Alanımız Css alanımıza tanımlayarak şu komutları verdik.

background: #ED2C2C; Komutu ile arka planımızın kırmızı olmasını istedik.

padding:10px; komutumuz ile İçine yerleştireceğimiz İçerik Alanı ve Yan Menü alanlarının 10px genişliğinde bir boşlukla başlamasını istedik.

margin:0px 0px 5px 0px; Komutumuz ile Üstten 0px Sağdan 0px Aşağıdan 5px Soldan 0px  Boşluk alt menü ile yapışmasını engelledik bunun bir diğer yazım şeklide  margin-bottom:5px; diyede yazabiliriz.

}
.icerik{ Alanımız Css alanımıza tanımlayarak şu komutları verdik.

background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.

position: relative; Komutumuz ile  içerik alanımızı istediğimiz gibi yönlendireceğimizi belirttik daha kapsamlı anlatımını bir sonraki derste anlatacağız.

float:left; Komutumuz ile İçerik alanı için oluşturduğumuz alanı sol tarafa yasladık.

width:750px; Komutumuz ile genişliğinin 750px genişliğinde olmasını istedik.

min-height:300px; Komutumuz ile Minimum 300px yüksekliğinde bir yükseklik belirledik buna minimum vermemizin nedeni yüksekliği değişebilen bir alan olacağı için buna yükseklik değeri bildiremeyiz .Yükseklik değeri belirtirsek içine yazı yazdığımızı düşünürsek yazılarımız 300px yüksekliğinden sonra bu alandan taşıp aşağıya doğru indiğini görürsünüz. Bunu engellemek için yüksekliğini otomatik yapıp içerik olmadığında da 300px. lik bir boşluk olmasını istedik.

padding:10px; Komutumuz ile İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik.

border-radius: 40px; Komutu ile oluşturduğumuz alanın kenarlarını ovalleştirdik.

}

.yanmenu{  Alanımız Css alanımıza tanımlayarak şu komutları verdik:

background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.

position:relative; Komutumuz ile  içerik alanımızı istediğimiz gibi yönlendireceğimizi belirttik daha kapsamlı anlatımını bir sonraki derste anlatacağız.

float:right; Komutumuz ile Yan Menü alanı için oluşturduğumuz alanı Sağ tarafa yasladık.

width:200px; Komutumuz ile genişliğinin 200px genişliğinde olmasını istedik.

height:auto; Komutumuz ile Yüksekliğini otomatik olmasını istedik içine alan ekledikçe aşağıya doğru uzayacaktır.

padding:10px; Komutumuz ile İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik.

}
.yanmenualani { Alanımız Css alanımıza tanımlayarak şu komutları verdik.

background:red; Komutumuz ile Arka plan rengimizin kırmızı olmasını istedik.

margin-top:5px; Komutumuz ile yukarıdan 5px boşlukla başlamasını istedik.

margin-bottom:5px; Komutumuz ile altından 5px boşlukla başlamasını istedik.

width:auto;  Komutumuz ile genişliğini otomatik olmasını istedik .yanmenu alanı genişledikçe burasıda genişleyecektir.

height:95px; Komutumuz ile Yüksekliğinin 90px yüksekliğinde olmasını istedik.

}

İçerik alanı ve yan menü alanlarımızla beraber orta alanımızı da oluşturduk şimdi sıra alt kısımı oluşturmaya geldi.

#alt{
background: #ED2C2C; 
padding:10px;
}
.alan{
background:#D2D0D1; 
width:23%; 
height:auto; 
padding:5px; 
margin:5px ; 
position:relative; 
float:left; 
}

#alt{  Alanımız Css alanımıza tanımlayarak şu komutları verdik:

background: #ED2C2C; Komutu ile arka planımızın kırmızı olmasını istedik.

padding:10px;  Komutumuz ile İçine yazdığımız yazının 10px lik bir boşlukla başlamasını istedik.

}
.alan{  Alanımız Css alanımıza tanımlayarak şu komutları verdik.

background:#D2D0D1; Komutu ile arka planımızın Gri tonunda bir renk olmasını istedik.

width:23%; Komutumuz ile boyutunu px değerinde değilde % biçiminde olmasını istedik yani 1024 px genişliğini 4 de bölsek yüzdesi %25 olur ancak aralarındaki boşlukları da eklediğimizde %23 gibi bir boyut belirlemek yeterli olmaktadır.

height:auto; Komutumuz ile Yüksekliğini otomatik olmasını istedik içine alan veya yazı ekledikçe aşağıya doğru uzayacaktır.

padding:5px; Komutumuz ile İçindeki alanların 5px lik bir boşlukla başlamasını istedik.

margin:5px ; Komutumuz ile İçine yazdığımız yazının 5px lik bir boşlukla başlamasını istedik.

position:relative; Komutumuz ile  içerik alanımızı istediğimiz gibi yönlendireceğimizi belirttik, daha kapsamlı anlatımını ilerleyen  derslerde anlatacağız.

float:left; Komutumuz ile oluşturduğumuz alanların sola doğru yaslayarak yan yana olmasını istedik.

}

Umarım Dersimiz Yararlı olmuştur. Kafanıza Takılan Kısımları Yorum Bölümünde Yazabilirsiniz.

CSS Yapısı Ve Kuralları (2. Ders Seçici { Özellik : Değer ; } )

Css’in yapısına bakacak olursak Seçici { Özellik : Değer ; } Olarak komutlarımızı yazarız.

Seçici Alanı : Html sayfamızdaki id, Class değerlerimizi veya Etiketimizin ismini yazarak hangi alanda işlem yapacağımızı belirtiriz. örnek olarak html sayfamızda kullandığımız <span> etiketini tanımlamak için span  yazmamız yeterli olacaktır veya <div id=alanadi> alanımızda işlem yapacağımızı belirtmek için #alanadi yazmamız yeterlidir.  id, Class değerleri için bundan sonraki dersimizde açıklayacağız şimdilik seçicinin mantığını öğrenmeniz yeterlidir.

Özellik ve Değer Alanı : Özellik ve Değer alanı seçiciden hemen sonra {Süslü Parantezler içine yazılır} Özellik alanı seçtiğimiz alana hangi işlemi yaptıracağımızı belirler. Örnek olarak background-color: dediğimizde arka plana renk vermek istediğimizi belirleriz. Değer Alanında ise değerinin hangi renkte olacağını belirleriz { background-color: red ; } gibi tanımlamamızı yaparız. Bu komutla kısaca dedik ki seçtiğimiz alanın arka plan rengi kırmızı olsun.  Bu alanda dikkat etmemiz gereken ve alışkanlık kazanmamız gereken kısım Özellik ve Değer verdikten sonra ; Noktalı Virgül işaretini koyarak bir sonraki kodun devamının geleceğini belirtmeliyiz. Türkçedeki Virgül işareti gibi düşünebilirsiniz Mavi, Sarı, Kırmızı diye kelimeleri ayırırız.


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/İndex.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Örneğimizi İncelersek bir span alanı oluşturduk ve bu span alanınını css de tanımlarken sadece span dedik  ve süslü parantezler içinde komutlarımız yazdık.

span Seçici alanımız belirledik.

{ süslü parantez açarak komutumuza başladık.

background-color:red; Komutu ile span alanımızın arka planının kırmızı olmasını belirledik ve noktalı virgül ile bir sonraki komuta geçeceğimizi belirttik.

font-size:50px;  Komutu ile span alanımızdaki yazının 50px boyutunda olmasını istedik ve yine noktalı virgül ile bir sonraki komuta geçeceğimizi belirttik.

color:#FFF; Komutu ile span alanımızdaki yazacağımız yazının renginin #FFF komutu ile yazının beyaz olmasını istedik ve yine noktalı virgül kullanıp bu komutun bittiğini ve ilerde farklı komutlar daha verebileceğimizi belirttik. En son kısımda noktalı virgül kullanmasak da olur ancak alışkanlık edinmek için mutlaka kullanmaya özen gösterin.

} süslü parantezi kapatarak komutumuzu sonlandırdık.

body { text-align:center } Komutu ile Body etiketimizde ki içeriklerin hepsinin ortalanmasını istedik farkettiyseniz tek komut verdiğimiz için noktalı virgül ile bitirmedik, bu şekilde de komut çalışır ancak bir sonraki komuta geçmek için mutlaka noktalı virgül kullanmanız gerekir.

CSS Nedir? (1. Ders CSS Bağlantısı Ve Tanımı )

Css Derslerine Başlamadan önce Html Derslerini bitirmiş olmamız gerekir. Çünkü Css dili Html kodlarımızın daha geniş ve düzenli şekilde biçimlendirmemize yarayan tanımlama dilidir. CSS in açılımı Cascading Style Sheets dir. Türkçe anlamı da Basamaklanmış Stil Katmanları diye okunuyor. Bunlara çok fazla takılmadan, Neden Css Öğrenmeliyiz sorusuna cevap olarak şunları diyebiliriz:

  • Css ile htlm sayfa yapımızı daha kapsamlı şekilde biçimlendirebiliriz.
  • Tasarımındaki değişimleri daha kolay ve pratik yollardan yapmanıza olanak sağlar.
  • Sayfamızdaki kod karmaşasından kurtarır.
  • Pc, Tv, Tablet, Telefon vb. gibi farklı boyutlara sahip ekranlara uyumlu tasarımlar yapmamızı sağar.
  • Farklı geçiş yöntemleri ile efektler yaparak daha görsel tasarımlar yapmamıza yarar.
  • CSS bir web standardıdır xhtml için uyulması gerekir.

Css kodlarını 2 şekilde kullanabilirsiniz:

  • Html derslerinden birkaç örnekte verdiğimiz gibi çalışma dosyamızın içinde head etiketleri arasına style etiketi açarak onun içinde tanımlamaları yaparak css kodlarını işleyebilirsiniz. Bunu pek önermem çünkü baya bir kod karmaşası oluyor çalışma dosyamızda.
  • Bir diğer yöntemi ise çalışma dosyamızın dışında .css uzantısı ile bir çalışma alanı açıp kodlarımızı bu alanda tanımlayarak daha düzenli bir şekilde çalışmalarımızı yapabiliriz.

Css dersleri boyunca birinci seçeneğimizi kullanarak html dosyamızda head etiketi içinde style etiketiyle derslerimizi anlatacağım ama siz ikinci seçeneği derslerinizde uygulayın bunun için .css uzantılı css dosyası oluşturacağız ve html dosyamıza bu dosyayı tanıtacağız. Bunun için bir çalışma klasör oluşturun ve içine index.html ve stil.css isimlerinde iki tane çalışma alanı oluşturalım. stil.css Dosyamız .css uzantısı ile css kodlarını yazmaya hazır ancak bunu html sayfamıza dahil etmeliyiz. Bunun için html dosyamızı açıp head etiketleri içine aşağıdaki bağlantıyı eklemeliyiz ki dışarıdaki .css uzantılı dosyamızın html sayfamızın devamı niteliğinde olduğunu belirtelim.

<link rel="stylesheet" type="text/css" href="stil.css"/>

Bu bağlantı sayesinde stylesheet yani Css Komutlarımızın text/css tipinde aynı klasörde bulunan stil.css dosyasından çağırmamızı istedik bu sayede index.html sayfamızın eki biçiminde çalışma alanımıza tanıttık. Bundan sonra stil.css dosyasında index.html dosyasındaki istediğimiz etiketi şekillendireceğiz.

CSS Nedir (1. Ders CSS Bağlantısı Ve Tanımı )

Bu dosyada hem head etiketleri içinde hemde stil.css dosyasında aynı kodlar yazılmıştır head içindeki style etiketini silerek  stil.css dosyası üzerinden çalışma yapabilirsiniz.

Html Basit Stil Dersleri (9. Ders Style)

Html’de Stil kodları sayesinde html sayfamızdaki içeriklerin  görünüşlerinde değişiklik yaparız yarayan kodlamadır bunu 3 farklı şekilde yapabiliriz. Yazımız baya bir uzun oldu ancak her kodun her satırın açıklamasını yaparak bunun mantığını anlamanızı istiyorum inşallah sizler için yararlı olacak bir ders olur.

  • Head Etiketleri arasında style Etiketi açarak.
  • Body Etiketleri arasında kullandığımız etiketlere <etiketismi style=”özellik türü“: özelliği; > şeklinde yazarak.
  • Şuanki derslerde olmasada kod dosyamız dışında oluşturacağımız bir CSS dosyası ile sayfamıza dışarıdan çağırarak stil kodlarını kullanabiliriz.

ÖRNEK ÇALIŞMA ŞABLONUMUZ


[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/01/Ders-4-Stil-Dersleri.html” icon=”” target=”true”]Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz[/button]

Head Etiketleri içinde <style type=”text/css”> Etiketinde Stil Komutları verme

Head etiketi içinde oluşturacağımız <style type=”text/css”> etiketinde yazacağımız kodlarla body içinde açmış olduğumuz etiketlere komutlar vereceğiz ancak html dersleri boyunca body içinde açtığımız etiketlerde düzenleme yaparak öğrenmeye çalışacağız bu derste örnek olsun diye birkaç kod yazdık ve ilerde css kullanarak  sayfalarda gereksiz kalabalığın olmasını engelleyeceğiz. Aşağıda örnek kodlamada yapmış olduğumuz head etiketi içindeki <style type=”text/css”> etiket komutları şu şekilde verdik.

#yazialani {
width: 600px;	
height: 250px;			
border:4px solid red;
background-color: #333 ;	
color:red;
margin:0px auto;
	  }

Head etiketi içindeki <style type=”text/css”> stil etiketi içinde tanımladığımız #yazialani stil tanımlaması ile body etiketi içinde bulunan <div id=”yazialani”> etiketine aşağıdaki şu tanımlamaları yap dedik ve { açarak  buradan } kapattığım alana kadar içinde yazmış olduklarımı <div id=”yazialani”> alanına uygula dedik.Bu alan örnek sayfamızda bulunan Örnek Yazı Alanının bulunduğu kırmızı çerçeveli alandır. Burada Kafanız karışabilir bu div id veya div class kavramında bu yüzden …. konulu yazımıza buradan göz atabilirsiniz.

width: 600px;  Kodu ile bu alanın 600px genişliğinde olmasını istedik.
height: 250px; Kodu ile bu alanın 250px. yüksekliğinde olmasını istedik.
border:4px solid red; Kodu ile yukardaki boyutlandırılmış alanı 4 px kalınlığında bir kırmızı hat ile çerçevelemesini istedik
background-color: #333 ; Kodu ile alanın arka plan renginin #333 renk tonunda olmasını istedik buna direk black yazıp siyah olmasını söylemektense siyahın renk tonlarından olan #333 olan renk tonunu kulanmak istedik bu farklı renk tonlarını google veya  fotoshop programınızdan bulabilirsiniz temel renkleri ingilizceleri ile yazarak elde edebilirsiniz ancak renklerin tonlaması olunca renk kodu #ile başlayan bir kod içerir.
color:red; Komutu ile bu alanda yazılan yazıların hepsinin renginin kırmızı olmasını istedik örnek yazı alanı neden beyaz diye kafanız karışmasın aşağıdada göreceksiniz #yazialani i alanında ona farklı bir değer atadık.
margin:0px auto; Komutu ile <div id=”yazialani”> alanını üstten sağdan alttan ve soldan olarak otomatik ortalattık bunun farklı yolları da var onları css derslerinde göreceksiniz.

#yazialani i{				
font-family:Arial;		
padding-left:300px;		
font-size:35px ;			
color: #FFF;				
	    }

<div id=”yazialani”> Etiketinin içinde <i> etiketi ile Örnek Yazı Alanı diye bir yazı yazdık bunu style alanında tanıtmak için #yazialani i olarak tanımladık ki <div id=”yazialani”>‘nın içindeki <i> etiketindeki alan için yapılacak değişiklikleri belirtelim.

font-family:Arial; Kodu ile bu yazının Arial Formatın da yazılmasını istedik normalde biliyorsunuz i etiketini kullandığımızda yazının italik olması gerekirken biz ayrı bir tanımla yaparak bunun arial formatına çevirdik.
padding-left:300px; Kodu ile Yazının soldan 300px lik bir boşlukla sağa yaslanmasını sağladık bunu text-align:right komutu ile yapabilirdik ancak padding ile nasıl boşluk bırakılacağının mantığını görün istedik.
font-size:35px ; Kodu ile bu yazının 35px. boyutunda olmasını istedik.
color: #FFF; Kodu ile bu etiketin içinde yazan yazının beyazın tonu olan #FFF renk kodunu kullandık.

#yazialani span{
font-size:20px ;
	       }

<div id=”yazialani”> Etiketi içinde birde <span> alanı var yazıları yazdığımız bu alanı style alanında tanıtmak için #yazialani span diyerek <div id=”yazialani”>‘nın içindeki <span> etiketindeki değişikliği burada bildiriyoruz.

font-size:20px ; Komutu ile bu alanda yazılan yazıların 20px. olmasını istedik.

#yazialani span img{
padding-top:10px;
padding-right:10px;
	           }

<div id=”yazialani”> Etiketinin içindeki <span> etiketinin de içinde bir img etiketi ile resim alanı var bunu da style alanında tanıtmak için #yazialani span img olarak tanıtıyoruz. bunu hem body içindeki img etiketindeki style komutuyla hemde head etiketindeki style komutlarıyla tanıttık. img etiketindeki style komutlarında resmin bulunduğu yerdeki linkini, boyutlarını, ismini ve özellikle align=”right” komutu ile resmi sağa yaslamıştık resim sağ alt köşeyle birleşmişti ve güzel durmuyordu bunun için style komutlarıyla

padding-top:10px; Kodu ile resmin üstündeki yazı ile arasında 10px. bir boşluk bırakmasını ve
padding-right:10px; komutu ile resmin sağındaki çerçeve ile 10px. lik bir boşluk bırakmasını istedik. İlerleyen derslerde css ile kodlamaya başladığımızda bu margin ve padding özelliklerine daha detaylı bakacağız.

.resim {
width: 500px;
height: 250px;
margin: auto;
border: 4px solid yellow;
border-radius: 25px;
background: url(http://www.bilgebank.com/wp-content/uploads/2017/01/yaz%C4%B1-stili-etiketleri-310x205.jpg);
	}

Yazı alanının altında bir resim alanı oluşturduk <div class=”resim”> etiketi ismini verdik ancak içine hiçbir değer girmedik bunun içindeki değerleri head alanında bulunan <style type=”text/css”> içinde .resim tanımlaması ile style etiketine gereken komutları verdik.  div id veya div class kavramını çözdüğünüzü hesap ederek devam ediyoruz. .resim den sonra süslü parantezler içinde şu kodları girerek resmimizi ve diğer özellikleri tanımlayalım.

width: 500px; Kodu ile resmimize 500px. genişlik vereceğimiz.
height: 250px; Kodu ile resmimize 250px. yükseklik vereceğimizi.
margin: auto; Kodu ile resim alanımızı ortaladığımızı.
border: 4px solid yellow; Kodu ile resim alanına verilen boyutlarca 4px. lik bir sarı çerçeve ile belirtileceğini ve
border-radius: 25px; Kodu ile bu çerçevenin 25px. lik bir açı ile oval olmasını istediğimizi bildirdik.
background: url(http://www.bilgebank.com/wp-content/uploads/2017/01/yaz%C4%B1-stili-etiketleri-310×205.jpg); diyerek arka plan olarak bir resim kullanacağımızı bildirdik.

Body Etiketi İçinde Açmış Olduğumuz Etiketlere Style Etiketi İle Stil Kodları Ekleme

 

Body içinde açtığımız  <etiketismi style=”özellik türü“: özellik değeri; > gibi komutlarla o etikete yazan yazının resmin vb gibi verinin nasıl görünmesini tanımlayacağız. örnek olarak aşağıdaki resim etiketi olan img etiketine yapmış olduğumuz tanımlamalar şu şekildedir.

<img src="http://www.bilgebank.com/wp-content/uploads/2017/01/margin-padding.jpg" align="right" width="250" height="100" alt="margin padding"/>

src=”http://www.bilgebank.com/wp-content/uploads/2017/01/margin-padding.jpg” komutu ile resimin bulunmuş olduğu adresi tanıttık.

align=”right” komutu ile resimi sağa yasladık.

width=”250″ komutu ile resime 250px. genişlik verdik.

height=”100″ komutu ile resime 100px. yükseklik verdik.

alt=”margin padding” etiketi ile resme tanım atadık margin padding ismi ile seo için ara motorlarına bu resmin margin padding i anlatan bir resim olduğunu bildirdik.

 

CSS ile şuan anlatım yapmayacağız css derslerine başladığınızda bolca orada alıştırmalar yapacaksınız örnek kodları kullanarak çeşitli değişiklikler yapabilirsiniz aklınıza takılan yerleri yorumlarda sorabilirsiniz.