CSS Nedir? Ne İşe Yarar? CSS Kodları Nedir?

CSS kodları, HTML kodları ile internet sayfası tasarımında önem kazanmaya başladı. HTML kodları her ne kadar web sayfası yapımında işlevsel olsa da, biçim ve estetikten yoksundu. Ta ki CSS kavramı gelene kadar.

CSS Nedir?

CSS nedir sorusunun kısa cevabını; Cascading Style Sheets (Basamaklı stil sayfası) olarak verebiliriz. Biraz daha detaylandıracak olursak, HTML elementlerinin nasıl görüneceğini belirleyen kodlar olarak açıklayabiliriz. Yani internet sitelerinin görselleştirmesinde CSS kodları kullanılır.

CSS Ne İşe Yarar?

HTML kodları ilk ortaya çıktığı zaman siyah beyaz televizyondan bir farkı yoktu. Kodlar aynı biçimde kullanılır ve yazı fontları hep aynı görünürdü.  Mesela kodlamayla başlık hazırladığınızda, bu başlığı başka yerlerde farklı renk ve tarzda gösteremiyordunuz.

HTML 3.2 versiyonunun çıkması ile birlikte, CSS ne işe yarar sorusunun da cevabı verilmiş oldu. Yani HTML kodlama dilinin bundan önceki versiyonlarında, CSS diye bir şey yoktu.

CSS tam anlamıyla internet sayfalarına renk ve can kattı diyebiliriz. Bu kodlama sayesinde internet sayfalarında birçok seçenek ortaya çıktı. Mesele resim eklenebiliyor, resimlerin renkleri değiştirilebiliyor, saydamlaştırılabiliyor ve gölgelendirme yapılabiliyordu.

HTML kodlarıyla yapılan sayfayı iskelet olarak düşünün, CSS eklendiğinde tam bir insan görünümü elde edersiniz. Yani CSS ve HTML birbirini tamamlayan bir bütündür. CSS kodları, HTML ile yapılan bir sayfanın daha iyi görünmesini sağlar.

CSS ile Neler Yapılabilir?

CSS nedir nasıl kullanılır ile ilgili birkaç basit kod örneği verelim. Böylece konu daha iyi anlaşılacaktır.

Tabi ki CSS kodları deyince gözünüz korkmasın. Biz sadece temel mantığını anlatacağız. Gerisi kodlama uzmanlarının işi.

Basit bir logo tasarımını sayfada aşağıdaki kodlama satırını kullanarak, gerçekleştirebilirsiniz.

#logo {

width: 180px;

position: absolute;

left: 10px;

top: 20px;

}

Yukarıdaki verdiğimiz kodlama satırının anlamı şudur:

• Yüklenen internet sayfasındaki, logo isimli materyali bul,
• Bu materyalin enini 180 piksel yap,
• Sayfanın sol üst tarafında, sayfanın kenarından 10 piksel, sayfanın yukarısından ise 20 piksel mesafeye yerleştir.

H2 başlıklarının düzenlenmesine ait bir başka kod satırı örneği ise aşağıda verilmiştir.

h2 { margin-top: 24px; color: red; font-size: 24px;} #sidebar-left h2 { font-size: 18px;}

Bu kod satırında ise;

• Sayfadaki H2 başlığını bul.
• Bulduğun tüm başlıkların rengini kırmızı yap. Metin boyutu ise 24 piksel olsun.
• Eğer bu başlık soldaki sütunda yer alıyorsa, metin boyutu 18 piksel olsun.

Yukarıdaki komutlar yer almaktadır. Örnek verdiğimiz kodlamaların herhangi bir sınırı yoktur. CSS kodlarıyla, resim ve video düzenlemesi de yapabilirsiniz. boyutlarıyla oynayabilir, renklerini değiştirebilirsiniz. Eğer bu kodlama programını iyi biliyorsanız, doğaçlama yaparak, birçok harika tasarım gerçekleştirebilirsiniz.

CSS Kodları

CSS sisteminde kullanılan kodların ne anlama geldiği ile ilgili kısa bilgiler vermek yararlı olacaktır. Bu kodlar aynı zamanda, style CSS nedir sorusunun da cevabı olacaktır. Yani CSS stilleri hakkında da bilgi vermiş olacağız.

@font-face: Bilgisayarda hazır olarak var olan font tiplerini istediğiniz gibi kullanmanızı sağlar.

Font-style: Fontları italik ya da normal yapmak için kullanılır.

Color: Yazılara istediğiniz rengi vermek için kullanılır.

Letter-spacing: Yazı karakterleri arasındaki boşluğu artırmak için kullanılır. Klavyedeki Tab tuşu gibi işlev görür. Pozitif değerler verirseniz, yazı aralarındaki boşluk artırılmış olur. Negatif değer verdiğinizde ise yazı aralarındaki boşlukları azaltmış olursunuz.

Border: HTML öğelerinin 4 tarafına kenarlık vermek için kullanılır.

@keyframes: Animasyonlar üretmek için CSS kodlarının kullanımıdır.

Background: Arka plan özelliklerini CSS kodları ile ayarlayabilmemizi sağlar.

Column-count: İnternet sayfalarındaki yazıların, değer kadar sütunlarına ayrılmasını sağlayan komuttur.

Flex: CSS programında esnek tasarımlar oluşturmak için kullanılır. Birçok varyasyonu bulunur. Flex-grow, flex-shrink ve flex-basis özelliklerinin birlikte kullanılmasını da sağlar.

Border-image: Bu komutla oluşturduğunuz kenarlıklara resim atayabilirsiniz. Yani resimli kenarlık yapabilirsiniz.

Box-shadow: HTML öğelerine gölge efekti vermeye yarar. Gölgelerin x ve y ekseni üzerindeki konumunu belirleyebiliriz. Ayrıca, rengini ve bulanıklığını da ayarlayabilirsiniz.

Yukarıda verdiğimiz örnekleri çoğaltmak mümkündür. İşinize yarayacak ve birçok şey yapabileceğiniz birçok CSS kodlarını öğrenerek, internet sayfa tasarımlarınızın gerçekleştirebilirsiniz.