Birkod - Css Stil Veriyoruz

Css Stil Veriyoruz

Yazar: BirKod Tarih: 26.07.2015

Merhaba arkadaşlar.. Bu dökümanımızda sizlerle birlikte bir önceki dökümanda oluşturmuş olduğumuz stil.css ve index.html dökümanlarını açarak başlayalım. Öncelikle yapacağımız işlemden bahsetmek gerekirse index.html dökümanımız içerisine basit bir yazı yazacağız ve bu yazıyı css dökümanımızda şekillendireceğiz. Nasıl bir şekillendirme olacak? diye sorarsanız eğer örneğin arkaplan rengini, yazımızın rengini ayarlayabiliriz, belli kısımlardan boşluklar bırakabiliriz (?) ve bu tarz işlemler ile kendi düşüncemizi yansıtabiliriz. Hadi gelin bir yerlerden başlayalım..

index.html

<!DOCTYPE html>
<html>
<head>
	<title>BirKod | Stil Veriyoruz!</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<p>Buradaki yazımızın rengi beyaz, arkaplanı kırmızı olsun!</p>
	<b>Buradaki yazımız ise 18px boyutunda ve rengi kırmızı olsun!</b>
</body>
</html>

Yukarıdaki örneğimizde klasik bir html sayfası açtık, head tagları arasına eklediğimiz link etiketi ile stil dosyamızı çağırdık, body tagları arasına ise bir adet p ve bir adette b etiketine sahip toplamda 2 tane yazı ekledik. Şimdi bu etiketlerimize gelin beraber stil verelim.

stil.css

p {
	color: #fff;
	background-color: #ff0000;
}

b{
	font-size: 18px;
	color: #ff0000;
}

Kodlarımızı sayfamıza ekledik ve aşağıdaki gibi bir görüntü elde ettik;

Görüldüğü üzere yazılarımızda bir sıkıntı yok ve tam da istediğimiz gibi oldu.. Fakat bunu nasıl başardık? Gelin açıklayalım..
Öncelikle css kodlarımız içerisine bazı etiketler yazarız. Örneğimizde bir p ve bir de b etiketi belirlemiştik. Farkettiğiniz üzere etiketlerimizden sonra { } işaretlerimiz arasına kodlarımızı yazmaktayız. Bu işaretlerimiz yardımı ile aslında o etiketin içerdiği özelliklerden bahsetmekteyiz. Bu durumda dikkatinizi çektiğini düşündüğüm diğer özelliğimize de değinelim. Yine farkettiğiniz üzere etiketlerimiz içerisine yazdığımız tüm özelliklerden sonra ; ifadesini eklemekteyiz. Bu ifade ile aslında o özelliğin son bulduğu ve yeni bir özelliğe geçildiğinin haberini vermekteyiz. Bu ifademizi eğer o etiketimize son özelliğini atıyorsak kullanmamıza gerek yoktur.. Hemen bunu örnekle açıklayalım..

p {
	color: #fff;
	background-color: #ff0000
}

Kodda görüldüğü üzere arkaplan rengimizi belirleyen background-color ifademizin sonunda noktalı virgül kullanmadık! Fakat hemen ardından gelen ifademiz zaten bize p etiketinin tüm özelliklerinin sonlandığından bahsetmekte. Bu durumda kullanıp kullanmamamız pekte önemli değildir.