Css Nedir? Ne İşe Yarar? Nasıl Kullanılır?

Günümüzde internet kullanımının artmasıyla birlikte web siteleride hayatımızın bir parçası haline geldi. Hemen hemen her kurum veya şirketin web sitesi bulunuyor desem abartmış olmam sanırım. Sadece Türkiye’de yaklaşık 50 milyon web sitesinin olduğunu biliyor muydunuz? Bunların yaklaşık 10 milyonu ise aktif olarak kullanılan web siteleri.

Doğal olarak her geçen gün web geliştiricilerine (front-end veya back-end) duyulan ihtiyaçta bu oranda artıyor. Bu ihtiyacın artmasıyla birlikte Web sitesi nasıl yapılır? Bende web sitesi yapabilir miyim? Web sitesi yapabilmek için neleri bilmem gerekiyor? gibi sorulara cevap aramaya başlıyoruz.

Biraz araştırma yaptıktan sonra ilk karşımıza çıkan konu Html oluyor. Evet, bir web sitesi yapmak istiyorsanız öncelikle ve mutlaka Html bilmelisiniz. Html ile ilgili eksikleriniz varsa Html Dersleri 1 – Html Nedir Ne İşe Yarar? yazımdan başlayarak Html Dersleri yazı serisini takip edebilirsiniz. 

Html ile ilgili eksiklerinizi tamamladıktan sonra bu seferde karşınıza Css konusu çıkacaktır. İşte bu yazımızda Css nedir? Css ne işe yarar? Css nasıl kullanılır? gibi soruların cevaplarını öğreneceğiz. Konuyu daha fazla uzatmadan Css nedir ile başlayalım.

CSS NEDİR?

Css, hazırlamış olduğumuz Html sayfalarına stil vermek için kullanılan bir markup dildir. Bildiğiniz gibi Html ile oluşturulan sayfalar herhangi bir stil olmadan oluşturuluyor (Html etiketlerinin varsayalın Css değerleri hariç). Bu sayfaları renklendirmek, şekillendirmek vb.. gibi görünürlüğünü daha iyi bir hale getirmek için Css kodları yazmamız gerekiyor.

Css’in açılımı, “Cascading Style Sheets” yani “Kademeli Stil Şablonları” dır. Yani bir etikete birden fazla stil kademeli olarak verilebilir. Örneğin bir buton’a renk olarak kırmızı verdik diyelim. Başka bir yerde aynı buton’a yeşil rengini verdiğimizi varsayalım. Yazdığımız iki koddan hangisi daha sonra yazılmış ise buton’a o renk uygulanacaktır.

Şimdi standart bir buton ile Css uygulanmış bir buton arasındaki farkı görmek için küçük bir örnek paylaşmak istiyorum.

css-dersleri-css-nedir-1

Gördüğünüz gibi Css kullanarak Html etiketlerini çok daha güzel ve şık bir hale getirebiliyoruz.

CSS İLE RESPONSİVE WEB TASARIMI

Css kullanarak, oluşturduğumuz web sayfalarını responsive hale getirebiliriz. Yani normal bir laptop için oluşturduğumuz bir sayfayı Css kullanarak tablet ve telefona uyumlu hale getirebiliriz. Örneğin bu site responsive bir sitedir. Telefon ve Laptop görüntülerine baktığımızda, cihaz ve ekran boyutu ile uyumlu olduğunu görüyoruz. İşte bunu Css kullanarak yapıyoruz.

Şimdi bu siteyi tarayıcıda açıp ekran boyutunu küçültmeye başlayacağım. Site içeriklerinin ekran boyutuna göre nasıl değiştiğini inceleyelim.

css-nedir-responsive-web-tasarimiGördüğünüz gibi ekran boyutu değiştikçe içeriklerde ona göre şekilleniyor. Örneğin menüye dikkat ettiyseniz tamamen kapandı ve toggle menü haline dönüştü. İşte bunu Css’te bulunan media query sorguları ile yapabiliyoruz. Bu tarz tasarımlara da Responsive Web Tasarımı diyoruz. Bu konuda daha fazla bilgi almak isterseniz Css Dersleri 37 – Responsive Web Tasarım Nedir? yazımı okuyabilirsiniz.

Sanırım Css nedir sorusunun cevabı artık anlaşılmıştır. Şimdi de Css kullanımına bakalım.  

CSS SÖZ DİZİMİ (SYNTAX)

Gördüğünüz gibi Css kodlarını yazarken öncelikle bu kodlar hangi etiket için uygulanacaksa onu seçip süslü parantezler arasına kodlarımızı yazıyoruz. Kodları yazarken, özellik:değer şeklinde yazıyoruz ve her birinin sonuna noktalı virgül koyuyoruz. Bu şekilde Html etiketlerinin görünümünü dilediğimiz gibi değiştirebiliriz. Örneğin yukarda yazmış olduğumuz kod ile <p> etiketinin yazı rengini sarı, yazı boyutunu ise 30px yapmış olduk.

Şimdilik burda yazdığımız Css özelliklerine takılmayın. İlerleyen derslerde tüm Css özelliklerini detaylı olarak öğreneceğiz.

CSS KULLANIMI

Yazacağımız Css kodlarını 3 farklı şekilde tanımlayabiliriz.

1 – Harici Stil Sayfası Oluşturarak Css Kullanımı

Bu şekilde tanımlama için .css uzantılı bir dosya oluşturup tüm Css kodlarımızı bunun içerisine yazarız ve bu dosyayı hangi Html sayfasında kullanmak istiyorsak o sayfanın <head></head> etiketleri arasında tanımlarız. Yazılan kodlar, Css dosyasının referans verildiği tüm Html sayfalarında uygulanır. En kullanışlı yöntemdir. Çünkü tüm Html sayfalarının stil yönetimini tek dosyadan yapmış olacağız. Örneğin stil.css dosyamız olsun. İçerisinde birkaç Css kodu tanımlayıp Html sayfamıza ekleyelim.   

2 – Dahili Stil Kodları Yazarak Css Kullanımı

Html sayfasının içerisinde <style></style> etiketi oluşturup içerisine Css kodlarımızı yazabiliriz. Genelde <head></head> etiketleri arasına <style> etiketi oluşturulur. Yazılan kodlar sadece o sayfadaki Html etiketlerine uygulanır. Örneğin, 

3 – Satır İçi Stil Kodları Yazarak Css Kullanımı

Html sayfasındaki etiketlerin style attribute’larının içerisine Css kodlarımızı yazabiliriz. Yazılan kodlar sadece o etikete uygulanır. Bu yöntem tavsiye edilmez. Çünkü Html kodları ile Css kodları iç içe geçeceği için karışıklık oluşacaktır. Örneğin,  

Dikkat : Bir Html etiketine birden fazla Css kodu tanımlanırsa, kodlar yukardan aşağıya doğru çalıştığı için en son yazılan kod geçerli olacaktır. Örneğin aşağıdaki kodda <h1> etiketinin rengi sarı olacaktır. Çünkü h1 etiketine sarı rengi kırmızıdan daha sonra verilmiştir.

Dikkat : Bir Html etiketine bu 3 farklı yöntem ile Css kodu yazdığımızı varsayalım. Uygulanma sıralaması şu şekildedir:

  Satır içi

  Dahili stil kodları ve harici stil kodları ( Burda <head></head> etiketinde hangisinin daha sonra yazıldığına göre değişir.)

 3  Tarayıcı varsayılan değerleri ( Tarayıcıların Html elementleri için varsayılan Css değerleri vardır.)

Gördüğünüz gibi en baskın Css kodları satır içi kodlar ama tavsiye edilmeyen yöntem de yine satır içi kod yazımı.

CSS DOSYALARINA YORUM SATIRLARI EKLEME

Son olarak Css dosyalarımıza nasıl açıklama bilgileri yazabiliriz onu öğrenelim. Açıklama bilgileri /* ile başlar ve */ ile biter. Bu ikisinin arasına dilediğiniz kadar yazabilirsiniz. Bu yazılanlar kodun çalışmasını hiçbir şekilde etkilemez. Bu açıklama satırlarını kullanırsanız size çok faydası olacaktır. Çünkü kodları yazmaya başlayınca bir müddet sonra kodlar çoğalacak ve neyi nerde nasıl yazdığınızı unutabilir veya bulmakta zorlanabilirsiniz. Açıklama bilgileri bu nedenle işinizi çok kolaylaştıracaktır.

Bir yazımızın daha sonuna geldik. Css Nedir? artık öğrendiğimize göre diğer Css Derslerine başlayabiliriz. 

Umarım sizin için faydalı bir yazı olmuştur.

Bu yazılar da ilginizi çekebilir.

BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?

JQuery Dersleri 1 – JQuery Nedir ve Nasıl Kullanılır?

Yeni bir yazımda görüşmek üzere.

Sonraki : Css Dersleri 2 – Seçiciler

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +