Bir web sayfasındaki metin stilinden, boyutundan, renginden ve konumundan bu stil dili sorumlu olduğundan, web siteleri CSS olmadan sıkıcı görünür.
CSS Nedir?
CSS olarak kısaltılan Basamaklı Stil Sayfaları, HTML öğelerinin bir ekranda veya kağıtta nasıl görüntülenmesi gerektiğini açıklayan bir dildir. CSS, 1996 yılında World Wide Web Consortium (W3C) tarafından oluşturuldu.
HTML öğeleri, bir web sayfasını biçimlendirmeye yardımcı olabilecek etiketlere sahip olacak şekilde tasarlanmamıştı ve geliştiricilerin yalnızca sayfa için bir işaretleme yazması gerekiyordu. HTML 3.2 başlatıldığında gibi etiketlerin kullanıma sunulması, geliştiriciler için yeni sorunlar ortaya çıkardı.
Web sayfalarının renkli arka planları, farklı yazı tipleri ve birden çok stili olduğundan, kodu yeniden yazmak pahalı ve sancılı hale geldi. W3C okulları, bu zorlukları çözmek için CSS’yi tanıttı ve yıllar içinde gelişmeye devam etti.
Neden CSS?
1 numara. CSS Verimlidir
CSS bizi her web sayfasına yazı tipi, öğe hizalamaları, kenarlık, renk, arka plan stili ve boyut gibi etiketler ekleme zahmetinden kurtarır.
2 numara. Zamandan tasarruf
Harici CSS dosyasını değiştirerek tüm web sitesinin görünümünü kolayca değiştirebilirsiniz.
#3. Çoklu Cihaz Uyumluluğu
Modern web kullanıcıları, PC’ler, tabletler ve akıllı telefonlar gibi farklı ekran boyutlarına sahip araçlardaki sitelere erişir. CSS, ekran boyutlarına duyarlı web sayfaları oluşturmayı kolaylaştırır.
#4. Bakımı Kolay Uygulamalar
Modern web uygulamaları her zaman gelişmektedir. CSS, kod tabanını değiştirmeden tek bileşenleri veya hatta tüm web sitesini değiştirmeyi kolaylaştırır.
CSS, Web Siteleri Oluşturmak için HTML ile Nasıl Kullanılır?
HTML, web sayfası oluşturmak için kullanılan standart bir biçimlendirme dilidir. Öte yandan CSS, web sayfalarının (HTML kullanılarak oluşturulmuş) nasıl görüntülendiğini açıklar. HTML ve CSS kullanılarak oluşturulan bir web sayfası, ideal olarak metin, resim bağlantıları ve HTML etiketlerinden oluşan bir HTML dosyasına sahip olacaktır.
Bu HTML dosyası, bir bağlantı etiketi kullanılarak kendisine bağlı ayrı bir CSS dosyasına sahip olabilir veya dahili veya satır içi CSS stilleri kullanabilir. Bir HTML dosyası
gibi bir başlığa ve
ile gösterilen bir paragrafa sahip olabilir. Tarayıcıya paragraftaki tüm içeriği kalın olarak görüntülemesi talimatını vermek veya hatta başlık içeriğini 50 piksel ve yeşil renkli yapmak için CSS’yi kullanabilirsiniz.
Bir sonraki bölümde HTML ve CSS’nin nasıl çalıştığını göstereceğiz.
CSS türleri
1 numara. Harici CSS
CSS’nin harici olarak sınıflandırılabilmesi için bir HTML dosyası ve .css uzantılı ayrı bir CSS dosyası olmalıdır. Örneğin, style.css. CSS dosyası, bir bağlantı etiketi kullanılarak HTML dosyasına/belgesine bağlanır.
Harici bir CSS dosyası örneği:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
CSS dosyası aşağıdaki HTML belgesine bağlanabilir:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Bağlantı etiketi, harici stil sayfasını HTML belgesine bağlarken, href özelliği harici stil sayfasının konumunu belirtir.
Son web sayfası aşağıdaki gibi görünecektir:
Harici CSS, yeniden kullanılabilir bileşenler oluşturmayı ve kod tabanında evrensel değişiklikler yapmayı kolaylaştırdığından en çok önerilen yaklaşımdır.
2 numara. Dahili CSS
Dahili CSS, benzersiz bir şekilde stil vermek istediğiniz tek bir HTML belgeniz olduğunda idealdir. Stil kuralı seti, HTML belgesinde head bölümünde yazılır.
Bu, dahili bir CSS örneğidir:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Oluşturulan web sayfası aşağıdaki gibi görünecektir:
Dahili CSS, bir HTML belgesindeki kodu yükleme hızını etkileyerek çok büyük yaptığından çoğu durumda ideal değildir.
#3. Satır içi CSS
Satır içi CSS, gövde içindeki CSS stilini içerir. Örneğin, satır içi CSS’yi kullanarak bir paragrafa, bir başlığa ve hatta bir div’e stil verebilirsiniz.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Oluşturulan belge aşağıdaki gibi görünecektir:
Her HTML etiketine bir CSS özelliği eklemek zaman aldığından, web uygulamanızı ölçeklendirmek istiyorsanız satır içi CSS ideal değildir.
CSS’de uzmanlaşmak için en iyi çevrimiçi kurslardan ve kitaplardan bazılarını keşfedin.
HTML ve CSS ile Duyarlı Web Siteleri Oluşturun
Bu duyarlı gerçek dünya web siteleri oluşturma kursu, HTML5 ve CSS3 kullanarak duyarlı web sitelerinin nasıl oluşturulacağını öğretir. Kutu modeli, seçici çakışmalarını çözme, konumlandırma şemaları ve kalıtım gibi kavramları araştıran bu kursu öğrenmek için web geliştirme konusunda herhangi bir ön bilgiye ihtiyacınız yok.
Profesyonel bir web sitesini nasıl beyin fırtınası yapacağınızı, planlayacağınızı, çizeceğinizi, kodlayacağınızı, test edeceğinizi ve optimize edeceğinizi öğrenmek istiyorsanız da ideal bir kurstur.
Gelişmiş CSS ve Sass
Gelişmiş CSS ve Sass kursu, basamaklama, özgüllük ve kalıtım gibi konuları keşfederek size CSS’nin perde arkasında nasıl çalıştığını gösterir.
Kurs, güçlü, duyarlı web sayfaları oluşturmak için birçok modern CSS tekniğine sahiptir. Kurs, Saas’ı ve CSS mimarisini, global değişkenleri ve medya sorgularını yönetirken projelerde nasıl kullanılacağını tanıtır.
@keyframes, animasyon ve geçişe değindiği için CSS animasyonunu öğrenmek istiyorsanız da ideal bir kurstur.
CSS öğrenin
Codecademy’den CSS Öğrenin, HTML’yi görsel olarak göz alıcı web sitelerine dönüştürmek için CSS’nin nasıl kullanılacağını öğretir. Kurs 8 derse bölünmüştür ve anlayışınızı test etmek için 6 proje içerir.
Bu kurstan öğreneceğiniz en önemli şeyler, HTML öğelerine nasıl stil ekleyeceğiniz, HTML ve CSS dosyalarını nasıl bağlayacağınız ve web sayfaları için benzersiz düzenler oluşturacağınızdır.
HTML ve CSS ile İlk Web Sayfanızı Oluşturun
İlk web sayfanızı oluşturun kursu, duyarlı web siteleri oluşturmak için HTML5 ve CSS3’ün nasıl kullanılacağını öğretir. Bu ücretsiz kurs 4 modül halinde sunulur ve tamamlanması yaklaşık 10 saat sürer. Bu kursu öğrenmek için önceden herhangi bir programlama bilgisine sahip olmanıza gerek yoktur.
CSS Temelleri
CSS Temelleri, W3Cx tarafından oluşturulur. Bu kursta öğreneceğiniz şeylerden bazıları; web tasarımında en iyi uygulamalar, temel CSS seçicileri ve CSS özelliklerinin nasıl seçileceği. Kurs 5 modüle ayrılmıştır; haftada 5-7 saat çalışırken tamamlamak için yaklaşık 5 haftaya ihtiyacınız var.
CSS3’e Giriş
CSS3’teki bu kurs, Basamaklı Stil Sayfalarını tanıtır. Kurs, Michigan Üniversitesi tarafından hazırlanır ve CSS kurallarının nasıl yazılacağını, iyi programlama alışkanlıklarının nasıl oluşturulacağını ve kodun nasıl test edileceğini öğretir. Tamamlandığında paylaşılabilir bir sertifika ile gelen bu kursu tamamlamak için yaklaşık 12 saate ihtiyacınız var.
HTML ve CSS’ye giriş
HTML ve CSS’ye giriş niteliğindeki bu kurs, HTML ve CSS kullanarak stil sahibi ve iyi yapılandırılmış web sitelerinin nasıl oluşturulacağını öğretir. Kurs, öğrencilere ağaç benzeri bir yapı kullanarak web sitelerini nasıl oluşturacaklarını ve ardından bunları CSS kullanarak nasıl şekillendireceklerini öğretir.
Bu ücretsiz kurs yeni başlayanlar için uygundur ve kendi hızınızda öğrenme modeli kullanır. Sektör uzmanlarının verdiği bu kursu tamamlamak için yaklaşık 3 haftaya ihtiyacınız var.
CSS Eğitimi
CSS Eğitimi, W3schools’ta ücretsiz bir kurstur. Kurs kolay anlaşılması için bölümlere ayrılmıştır. Her bölüm örnekler ve alıştırmalar verir. Platformda, “Kendin Dene” düğmesiyle farklı konseptleri deneyebileceğiniz bir çevrim içi vardır.
CSS: Kesin Kılavuz
CSS: The Definitive Guide kitabı, CSS’nin temellerini, Seçicilerden ve özgüllükten kademeye kadar öğrenmek istiyorsanız yararlıdır. Kitapta ayrıca flexbox, konumlandırma ve şamandıra hileleri de detaylı olarak anlatılıyor.
Ayrıca, 2D ve 3D dönüşümler, geçişler ve animasyonlar üretmek için CSS’yi nasıl kullanacağınızı öğrenmek istiyorsanız sipariş etmeniz gereken kitaptır. Kesin Kılavuz hem Kindle hem de ciltsiz sürümlerde mevcuttur.
HTML5 ve CSS ile Duyarlı Web Tasarımı
HTML5 ve CSS ile Duyarlı Web Tasarımı hakkındaki bu kitap, HTML5 ve CSS kullanarak geleceğe hazır duyarlı web sitelerinin nasıl oluşturulacağını öğretir.
Bu kitaptaki püf noktalarını öğrendikten sonra, oluşturacağınız web siteleri masaüstü bilgisayarlarda, tabletlerde ve cep telefonlarında kusursuz bir şekilde çalışacaktır. Kitap, takip etmesi kolay bir formatta yazılmıştır ve ciltsiz ve Kindle formatlarında mevcuttur.
HTML ve CSS: Web Siteleri Tasarlayın ve Oluşturun
HTML ve CSS hakkındaki bu kitap, ister amatör, ister öğrenci veya profesyonel olun, herkes için idealdir.
Yazar, çeşitli kavramları kavramayı kolaylaştırmak için bu kitabın içeriğini bilgi grafikleri ve yaşam tarzı fotoğrafçılığı aracılığıyla sunar. Kaynak, tüm bölümler arasında gezinmeyi kolaylaştıran benzersiz bir yapıda sunulur.
Modern CSS
Modern CSS hakkındaki bu kitap: Modern Web Geliştirme için CSS’nin Temel Kavramlarında Ustalaşın kod örnekleri, diyagramlar ve ekran görüntüleri aracılığıyla CSS’yi öğretir.
Kitap, ilk bölümlerinde renkleri, seçicileri, kutu modellerini, birleştiricileri ve özgüllüğü tanıtıyor. Kitap daha sonra stil metni, konumlandırma, degradeler, kenarlıklar, Z-endeksi ve yığınlama bağlamlarını tanıtır. Ayrıca geçişler, animasyonlar, dönüşümler, esnek kutu ve CSS ızgaraları gibi ileri düzey konuları da öğrenirsiniz.
Son sözler
Modern web sitelerinde CSS’nin rolü yeterince vurgulanamaz. Web sayfalarını görsel olarak çekici hale getirmenin yanı sıra CSS, çeşitli web sayfalarında gezinmeyi kolaylaştırır.
Yukarıda listelenen kaynakları kullanırsanız, CSS öğrenmek kolay olabilir. Bu kursların bir kısmı ücretsiz, bir kısmı ise ücretlidir.
Ardından, geliştiriciler ve tasarımcılar için CSS hile sayfalarına göz atabilirsiniz.
