HTML İle CSS Çalışması-2

Daha önceki dersimizde de bahsettiğimiz css ile site iskeleti yapımının ikinci örneğini içeriyor bugünkü yazımız bu örnek görsel olarak daha iyi ve şık bir görünüş sunuyor.HTML ile site yapmaya karar verdiyseniz css yapısını iyi öğrenmelisiniz.Çoğu şeyin temeli de css kodlarını içerdiği için şimdi size bazı temel şeyleri göstermek de bize düşer.
Merhaba arkadaşlar bu dersimizde yine güzel bir çalışma yapacağız. Css kodları ile araya hafif tasarımın girdiği bir çalışma olacak.Bunlar 4 adet Css tasarım kodları  ile yapılmış basit tasarımlar.Renklendirmek tabi ki sizin elinizde :)

1.TASARIM

2.TASARIM

3.TASARIM

4.TASARIM

TÜM KODLAR

GÖRÜNÜM

Çalışmayı buradan indirebilirsiniz.

KODLAR

	<html> <head>
	<title>Css tasarım</title>
	<style type="text/css">
	.tasarim1
	{
	width:1250px;
	height:200px;
	background-color:red;
	font-size:65px;
	color:green;
	font-family:New Times Roman;
	font-weight:bold;
	}
	.tasarim2
	{
	width:1000px;
	height:150px;
	background-color:blue;
	font-size:50px;
	color:orange;
	font-family:Bradley Hand ITC;
	font-weight:bold;
	}
	.tasarim3
	{
	width:750px;
	height:120px;
	background-color:yellow;
	font-size:40px;
	font-family:Arial;
	color:red;
	font-weight:bold;
	}
	.tasarim4
	{
	width:650px;
	height:100px;
	background-color:orange;
	font-size:30px;
	font-family:Verdana;
	color:blue;
	font-weight:bold;
	}
	</style>
	</head>
	<body>
	<div class="tasarim1">Tasarım1</div>
	<div class="tasarim2">Tasarım2</div>
	<div class="tasarim3">Tasarım3</div>
	<div class="tasarim4">Tasarım4</div>
	</body>
	</html>