Temel seviye HTML öğrendiğimize göre artık CSS derslerinin kapılarını arayalabiliriz.
CSS nedir?
Gaz ve Toz Bulutları ve Her şeye genel bir bakış
Yazilim teknolojisi iki ana ayak üzerinde ilerlemektedir “Yazılım” ve “Donanım” (Software & Hardware) Yazılım ayağındaki parmaklardan önemli iki tanesi “Front end” diğeri de “Back end” dir. Yani bilgisayarımızda çalıştırdığımız her programın yada gezindiğimiz her web sitesinin çalışmasını sağlayan temel olarak iki farklı yazılım alanı vardır. Bunlardan biri kullanıcıya bakar diğeri ise programın üzerinde çalıştırıldığı makinaya bakar. Bu durumda kullanıcı siz oluyorsunuz, biz yani insanlar. Makina evimizdeki yada bilgi merkezlerindeki faklı tür lerdeki bilgisayarlar oluyor.
CSS’i Nerede Buluruz?
CSS dili kullanıcılara yönelik temel içerik düzenleme dilidir. Bie web sitesini yada mobil apliksayonu yada bilgisayarınızda çalıştırdığınız programların görünümünü güzelleştiren temel araçtır. Bir resmin büyüklüğünden, yazdığınız yazının renk ve karakter tipine kadar CSS ile müdahale edebilirsiniz. HTML derslerinde tarif ettiğimiz kutu ve kutucukları istediğiniz şekilde şekillendirip renklendirip görünümlerini değiştirebiliriz.
CSS nasıl yazılır?
Geliştirilen yeni teknolojilerin de yardımı ile CSS yazmanın bir çok faklı yolu ve yöntemi var. Biz burada iki tanesini inceleyeceğiz.
- HTML Satır içi CSS (Inline CSS)
- Sitil sayfası tanıtma. (Style Sheets)
HTML Satır İçi CSS Örnekleri
Başlangıç noktası olarak basit bir yazıyı ele alalım.
<p>Hello World!</p> 
ve şöyle değiştirelim :
<p style="color: blueviolet; font-weight: 900; font-family: 'Trebuchet MS'; font-size: 2rem;">Hello World!</p> 
standart bir yazı için daha bir çok değişiklik yapabiliriz. Aslında hayal gücünüzü bu konuda zorlayabilirsiniz. Ama teknik olarak ne yaptığımıza dikkat ederseniz. İlk
yazı işaretleticisi (paragraf kutusu diyebiliriz) içerisine bir harflik boşluk bıraktıktan sonra (style=”color: blueviolet; font-weight: 900; font-family: ‘Trebuchet MS’; font-size: 2rem;”) stil verebileceğimiz CSS kodlarımızı yazdık. Bu kodlar sadece içerisine koyduğumuz işaretleyiciyi eklileyecektir. Sayfanın başka yerlerindeki yazılar ilk halinde kalacaktır. Ama bir stil sayfası oluşturup bunu HTML sayfasında tanımlar isek bütün sayfada dilerseniz 1milyon farklı paragraf olsun hepsini birden tek bir satır CSS ile modifiye edebiliriz.
Stil Sayfası Tanıtma :
Stil sayfaları sonu .css ile biten dosyalardır. Genelde Style yada Görünüm klasörleri içerisinde saklanır.
Satır içi CSS kodlarımızı ayrı bir stil dosyasına yazalım.
Bu yazdığımız CSS kodlarının ” <p> ” paragraf elementlerini nitelemesini istediğimiz için satır başına “p {” yazarak başlıyoruz. içerisine kodlarımızı daha düzenli anlaşılır yazabiliriz. sonra da süslü parantezi kapatıyoruz. Bütün işlemi burada bitirmeden önce bu style.css dosyasını index.html dosyası içerisinde tanımlayalım ki iki dosya arasında bir bağ olsun. elementi içerisindeki Meta bilgilerinin en altına “<title>“dan sonra bağlantı link kodunu doğru adres ile yazalım. <link rel="stylesheet" href="style.css">
Benim örneğim de style dosyası html dosyası ile aynı klasörde olduğu için href=
CSS ile buraya kadar ilk renklerimizi tanımlamış olduk. CSS ile yapabilecekleriniz gerçekten hayal gücünüz ile sınırlı. Bir sonraki dersimiz de stil dosyası üzerinde başka örnekler deneyeceğiz. Siz de CSS kodlarının tamamına “www.w3schools.com” sitesinden ulaşabilirsiniz.
Bu sitenin ingilizce olması sizi korkutmasın, Google ile tüm siteyi çok rahat ve güzel bir şekilde tercüme edebiliyorsunuz. Bunu da yine başka bir yazıda anlatırım inşallah.
