CSS Dersleri – 2 || CSS ‘in Yapısı ve CSS Kullanımı

CSS Dersleri ‘mizin ilkinde “CSS Nedir Ne işe Yarar?” sorularına cevap arayarak CSS’ i tanımlamaya çalıştık. Bu dersimizde CSS’e artık giriş yapacağız. Öncelikle CSS’ in yapısını ve CSS kullanımını inceleyeceğiz.

CSS sözdizimi aslında çok kolaydır. Öncelikle “CSS SEÇİCİSİ” oluşturulur, ardından bu seçiciye BİLDİRİMLER yazılır. Bildirimlerde kendi içerisinde ÖZELLİK VE DEĞER’ leri barındırılar. Bu bahsi geçen 4 teknik terimi dersin ilk başında çok iyi anlamaya çalışın. Çünkü bundan sonraki CSS dersleri ‘mizin tümünde bu bahsi geçen “seçici, bildirim, özellik, değer” sözcükleri kullanılacaktır. Bu nedenle hem CSS’ i iyi öğrenmek, hem de etkili kullanabilmek için bu kuralları gözardı etmeyin.

CSS Dersleri – 2 || CSS ‘in Yapısı ve CSS Kullanımı

Şimdi CSS’ in yapısını daha detaylı inceleyelim. Bu terimlerin ne anlama geldiğini ayrı başlıklar halinde tanımaya çalışalım.

1) SEÇİCİ :

Seçiciler aslında hangi bölümle ilgili stil tanımlanacağını belirlediğiniz ifadelerdir. Örneğimizde “h1” bir HTML etiketidir. Ve bu mantığa göre CSS kuralımız “h1” etiketi için tanımlanmıştır. Yani sadece yazdığınız stil şablonu özellikleri “h1” etiketini etkiler. CSS ‘de farklı türde seçiciler bulunur. Etiket seçici, ID seçicisi ve Sınıf seçicisi olmak üzere 3 farklı seçici bir sonraki CSS dersleri ‘mizde ayrıntılı bir biçimde anlatılacaktır.

2) BİLDİRİM : 

Bildirimler “neyin nasıl değişeceğini” belirlediğimiz ifade dizileridir. Örn: Rengin mavi olması, yazının kalın olması, kenarlığın çift çizgili olması vb. cümlelerin CSS kodu biçiminde düzenlenmesi sonucu bildirimler oluşur. Yukarıdaki resimde örnekte “color:blue;” ifadesi bir bildirimdir. CSS’ de binlerce hatta onbinlerce bildirim yazabilirsiniz. Bir bildirimi yazan kişi diğer bildirimleri de aynı sözdizimi kurallarına uyarak kolay bir şekilde bildirim sayısını arttırıp farklı bildirimler yazabilir. Önemli olan hangi kelimelerin, hangi özellikleri kapsadığını ve bu özelliklere hangi değerlerin hangi kurallarla atanabileceğini bilmekten geçiyor. Bu nedenle CSS bildirimi yazmak CSS’ i öğrenmenin yarısıdır diyebiliriz.

Not1: Tüm bildirimler ” { } ” arasına yazılmak zorundadır. Bu küme parantezleri arasına en az bir adet olmak üzere birçok bildirim yazabilirsiniz. Küme parantezlerini kullanmamak sözdizimi hatasına neden olacağından CSS kodlarının derlenememesine neden olur.

Not2: Bir her bildirimin arasında mutlaka “;” kullanılmalıdır. “;” bir bildirimin bittiğini diğer bildirime başlanacağına işarettir. Eğer “;” ü kullanmazsanız CSS kodlarınız çalışmaz. Bu nedenle bu işaretleri mutlaka kullanmalısınız.

2.1) ÖZELLİK :

Bildirimlerin ana öğesi olan özellikler “neyi değiştireceksiniz” sorusuna karşılık gelir. Örneğin “rengi değiştireceğim” , “kenarlığı değiştireceğim” , “yazının büyüklüğünü değiştireceğim” sorularına cevabınızı CSS kurallarına uyarak kod olarak yazarsanız bir özellik tanımlamışsınız demektir. Örneğimizde “color” yani renk bir özelliktir ve bildirim yapısının ilk elemanıdır. Örnekleri çoğaltacak olursak “font-size”, “border-style” , “position” gibi birçok özellik CSS kurallarında yoğun bir şekilde kullandığımız özelliklere örnektir.

2.2) DEĞER :

Değerler bildirimlerin ana elemanlarından diğer önemli öğesidir ve “nasıl değiştireceksiniz” , “hangi ölçü birimini kullanacaksınız” sorularına cevabına karşılık gelir. CSS kurallarına uyarak bu sorulara cevap yazmışsanız “değer” yazmayı da öğrenmişsiniz demektir. Ancak şunu unutmayın, özellik olmadan değer tanımlanamaz. Bir değerin olması için mutlaka özellik tanımlanması gerekir. Resimdeki örnekte “blue” kelimesi bir değerdir. CSS’ de binlerce hatta onbinlerce değer bulunur. Değer tiplerinin yazım kuralı mutlaka doğru belirtilmelidir.

Not3: Değer tipleri, özelliğe dayalı olarak belirlenir. Örneğin “color” bir renk özelliğidir ve renge yalnızca renk değerleri karşılık gelir. Örneğin renk değerine bir büyüklük uzunluk değeri atamayamazsınız. Hangi özelliklere hangi değerlerin atanabileceği CSS kurallarınca belirlenmiştir. Bu kurallara uymazsanız CSS komutlarınız çalışmaz veya düzgün yorumlanmayabilir. Bunları derslerimizde ayrıntısıyla göreceğiz.

Not4: Özellik ve değer arasında mutlaka “:” işareti kullanılmalıdır. Aksi taktirde CSS kodlarınız çalıştırılamaz. CSS sözdiziminde “:” işareti özelliğin bittiğini değerin başlayacağını belirten işaret olarak tanımlanabilir.

CSS yapısına ve CSS kullanımına cümleler kurarak ve bu cümlelere karşılık gelen CSS kurallarını belirleyerek örnekler yazalım;

Soru: h3 etiketinde yazının boyutunu 16 punto yapan CSS kuralını yazınız.

Cevap: h3 {font-size: 16pt;}

Soru: “renk” isminde bir sınıf seçicisinde yazı renginin turuncu olmasını sağlayan CSS kuralını yazınız.

Cevap: .renk {color: orange;}

Soru: “orta” ismindeki bir ID seçicisinde yazıların yazıldığı alanda ortalanmasını ve yazı tipinin “Verdana” olarak belirlenmesini sağlayan CSS kuralını yazınız.

Cevap: #orta {text-align:center;font-family:Verdana;}

Yukarıdaki 3 örnekte farklı seçici türleri kullandım. Seçicileri bundan sonraki CSS dersleri ‘mizde göreceğiz. Bu nedenle bu bölüme odaklanmayın. Önemli olan bildirimlerdir. Bildirimlerin yazım biçimlerini, özellik ve değer arasındaki “:” işaretini, her bildirimin tamamlanmasından sonra “;” işaretini kullandığıma dikkat edin. Ayrıca seçiciden sonra kullandığım bildirimlerin “{ }” blokları arasında bulunduğunu da mutlaka öğrenin. Bu linkten CSS yapısının sayfanızda yaptığı değişiklikleri “Try it Yourself” butonunu kullanarak test edebilirsiniz.

Bu kurallar basit gibi görünse de en ufak bir hatada CSS kodlarının çalışmamasına neden olur. Bu anlamda bu dersi asla öğrenmeden diğer CSS dersleri ‘ne geçmeyin. Çünkü CSS’ de temeli iyi atmak çok önemlidir. Temeli iyi atarsanız bundan sonra yapacağınız iş kat çıkmaktan ibaret olacaktır, ve bu anlamda kat sayımız CSS’ de çok fazla olacağından enerjinizi sonraki derslere kesinlikle saklayın. Birçok bildirimi üst üste yazarak Web Sayfalarınıza bir görsellik kazandıracaksınız. Yazım şekli aynı bile olsa bu özellikleri değerleri doğru zamanda ve doğru yerde kullanabilmek size profesyonellik kazandıracaktır. Bir sonraki dersimizde görüşmek üzere.

Not: Makale özgün bir makaledir. Alıntı yapmadan kullanılamaz. @bilgisayar.name
CSS Dersleri – 2 || CSS ‘in Yapısı ve CSS Kullanımı