Adım Adım Öğrenmek #2 CSS’e Giriş
Bayanlar ve baylar, Medium’a flaş bir giriş yapan serimizin 2. yazısıyla beraberiz. Aranan bir yazılımcı olmak ( Engin Abim sağolsun) çok çok az uzağınızda. Belki şimdilik yaptıklarımızın yazılımla çok alakası yok diyebilirsiniz ama bunlar daha başlangıç, ilerleyen süreçte neler olacağını hep beraber göreceğiz.
En son beraber HTML ile birkaç satır kod yazarak kendimizi az da olsa tatmin etmiştik. Hazırladığımız sayfa pek iç açıcı olmasa da özgüvenimizi yükseltmişti ve bizi okyanusa açılmak için motive etmişti. Şimdi kıyıdan biraz daha uzaklaşma vakti.
Bildiğiniz gibi öğrenmeden önce küçük araştırmalarla merakımızı tazelememiz lazım. Hemen başlıyoruz
CSS’in açılımı: Cascading Style Sheets. Türkçe meali: Basamaklı Stil Sayfaları. Ortamlarda hava olsun diye aklımızda tutmamız gereken bu bilgi aynı zamanda bize CSS’in tasarıma yönelik bir dil olduğu hakkında ipucu veriyor. İyi güzel de ben nasıl kullanacağım CSS’i? HTML dosyamın içine direkt yazabiliyor muyum yoksa yeni bir dosya mı açmam lazım? Yeni dosya açacaksam HTML dosyama nasıl bağlayacağım?
Basit soruların basit cevapları vardır.
-Ben
Hemen en sevdiğim kaynaklardan biri olan ve yakında ‘Abi kaç para veriyolar ya reklam için?’ diye anlamsız sorular sordurtacak muhteşem w3schools’u açıyorum. Beşinci sekme, bana sorularımın cevaplarını veriyor.
Sayfayı okuduktan sonra bir karar vermemiz gerekiyor, hangi şekilde HTML’e ekleyeceğiz CSS’i? External mı Internal mı Inline mı?
External ile direkt .css uzantılı dosya açıp oraya yazıyoruz. Internal ile araya ‘<style>’ elementini sıkıştırıp onun içine yazıyoruz. Inline da ise direkt nereyi değiştirmek istiyorsak o elementin içine ‘style=’ yazıp devam ediyoruz. Sanırım mantıklı olan seçenek çok açık.
Kodlama Zamanı
Serinin 1. yazısında yaptığımız işleri tekrar açıyoruz. Atom’u açtıktan sonra önce HTML dosyamızı açmak yerine Install Package kısmına geliyoruz. Burda ‘css snippets’ yazdıktan sonra şu package’ı yüklüyoruz.
HTML kodlarını yazdığımız .html dosyasını açıyoruz. Görüyoruz ki hiç bilmeden Inline bir şekilde CSS’i kullanmışız.
Bunlar böyle kala dursun, şimdi yapmamız gereken iş bize bağırıyor. Sıra bende diyor. Hayır diyoruz daha var diyoruz ama olmuyor bastıramıyoruz sesini. Usulca kaynağımıza dönüp CSS hakkında neler yapılabileceğini okuyoruz. Kaynak okumamız yaklaşık yarım saat sürebilir.
w3schools’ta gezinirken ‘CSS Transition’ diye bir şey görüyorum. Küçük animasyonlar içeren bu tasarım kodları ilgimi çekiyor ve Google’dan daha detaylı bir araştırma yapıyorum.
Gerekli ve gereksiz bilgiler alındı, şimdi kodumuzda transition pratiği yapalım.
Öncelikle yeni bir css dosyası açarak başlıyoruz. HTML uzantılı dosyamızın olduğu konuma yeni bir dosya açıp uzantısını css diye değiştiriyoruz. ( Bu taktiği word-pdf değişimlerinde de uygulayabilirsiniz.)
Şimdi css dosyamızı html’e bağlamamız lazım. Onun için:
<link rel=”stylesheet” type=”text/css” href=”mystyle.cssşu kodu <html> yazan satırımızın altına ekliyoruz. Şu an HTML ve CSS dosyalarımız bağlantılı durumda. Ayrıca dosyanızın ismini değiştirmeyi de unutmayınız efenim.
Sonraki adımımız transition içerikli kodlar yazmak. İstediğimiz herhangi bir siteden aklımıza uyan kodlara bakıp kendimize uyarlıyoruz. Benim uyarladığım:
HTML
<div class="soccerball" />CSS
.soccerball {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: #dddddd;
transform: translateX(0px);
}
.soccerball:active {
transform: translateX(100px);
}Bu yazılan kodlarda gördüğünüz üzere bir sürü keyword var. Ne anlama geldiklerini değiştirerek veya internetten bakarak bulabilirsiniz. Hepsini teker teker öğrenmek kesinlikle tavsiye değildir, en güzeli yapa yapa öğrenmek. Zaten kod yazmak için hızlı öğrenmek ve pratik yapmak elzemdir. Sevgili arkadaşlar, yavaş yavaş kıyı gözden kayboluyor. Ne kadar uzaklaşacağınız, nelerle karşılaşacağınız tamamen sizin elinizde.
