HTML CSS / Cascading Style Sheets

Onceki dersimizde css konusunda kucuk bir giris yaptik ve html elemenlerine dogrudan stiller uyguladik.
fakat soyle bir durum var,sayfada yer alan her html elementine ayri ayri css uygulamak birtakim problemlere neden olabilir!

Ne gibi?
Icerikten ziyade sayfa html/css kodlariyla dolup tasabilir.(ve bunun getirdigi problemler guncelleme,seo vs.)
Asagda CSS'in 3 degisik kullanimindan bahsedecegiz.

Inline CSS

Onceki dersimizde kullandigimiz gibi HTML ogelerinin style nitelikleri kullanilarak dogrudan elemente eklenir,Satir ici css olarak isimlendirilir. Ornekteki css kodu 'sadece uygulandigi p elementine' etki yapar!
<p style='font-size:24px;color:green;'>
		p elementine inline css uyguladik.
</p>

Internal CSS

Genel olarak sayfanin head bolumune asagdaki ornekte oldugu gibi eklenir.
<!DOCTYPE html>
<html lang="en">
<head>

	<title>Internal Css</title>
	<style>
		h1{font-size:32px;text-align:center;color:red;}
		p{color:green;text-align:center;}
	</style>
</head>
<body>
	<h1>CSS Nedir?</h1>
	<p>CSS Aciklama Bilgisi...</p>
	<h1>Internal CSS Nedir?</h1>
	<p>Internal Css Aciklama Bilgisi...</p>
</body>
</html>
SONUC:

Yukardaki ornekte CSS kodlarinin head kapsaminda ve bir style elemani icinde yer aldigni gordunuz mu?
h1 icin ayarlanan stil ozelliklerinin gecerli sayfadaki tum h1 degerlerine etki yaptigni gordunuz mu?
p icin ayarlanan stil ozelliklerinin gecerli sayfadaki tum p degerlerine etki yaptigni gordunuz mu?

External CSS

Gordugumuz iki kullanim biciminde de uygulanan stiller sadece bulundugumuz dokuman ile sinirliydi,simdi ogrenecegimiz yontem ile yuzlerce sayfalik bir websitesinin gorunusunu sadece tek bir css dosyasini guncelleyerek degistirebiliriz. Cunku bu metot soyle calisir:CSS kodlari ayri bir dosyaya yazilir ve ihtiyac duyulan belgeye bir link gibi eklenir.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>External Css</title>
	<link rel="stylesheet" href="cssdosyasi.css">
</head>
<body>
	<h1>External Css Baslik</h1>
	<p>External CSS Aciklama...</p>
</body>
</html>
Html Dosyasinda ekledigmiz cssdosyasi.css icerigi asagda
body{
	background-color:lightblue;
}

h1{
	font-size: 32px;
	color:red;
	text-align: center;
}

p{
	text-align: center;
}
SONUC:

Stil dosyamizin uzantisinin css oldugnu gordunuz mu?
Stil dosyamizda sadece css kodlarinin oldugunu gordunuz mu?
Stil dosyamizi sayfamiza head kapsaminda asagdaki gibi ekledigmizi gordunuz mu?
<link rel="stylesheet" href="cssdosyasi.css">
Bu css dosyasini 100 sayfanin kendisine ekledigini dusunun,sadece css dosyasindaki bir kodu degistirerek (ornegin body ogesinin arkaplan rengini) tum sayfalarin arkaplan rengini degistigini gorecegiz,guncelleme acisindan oldukca pratik degil mi?

CSS Fonts

color:Metin Rengini Tanimlar.(Ayrica renklerden bahsedecegimiz dersimiz olacak)
font-family:Metne uygulanacak font ailesini tanimlar,
font-size:Metnin font boyutunu tanimlar.
font-weight:Belirlenen fontun kalinlik-incelik durumunu belirler.
Detayli bilgiler html/css ders akisinda verilecektir.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Font</title>
	<style>
		h1{
			color: red;
			font-family:Verdana;
			font-size:32px;
			font-weight:normal;
		}

		p{
			color: green;
			font-family:Verdana,Tahoma,sans-serif;
			font-size:150%;
		}
	</style>
</head>
<body>
	<h1>CSS Fonts</h1>
	<p>CSS Font Aciklama Bilgisi...</p>
</body>
</html>

CSS Border

border:Html elementinin etrafinda gorunecek olan cercevenin kalinlik degeri,rengi ve stili tanimlanir.
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Font</title>
	<style>
		h1{
			border:2px solid red;
		}

	</style>
</head>
<body>
	<h1>CSS Border</h1>
</body>
</html>

CSS Padding

padding:yukardaki border orneginde textin border'a nekadar yakin oldugnu gorduk,iste padding degeri text ile border arasinda mesafe(ic mesafe) tanimlamaya yarar.
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Font</title>
	<style>
		h1{
			border:1px solid red;
			padding:40px;
		}
	</style>
</head>
<body>
	<h1>CSS Border ve Padding Ornegi</h1>
</body>
</html>

CSS Margin

margin:Html elementinin diger ogelere mesafesi denebilir(Dis Mesafe).
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Font</title>
	<style>
		h1{border:1px solid red;margin:0px;		    /*Hic mesafe yok*/}
		h2{border:1px solid green;margin:30px;		/*30px margin degeri*/}
	</style>
</head>
<body>
	<h1>CSS Margin Ornegi-1</h1>
	<h1>CSS Margin Ornegi-2</h1>

	<h2>CSS Margin Ornegi-3</h2>
	<h2>CSS Margin Ornegi-4</h2>
</body>
</html>
Ornekte 0px ve 30px olarak ayarlanan margin degerlerine bakarak kiyaslama yapabilirsiniz.
Css kod bolumunde /* */ seklinde bir kullanimla yorum yazabildigimizi gordunuz mü?
Border-padding-margin degerleri html ogesinin ust-sag-alt-sol kenarlarina etki yapar ve bu degerlerin hepsi ayri ayri ayarlanabilir.
(margin-left,padding-top,border-right ..... gibi)

CSS-id ve class

Nitelikler isimli dersimizde CLASS ve ID kavramlarindan uzunca bahsettik simdi id ve class degerlerine css uygulayalim (Nitelikler)
<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		a{font-size: 20px;}
		#aktif{
			color:red;
		}
		.yesil{
			color:green;
		}
	</style>
</head>
<body>
	<a href="#" class="yesil">Link-1</a>
	<a href="#" class="yesil">Link-2</a>
	<a href="#" class="yesil" id="aktif">Link-3</a>
	<a href="#" class="yesil">Link-4</a>
</body>
</html>
Bir dokumanda belirlenen ID degerinden sadece 1 tane olabilir/olmalidir. Class degeri ise birden cok yerde kullanilabilir.
Yukardaki css kodunda sinif degerlerimize ulasmak icin nokta(.) ve id degerimiz icin ise diyez(#) isareti kullandigimizi gordunuz mu?

Ornegimizde id degeri verdigimiz linkede yesil isimli sinifi atamamiza ragmen sonuc kirmizi cikti neden?
Sonraki dersimizde oldukca onemli hatta bu dersin devami diyebilirim!

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com